[{"_1":2,"_303":-5,"_304":-5},"loaderData",{"_3":4,"_22":23,"_220":221},"root",{"_5":6,"_7":8},"toasts",[],"visitor",{"_9":10,"_11":12},"viewportWidth",1280,"visitorSession",{"_13":14,"_16":17,"_18":-5,"_19":20,"_21":-5},"attributes",[15],"bot","id",19346472,"membership","referenceId","0199f420-7955-7299-8090-ea86aef37824","userAccount","routes/_public/mcp/servers/~namespace/~slug/_pages/_layout",{"_24":25,"_26":-5,"_27":28,"_29":40,"_136":137,"_218":219},"availableLocales",[],"githubUser","locale",{"_29":30,"_33":37,"_38":39},"mcpServer",{"_31":32,"_33":34,"_35":36},"description","MCP Server to previewing mermaid diagrams.","name","claude-mermaid","readme","# Claude Mermaid MCP Server\n\nMCP server for rendering Mermaid diagrams in Claude Code with **live reload** functionality.\n\nAutomatically renders diagrams in your browser with real-time updates as you refine them. Perfect for iterative diagram development and documentation workflows.\n\n![Demo](https://raw.githubusercontent.com/veelenga/claude-mermaid/main/assets/demo.gif)\n\n## ✨ Features\n\n- 🔄 **Live Reload** - Diagrams auto-refresh in your browser as you edit\n- 🎨 **Multiple Save Formats** - Export to SVG, PNG, or PDF\n- 🌈 **Themes** - Choose from default, forest, dark, or neutral themes\n- 📐 **Customizable** - Control dimensions, scale, and background colors\n- 🪄 **Interactive Preview** - Pan diagrams by dragging, zoom with browser controls, reset position with one click\n- 🗂️ **Multiple Previews** - Use `preview_id` to work on multiple diagrams simultaneously\n- 💾 **Persistent Working Files** - Live previews are stored under `~/.config/claude-mermaid/live`\n\n## Architecture\n\n

Project Architecture Diagram

\n\n![Architecture Diagram](https://raw.githubusercontent.com/veelenga/claude-mermaid/main/assets/architecture.png)\n\n

\n\n

User Workflow Diagram

\n\n![User Workflow Diagram](https://raw.githubusercontent.com/veelenga/claude-mermaid/main/assets/workflow.png)\n\n

\n\n

Dependencies Diagram

\n\n![Dependencies Diagram](https://raw.githubusercontent.com/veelenga/claude-mermaid/main/assets/dependencies.png)\n\n

\n\n## 🚀 Quick Start\n\n### 1. Install\n\n**From npm:**\n\n```bash\nnpm install -g claude-mermaid\n```\n\n**From source:**\n\n```bash\ngit clone https://github.com/veelenga/claude-mermaid.git\ncd claude-mermaid\nnpm install && npm run build && npm install -g .\n```\n\n### 2. Configure Claude Code\n\n**Global setup** (recommended - works in all projects):\n\n```bash\nclaude mcp add --scope user mermaid claude-mermaid\n```\n\n**Project-specific setup:**\n\n```bash\nclaude mcp add mermaid claude-mermaid\n```\n\n**Manual configuration:**\n\nAdd to your MCP config file (`.claude.json` or `.mcp.json`):\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\"\n }\n }\n}\n```\n\n### 3. Verify Installation\n\n```bash\nclaude mcp list\n```\n\nYou should see `mermaid: claude-mermaid - ✓ Connected`\n\n## 🔌 Other MCP Client Configurations\n\nWhile this server is optimized for Claude Code, it can work with any MCP-compatible client. Here's how to configure it for other popular tools:\n\n

Codex

\n\nAdd to your Codex MCP settings file (`~/.codex/mcp_settings.json`):\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\"\n }\n }\n}\n```\n\nOr configure via Codex CLI:\n\n```bash\ncodex mcp add mermaid claude-mermaid\n```\n\n

\n\n

Cursor

\n\nAdd to your Cursor MCP config file (`.cursor/mcp.json` or settings):\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\"\n }\n }\n}\n```\n\nOr use Cursor's settings UI:\n\n1. Open Cursor Settings (Cmd/Ctrl + ,)\n2. Navigate to MCP Servers\n3. Add a new server with command: `claude-mermaid`\n\n

\n\n

VSCode with Cline Extension

\n\nIf using the [Cline extension](https://github.com/cline/cline) for VSCode:\n\n1. Open VSCode settings (Cmd/Ctrl + ,)\n2. Search for \"Cline MCP\"\n3. Add to MCP Settings JSON:\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\"\n }\n }\n}\n```\n\n

\n\n

Windsurf

\n\nAdd to Windsurf's MCP configuration file:\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\"\n }\n }\n}\n```\n\nConfiguration location varies by platform:\n\n- **macOS:** `~/Library/Application Support/Windsurf/mcp.json`\n- **Linux:** `~/.config/windsurf/mcp.json`\n- **Windows:** `%APPDATA%\\Windsurf\\mcp.json`\n\n

\n\n

Gemini CLI

\n\nAdd to Gemini CLI's MCP configuration file (`~/.gemini/mcp.json`):\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\"\n }\n }\n}\n```\n\nOr use the Gemini CLI to configure:\n\n```bash\ngemini config mcp add mermaid --command claude-mermaid\n```\n\n

\n\n

Other MCP Clients

\n\nFor any MCP-compatible client, use the standard configuration:\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\"\n }\n }\n}\n```\n\nThe command `claude-mermaid` should be available in your PATH after installation.\n\n**Note:** Some clients may require the full path to the executable:\n\n- Find the path: `which claude-mermaid` (Unix/macOS) or `where claude-mermaid` (Windows)\n- Use absolute path in config: `\"command\": \"/path/to/claude-mermaid\"`\n\n

\n\n## 💡 Usage\n\nSimply ask Claude Code to create Mermaid diagrams. The server will:\n\n1. ✅ Render the diagram\n2. 🌐 Open it in your browser with live reload\n3. 🔄 Auto-refresh when you make changes\n4. 💾 Save to your project path using the `mermaid_save` tool\n\n### Basic Examples\n\n```\n\"Create a Mermaid diagram showing the user authentication flow\"\n\"Draw a sequence diagram for the payment process\"\n\"Generate a flowchart for the deployment pipeline\"\n```\n\n### Advanced Examples\n\n**With custom formatting:**\n\n```\n\"Create a dark theme architecture diagram with transparent background\"\n\"Generate a forest theme flowchart and save to ./docs/flow.svg\"\n```\n\n**With specific output format:**\n\n```\n\"Create an ER diagram and save as PDF to ./docs/schema.pdf\"\n\"Save the flowchart as PNG to ./docs/flow.png\"\n```\n\n_Note: Browser always shows SVG for live preview, while saving to your chosen format._\n\n**Iterative refinement:**\n\n```\n\"Create a class diagram for the User module\"\n// Browser opens with live preview\n\"Add the Address and Order classes with relationships\"\n// Diagram updates automatically in browser!\n```\n\n### Complete Example\n\n```\n\"Create a flowchart and save to ./docs/auth-flow.svg:\n\ngraph LR\n A[User Login] --> B{Valid Credentials?}\n B -->|Yes| C[Access Granted]\n B -->|No| D[Access Denied]\n C --> E[Dashboard]\n D --> F[Try Again]\n\n style A fill:#e1f5ff\n style C fill:#d4edda\n style D fill:#f8d7da\n\"\n```\n\nThe diagram will be saved to `./docs/auth-flow.svg` and opened in your browser with live reload enabled.\n\n## 🔧 Tools and Parameters\n\nThere are two tools exposed by the MCP server:\n\n1. `mermaid_preview` — render and open a live preview\n\n- `diagram` (string, required) — Mermaid diagram code\n- `preview_id` (string, required) — Identifier for this preview session. Use different IDs for multiple concurrent diagrams (e.g., `architecture`, `flow`).\n- `format` (string, default `svg`) — One of `svg`, `png`, `pdf`. Live preview is available only for `svg`.\n- `theme` (string, default `default`) — One of `default`, `forest`, `dark`, `neutral`.\n- `background` (string, default `white`) — Background color. Examples: `transparent`, `white`, `#F0F0F0`.\n- `width` (number, default `800`) — Diagram width in pixels.\n- `height` (number, default `600`) — Diagram height in pixels.\n- `scale` (number, default `2`) — Scale factor for higher quality output.\n\n2. `mermaid_save` — save the current live diagram to a path\n\n- `save_path` (string, required) — Destination path (e.g., `./docs/diagram.svg`).\n- `preview_id` (string, required) — Must match the `preview_id` used in `mermaid_preview`.\n- `format` (string, default `svg`) — One of `svg`, `png`, `pdf`. If the live working file for this format doesn’t exist yet, it is rendered on demand before saving.\n\n## 🎯 How Live Reload Works\n\n1. **First render:** Opens diagram in browser at `http://localhost:3737/{preview_id}`\n2. **Make changes:** Edit the diagram through Claude Code\n3. **Auto-refresh:** Browser detects changes via WebSocket and reloads\n4. **Status indicator:** Green dot = connected, Red dot = reconnecting\n\nThe live server uses ports 3737-3747 and automatically finds an available port.\n\n### Live Preview Controls\n\n- **Pan:** Click and drag the diagram to move it around\n- **Zoom:** Use browser zoom (Ctrl/Cmd + +/- or pinch-to-zoom on trackpad)\n- **Reset Position:** Click the ⊙ button in the status bar to recenter the diagram\n\n### Notes\n\n- Live preview is available for `svg` format only; PNG/PDF are rendered without live reload.\n- For sequence diagrams, Mermaid does not support `style` directives inside `sequenceDiagram`.\n\n## 🛠️ Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run tests\nnpm test\n\n# Watch mode for development\nnpm run dev\n\n# Start the MCP server directly\nnpm start\n```\n\n## 📝 Troubleshooting\n\n**Server not connecting:**\n\n```bash\n# Check if server is installed\nclaude-mermaid -v\n\n# Reinstall if needed\nnpm install -g claude-mermaid\n\n# Verify MCP configuration\nclaude mcp list\n```\n\n**Permission denied error:**\n\n```bash\n# Make sure the binary is executable\nchmod +x $(which claude-mermaid)\n```\n\n**Port already in use:**\n\n- The server uses ports 3737-3747\n- It will automatically find an available port\n- Check if another process is using these ports: `lsof -i :3737-3747`\n\n**Diagrams not rendering or live reload not working:**\n\nThe server logs to `~/.config/claude-mermaid/logs/`:\n\n- `mcp.log` - Tool requests and diagram rendering\n- `web.log` - HTTP/WebSocket connections and live reload\n\nEnable debug logging in your MCP config:\n\n```json\n{\n \"mcpServers\": {\n \"mermaid\": {\n \"command\": \"claude-mermaid\",\n \"env\": {\n \"CLAUDE_MERMAID_LOG_LEVEL\": \"DEBUG\"\n }\n }\n }\n}\n```\n\nThen check the logs:\n\n```bash\n# View MCP operations\ntail -f ~/.config/claude-mermaid/logs/mcp.log\n\n# View WebSocket connections\ntail -f ~/.config/claude-mermaid/logs/web.log\n```\n\nAvailable log levels: `DEBUG`, `INFO` (default), `WARN`, `ERROR`, `OFF`\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT - see [LICENSE](LICENSE) file for details\n\n## 🔗 Links\n\n- [GitHub Repository](https://github.com/veelenga/claude-mermaid)\n- [npm Package](https://www.npmjs.com/package/claude-mermaid)\n- [Claude Code Documentation](https://docs.claude.com/claude-code)\n- [Mermaid Documentation](https://mermaid.js.org/)\n","English","tag","en-US",{"_41":42,"_13":43,"_49":32,"_50":51,"_16":52,"_53":54,"_33":34,"_66":67,"_74":36,"_75":-5,"_76":77,"_124":125,"_130":-5,"_61":34,"_131":132,"_64":133,"_134":135},"addedAt","2025-10-19T16:21:14.593021Z",[44,45,46,47,48],"category:developer-tools","category:workplace-and-productivity","language:typescript","license_grade:a","author:claimed","descriptionMarkdown","descriptionPlainText","MCP Server to previewing mermaid diagrams. https://github.com/veelenga/claude-mermaid/",12777,"integrations",[55],{"_56":57,"_31":63,"_64":65},"brand",{"_58":59,"_33":60,"_61":62},"logoSvgPath","M23.99 2.115A12.223 12.223 0 0 0 12 10.149 12.223 12.223 0 0 0 .01 2.115a12.23 12.23 0 0 0 5.32 10.604 6.562 6.562 0 0 1 2.845 5.423v3.754h7.65v-3.754a6.561 6.561 0 0 1 2.844-5.423 12.223 12.223 0 0 0 5.32-10.604Z","Mermaid","slug","mermaid","Enables rendering of Mermaid diagrams with live reload functionality, allowing real-time diagram updates in the browser and export to multiple formats (SVG, PNG, PDF)","uid","15pva2hut2","namespace",{"_68":69,"_61":73},"owner",{"_70":71},"githubAccount",{"_72":73},"login","veelenga","readmeMarkdown","redditPostExternalId","repository",{"_78":79,"_92":93,"_96":97,"_116":-5,"_117":118,"_119":120,"_123":-5},"argumentsJsonSchema",{"_80":81,"_89":90,"_87":91},"properties",{"_82":83},"CLAUDE_MERMAID_LOG_LEVEL",{"_84":85,"_31":86,"_87":88},"default","INFO","Log level for the Mermaid MCP server. Available log levels: DEBUG, INFO (default), WARN, ERROR, OFF","type","string","required",[],"object","githubProject",{"_35":36,"_94":95},"url","https://github.com/veelenga/claude-mermaid","githubRepository",{"_98":99,"_100":101,"_102":103,"_16":104,"_105":106,"_33":34,"_68":107,"_109":110,"_111":112,"_114":115},"defaultBranch","main","fullName","veelenga/claude-mermaid","githubTreeId",1753544,30691,"language","TypeScript",{"_72":73,"_64":108},"dh2ha4g8of","recentStargazers",0,"spdxLicense",{"_33":113},"MIT License","stargazers",11,"glamaJson","inspectable",true,"npmPackage",{"_33":34,"_121":122},"weeklyDownloads",17,"supportedPlatforms","scores",{"_126":127,"_128":-5,"_129":-5},"license",100,"quality","security","simpleIcon","toolCount",2,"casmm5l9ho","updatedAt","2025-10-19T16:25:42.630772Z","meta",[138,141,143,150,153,155,158,161,164,167,170,172,175,178,180,182,184,186,188],{"_139":140},"title","claude-mermaid | Glama",{"_142":51,"_33":31},"content",{"_144":145,"_146":147,"_148":149},"href","https://glama.ai/mcp/servers/@veelenga/claude-mermaid","rel","canonical","tagName","link",{"_142":34,"_151":152},"property","og:title",{"_142":51,"_151":154},"og:description",{"_142":156,"_151":157},"https://glama.ai/logo.png","og:logo",{"_142":159,"_151":160},"https://glama.ai/mcp/servers/@veelenga/claude-mermaid/og-image","og:image",{"_142":162,"_151":163},"630","og:image:height",{"_142":165,"_151":166},"1200","og:image:width",{"_142":168,"_151":169},"website","og:type",{"_142":145,"_151":171},"og:url",{"_142":173,"_151":174},"Glama – MCP Hosting Platform","og:site_name",{"_142":176,"_33":177},"summary_large_image","twitter:card",{"_142":173,"_33":179},"twitter:title",{"_142":51,"_33":181},"twitter:description",{"_142":159,"_33":183},"twitter:image",{"_142":162,"_33":185},"twitter:image:height",{"_142":165,"_33":187},"twitter:image:width",{"_189":190},"script:ld+json",{"_191":192,"_193":194},"@context","http://schema.org","@graph",[195],{"_191":196,"_197":198,"_199":200},"https://schema.org","@type","BreadcrumbList","itemListElement",[201,208,211,215],{"_197":202,"_203":204,"_33":205,"_206":207},"ListItem","item","/","Glama","position",1,{"_197":202,"_203":209,"_33":210,"_206":132},"/mcp","MCP",{"_197":202,"_203":212,"_33":213,"_206":214},"/mcp/servers","Servers",3,{"_197":202,"_203":216,"_33":34,"_206":217},"/mcp/servers/@veelenga/claude-mermaid",4,"visitorIsMaintainer",false,"routes/_public/mcp/servers/~namespace/~slug/_pages/_explorer/blob/~commit/~/_route",{"_222":223,"_29":229,"_248":249,"_136":262,"_260":286,"_287":288},"blob",{"_142":224,"_225":226,"_227":228},"\n\n","fileName","favicon.svg","size",758,{"_41":42,"_13":230,"_49":32,"_50":51,"_16":52,"_53":231,"_33":34,"_66":234,"_74":36,"_75":-5,"_76":237,"_124":247,"_130":-5,"_61":34,"_131":132,"_64":133,"_134":135},[44,45,46,47,48],[232],{"_56":233,"_31":63,"_64":65},{"_58":59,"_33":60,"_61":62},{"_68":235,"_61":73},{"_70":236},{"_72":73},{"_78":238,"_92":242,"_96":243,"_116":-5,"_117":118,"_119":246,"_123":-5},{"_80":239,"_89":241,"_87":91},{"_82":240},{"_84":85,"_31":86,"_87":88},[],{"_35":36,"_94":95},{"_98":99,"_100":101,"_102":103,"_16":104,"_105":106,"_33":34,"_68":244,"_109":110,"_111":245,"_114":115},{"_72":73,"_64":108},{"_33":113},{"_33":34,"_121":122},{"_126":127,"_128":-5,"_129":-5},"member",{"_250":251,"_254":255,"_256":257,"_102":258,"_259":219,"_260":226,"_261":118,"_227":228,"_87":222},"commit",{"_252":253},"sha","6075049a5b53325a097787c89bcb18c4f643af55","contentStoredObjectPointerId",16563403,"fullPath","src/preview/favicon.svg",1753540,"indexable","path","safeToDisplayAsText",[263,265,267,269,271,272,273,275,276,277,278,279,280,281,282,283,284,285],{"_139":264},"favicon.svg | claude-mermaid | Glama",{"_142":266,"_33":31},"Enterprise-grade security, privacy, and features like agents, MCP, prompt templates, and more.",{"_144":268,"_146":147,"_148":149},"https://glama.ai/mcp/servers/@veelenga/claude-mermaid/blob/6075049a5b53325a097787c89bcb18c4f643af55/src/preview",{"_142":270,"_151":152},"favicon.svg | claude-mermaid",{"_142":266,"_151":154},{"_142":156,"_151":157},{"_142":274,"_151":160},"https://glama.ai/generated-images/og?title=favicon.svg+%7C+claude-mermaid",{"_142":162,"_151":163},{"_142":165,"_151":166},{"_142":168,"_151":169},{"_142":268,"_151":171},{"_142":173,"_151":174},{"_142":176,"_33":177},{"_142":173,"_33":179},{"_142":266,"_33":181},{"_142":274,"_33":183},{"_142":162,"_33":185},{"_142":165,"_33":187},"src/preview","treeMembers",[289,291,295,299],{"_250":290,"_256":257,"_260":226,"_87":222},{"_252":253},{"_250":292,"_256":293,"_260":294,"_87":222},{"_252":253},"src/preview/script.js","script.js",{"_250":296,"_256":297,"_260":298,"_87":222},{"_252":253},"src/preview/style.css","style.css",{"_250":300,"_256":301,"_260":302,"_87":222},{"_252":253},"src/preview/template.html","template.html","actionData","errors"]

MCP directory API