Generate Draw.io architecture diagrams, Mermaid diagrams, and Excalidraw sketches from structured specifications using the mcp-diagram-generator MCP server.
---
name: diagram-generator
description: Generate Draw.io architecture diagrams, Mermaid diagrams, and Excalidraw sketches from structured specifications using the mcp-diagram-generator MCP server.
---
# Diagram Generator
Generate Draw.io architecture diagrams, Mermaid flowcharts/sequence/class/ER diagrams, and Excalidraw whiteboard sketches from structured JSON specifications using the `mcp-diagram-generator` MCP server.
---
## MCP Server Setup
Add one of the following configurations to your system settings (e.g., `mcp_config.json` or IDE configurations):
### Option A: Using NPM Remote Package (Recommended)
```json
{
"mcpServers": {
"diagram-generator": {
"command": "npx",
"args": ["-y", "mcp-diagram-generator"]
}
}
}
```
### Option B: Using Local Path
```json
{
"mcpServers": {
"diagram-generator": {
"command": "node",
"args": ["/your/path/to/mcp-diagram-generator/dist/index.js"]
}
}
}
```
---
## Core Workflow
1. **Select Format**: Choose the best target format among `drawio`, `mermaid`, and `excalidraw` based on your needs.
2. **Define Layout**: Specify `geometry` coordinates for precise placement (Note: coordinates for child elements inside containers must be relative to the top-left of their direct parent container). For automatic layout, set coordinates to `0` or omit them to trigger the generator's grid layout.
3. **Generate**: Call `generate_diagram` to render and save the file.
---
## Reference Guide (Read on-demand 🌟)
To ensure rendering quality, **you must read the following guides on-demand using `view_file`** before generating diagrams:
* 📘 **Format Selection Matrix** ➡️ [format-selection-guide.md](references/format-selection-guide.md)
* Helps decide when to use Draw.io, Mermaid, or Excalidraw.
* 📘 **JSON Protocol & Schema Guide** ➡️ [json-schema-guide.md](references/json-schema-guide.md)
* Contains the complete JSON schema and parameter templates for Mermaid flowcharts and sequence diagrams.
* 📘 **Network Topology & Auto-Layout Specs** ➡️ [topology-and-layout-spec.md](references/topology-and-layout-spec.md)
* **For Network Diagrams**: Contains the 4-level nesting hierarchy (Environment ➡️ Datacenter ➡️ Zone ➡️ Device) and device color definitions.
* **For Grid Layouts**: Contains Agent-specific mathematical layout formulas.
* 📘 **Network Topology Templates** ➡️ [network-topology-examples.md](references/network-topology-examples.md)
* Provides complete JSON templates for nested network topologies.
* 📘 **Troubleshooting & Setup** ➡️ [setup-and-troubleshooting.md](references/setup-and-troubleshooting.md)
* Read this file to troubleshoot errors such as `Schema Validation Error`, `Directory Not Found`, or `Wrong File Extension`.
---
## Best Practices
1. **Use Configuration Management**: Initialize paths with `init_config()` so you do not need to specify `output_path` in `generate_diagram`.
2. **Follow Naming & ID Standards**: Use descriptive prefixes (e.g., `env-`, `dc-`, `router-`) and ensure all element IDs are unique.
3. **Bind Edges to Parent Container**: For Draw.io diagrams, set the parent of an Edge to the shared Container ID when both source and target are inside that container, ensuring links move together with the container.
don't have the plugin yet? install it then click "run inline in claude" again.