Get Mermaid diagram syntax, types, and examples via mermaid-mcp-server (npx)
How can an agent look up Mermaid diagram syntax, supported diagram types, and working examples — as structured MCP tool calls rather than web searches?
Recipe: Query Mermaid syntax docs and examples via mermaid-mcp-server
Server: mermaid-mcp-server v1.0.8 (npm) Launch: npx -y mermaid-mcp-server (stdio, NDJSON framing) Auth: none Dependencies: none (bundles Mermaid docs)
Important: this is a reference server, NOT a renderer
This server provides structured Mermaid documentation — diagram types, syntax rules, and annotated examples. It does NOT render diagrams to images. Use it as a context source when writing Mermaid code (similar to how Context7 serves library docs).
Tool inventory (4 tools)
| Tool | Params | Description |
|---|---|---|
readme | (none) | What is Mermaid — about text |
list_diagrams | (none) | JSON array of all supported diagram types with descriptions |
get_diagram | diagramType | Metadata for one diagram type |
get_diagram_examples | diagramType | Full syntax documentation with annotated code examples |
Supported diagram types
flowchart, sequenceDiagram, classDiagram, stateDiagram, entityRelationshipDiagram, userJourney, gantt, and more (13+ types from the Mermaid docs corpus).
Verified trace
list_diagrams — returns all diagram types as structured JSON, 1ms:
→ tools/call list_diagrams {}
← 1ms [
{ type: "flowchart", name: "Flowchart", description: "..." },
{ type: "sequenceDiagram", name: "Sequence Diagram", description: "..." },
{ type: "classDiagram", name: "Class Diagram", description: "..." },
{ type: "stateDiagram", name: "State Diagram", description: "..." },
{ type: "entityRelationshipDiagram", name: "Entity Relationship Diagram", description: "..." },
{ type: "userJourney", name: "User Journey", description: "..." },
...
]get_diagram_examples: flowchart — returns full Markdown documentation with annotated mermaid-example code blocks:
→ tools/call get_diagram_examples { diagramType: "flowchart" }
← 2ms "# Flowcharts - Basic Syntax\n\nFlowcharts are composed of **nodes**
(geometric shapes) and **edges** (arrows or lines)...\n\n### A node (default)
\n\n```mermaid-example\nflowchart LR\n id\n```\n\n### A node with text..."
(full Mermaid flowchart docs, ~15KB)Use case
When an agent needs to write Mermaid syntax (e.g., for documentation generation, PR descriptions, architecture diagrams), it can query this server for correct syntax and examples rather than relying on training data or web searches. Fast (1–2ms), offline-capable, always up-to-date with the bundled Mermaid version.
{ "server": "mermaid-mcp-server", "version": "1.0.8", "package": "npm:mermaid-mcp-server", "transport": "stdio", "framing": "ndjson", "launch": "npx -y mermaid-mcp-server", "tools": ["readme", "list_diagrams", "get_diagram", "get_diagram_examples"], "trace": [ { "tool": "list_diagrams", "args": {}, "result_summary": "JSON array of 13+ diagram types with name, type, and description fields", "latency_ms": 1 }, { "tool": "get_diagram_examples", "args": { "diagramType": "flowchart" }, "result_summary": "Full Markdown documentation (~15KB) with annotated mermaid-example code blocks covering nodes, edges, subgraphs, styling, and interactions", "latency_ms": 2 }, { "tool": "get_diagram", "args": { "diagramType": "flowchart" }, "result_summary": "Single JSON object: {type, name, example path, description}", "latency_ms": 1 } ] }