Diagrammo (dgmo)
What it does
Render 35+ diagram types — sequence, flowchart, ER, C4, gantt, kanban, mindmap, infrastructure, sitemap, journey map, tech
radar, and more — to SVG or PNG, all from concise text markup. Outputs render locally (no API key, no data leaves your
machine), can open in the local Diagrammo desktop app, and can produce shareable online.diagrammo.app URLs.
Tools
| Tool | What it does |
|---|---|
render_diagram | Render DGMO markup to SVG or PNG |
share_diagram | Generate a shareable diagrammo.app URL |
open_in_app | Open diagram in the Diagrammo desktop app (falls back to browser) |
list_chart_types | List all supported chart types |
get_language_reference | Fetch full DGMO syntax docs for the LLM |
preview_diagram | Render diagrams and open an HTML preview in the browser |
generate_report | Multi-section HTML report with TOC and optional source |
Why dgmo over Mermaid
- Beautiful defaults. 10 built-in palettes (Nord, Catppuccin, Dracula, Tokyo Night, Solarized, …) with light/dark themes.
- More diagram types. Beyond flowcharts: ER schemas, C4 architecture, gantt, kanban, infrastructure, mindmaps, tech radars, journey maps, sitemaps.
- Persistent share links. Every diagram gets a
online.diagrammo.app/?dgmo=…URL — open it, edit it, send it to a teammate. - No API key. Fully local rendering. Your diagrams never leave your machine.
Install (Claude Desktop)
Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
```json { "mcpServers": { "dgmo": { "command": "npx", "args": ["-y", "@diagrammo/dgmo-mcp"] } } } ```
Restart Claude Desktop. The tools appear automatically.
Install (Claude Code)
Add to .claude/settings.local.json in your project:
{
"mcpServers": {
"dgmo": {
"command": "npx",
"args": ["-y", "@diagrammo/dgmo-mcp"]
}
}
}
Try it
"Make a sequence diagram for an OAuth 2.0 authorization code flow and give me a share link."
"Render a C4 container diagram for a typical SaaS app — frontend, API, database, cache, queue."
"Build a 6-month gantt chart for shipping a mobile app."
Links
- Website: diagrammo.app
- Source: github.com/diagrammo/dgmo-mcp
- npm: @diagrammo/dgmo-mcp
- Desktop app: diagrammo.app/app
Server Config
{
"mcpServers": {
"dgmo": {
"command": "npx",
"args": [
"-y",
"@diagrammo/dgmo-mcp"
]
}
}
}