dgmo-mcp

@diagrammo/dgmo-mcp

Turn a conversation into a real diagram — without leaving your AI tool.

  

This MCP server gives Claude (and any MCP-compatible AI tool) the ability to render sequence diagrams, flowcharts, ER diagrams, C4 architecture, gantt charts, and 40+ other chart types from concise text markup — then hand the result off to a full editor for refinement. Ask for a diagram in chat; get a real one back.

<table> <tr> <td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/sequence.png" alt="Sequence diagram" /></td> <td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/c4.png" alt="C4 architecture diagram" /></td> </tr> <tr> <td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/gantt.png" alt="Gantt chart" /></td> <td width="50%"><img src="https://raw.githubusercontent.com/diagrammo/dgmo-mcp/main/assets/flowchart.png" alt="Flowchart" /></td> </tr> </table>

What you can do

Ask in plain language — "diagram the auth flow as a sequence", "chart the Q3 plan as a gantt", "draw our services as a C4 diagram" — and Claude writes the markup and renders it. The markup stays readable and diffable:

flowchart Mutiny Resolution
direction-tb

[Sail]     Set sail under the captain
{Trouble?} Discontent in the crew?
{Vote}     Crew vote called
[Mutiny]   Seize the ship

(Sail) -> (Trouble?)
(Trouble?) -Yes-> (Vote)
(Vote) -Mutiny-> (Mutiny)

→ renders to the flowchart above. All rendering happens locally — no diagram data leaves your machine.

Tools

| Tool | What it does | | --- | --- | | render_diagram | Render DGMO markup to SVG or PNG | | preview_diagram | Render one or more diagrams and open an HTML preview in the browser | | generate_report | Build a polished multi-section HTML report with ToC and optional source | | list_chart_types | List all supported chart types | | get_language_reference | Get DGMO syntax documentation for accurate generation | | share_diagram | Get a shareable diagrammo.app URL — hand your diagram to the web editor | | open_in_app | Open the diagram straight into the Diagrammo desktop app for editing |

The last two are the bridge out of chat: a diagram Claude generates becomes something you can refine, restyle, and embed — see below.

Beyond the MCP server

The MCP server is one entry point into Diagrammo — a whole ecosystem built on the same DGMO markup. Generate in chat, refine in a real editor, embed anywhere:

• diagrammo.app — the desktop app. open_in_app drops an

AI-generated diagram straight into it, with live preview, palettes, and export.

• online.diagrammo.app — a full editor in the

browser, zero install. share_diagram URLs open right here.

• Docs integrations — drop DGMO fenced code blocks into your docs site:

remark-dgmo, astro-dgmo, docusaurus-plugin-dgmo, fumadocs-dgmo.

• Obsidian — the Diagrammo Diagrams community plugin renders DGMO in your vault.
• CLI — npx @diagrammo/dgmo file.dgmo -o out.png, or install via Homebrew.

One markup, everywhere. A diagram you generate here renders identically in the app, in your docs, and in Obsidian — because they all speak DGMO.

→ Try it free at diagrammo.app

Setup

Easiest — one command

Install the dgmo CLI and let it wire everything up:

npm install -g @diagrammo/dgmo   # or: brew install diagrammo/dgmo/dgmo
dgmo install                     # auto-detects Claude Code, Codex, Claude Desktop, Cursor, …

dgmo install configures each detected assistant non-interactively and points it at dgmo mcp, so there's no separate package to install or prompts to answer. Target one surface with dgmo install claude-code (or codex, claude-desktop, …).

Manual configuration

Prefer to edit configs yourself? Point any MCP client at the server via npx (no global install needed):

Claude Code — .claude/settings.local.json; Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "dgmo": {
      "command": "npx",
      "args": ["-y", "@diagrammo/dgmo-mcp"]
    }
  }
}

If you have the dgmo CLI installed, { "command": "dgmo", "args": ["mcp"] } works too. Restart the client after saving — the tools appear automatically.

Privacy

All rendering is local. Your diagram markup and the images it produces never leave your machine, except when you explicitly call share_diagram (which encodes the diagram into a diagrammo.app URL). See the privacy terms.

Dev hub (AI-tuning tools)

pnpm hub

One command, one server, one browser tab. The hub opens a tabbed shell over the three AI-tuning dev tools — switch between them with the top tabs, no separate ports or commands to remember:

• Trigger tuning — edit the phrase/concept vocabulary that drives

suggest_chart_type, score prompts live, save back to triggers.json.

• LLM judge — judge chart-type descriptions against prompts with claude -p.
• Guidance studio — author the per-type styling guidance the server

delivers (the <!-- TIPS --> blocks in dgmo's language-reference.md, sliced into get_language_reference): pick a type, edit how the AI is told to style it, run a prompt against a committed dataset fixture (so inputs never move between runs), and see the generated DGMO + rendered image side by side. The picker doubles as a coverage bar; "Compare 3×" renders no-guidance vs your tips for a by-eye check; Save validates and writes back to language-reference.md.

These tools are dev-only and never bundled into the published server. (The standalone pnpm harness and pnpm studio scripts still run a single tool each if you ever want one in isolation.)

Contributing & releases

Development setup and the release workflow live in CONTRIBUTING.md.

License

MIT