mermaid-live-editor (MCP Server)

Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.

6,751 stars TypeScript MCP Ready Full Docs Skills View Markdown #diagrams #mermaid

Documentation Agent Skills & Rules MCP Server API Specification

Claude Desktop Configuration

Add to ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mermaid-live-editor": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-live-editor"
      ]
    }
  }
}

Cursor MCP Configuration

Add to .cursor/mcp.json in your workspace root

{
  "mcpServers": {
    "mermaid-live-editor": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mermaid-live-editor"
      ]
    }
  }
}

NPX / Command Line Execution

Run directly with Node.js or NPX package runner

npx -y @modelcontextprotocol/server-mermaid-live-editor

Claude Desktop Configuration

Cursor MCP Configuration

NPX / Command Line Execution

Explore Related Technologies & Topics