claude-mermaid

Claude Mermaid MCP Server renders Mermaid diagrams in Claude Code with live reload. Operations teams use it to visualize workflows, system architectures, and processes. It integrates with Claude Code for real-time updates and expert guidance.

[{"step":1,"action":"Ensure the claude-mermaid MCP Server is installed and configured in your Claude Code environment. Verify it’s running by executing `list_mcp_servers` in the terminal.","tip":"If the server isn’t listed, install it via `pip install claude-mermaid-mcp` and restart Claude Code."},{"step":2,"action":"Open a new file in Claude Code (e.g., `auth-flow.mmd`) and paste your Mermaid diagram syntax. Use the MCP Server to render it in real-time by running `mermaid.render --file auth-flow.mmd`.","tip":"For live updates, use `mermaid.watch --file auth-flow.mmd` to automatically refresh the diagram as you edit the file."},{"step":3,"action":"Customize the diagram based on your needs. For example, add or remove components, adjust styling, or integrate dynamic data (e.g., API response times) using placeholders like `[DYNAMIC_VALUE]`.","tip":"Use Mermaid’s built-in themes (e.g., `%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000' }}}%%`) to match your team’s branding."},{"step":4,"action":"Export the diagram for documentation or sharing. Use `mermaid.export --file auth-flow.mmd --format png` to generate a high-resolution image, or copy the rendered diagram directly into your notes.","tip":"For collaborative editing, share the `.mmd` file with your team and use the MCP Server’s live reload feature to review changes together."},{"step":5,"action":"Iterate based on feedback. For example, if your team identifies a gap in the workflow, update the diagram syntax and re-render it instantly to validate the changes.","tip":"Combine the MCP Server with Claude’s code execution to automate diagram updates. For instance, run a script to fetch real-time system metrics and inject them into the Mermaid syntax."}]