Diagrammo and AI
DGMO is plain text — AI can read and write it natively. The MCP server gives AI tools to render, share, and preview diagrams without leaving the session.
Quickstart — Claude Code
Three commands to go from zero to AI-generated diagrams.
Install the CLI
brew install diagrammo/dgmo/dgmoSet up the integration
dgmo --install-claude-code-integrationThis installs the MCP server, writes the /dgmo slash command, and configures everything. Restart Claude Code after running.
Use it
Type /dgmo in Claude Code followed by what you want:
You: /dgmo show me a sequence diagram of how OAuth2 works
Claude: I'll create that for you.
calls get_language_reference("sequence") → writes DGMO markup → calls preview_diagram
Claude: Here's the OAuth2 authorization code flow — I've opened a preview in your browser. Want me to create a shareable link or render it as a PNG?
Works for any of the 32 chart types — sequence diagrams, flowcharts, ER diagrams, org charts, infrastructure diagrams, and more.
MCP Server
@diagrammo/dgmo-mcp
The MCP server gives AI assistants seven dedicated tools for diagramming. Instead of generating an image from scratch, the AI writes DGMO markup and calls these tools to render, preview, or share it. The install commands for each AI tool below handle the MCP setup automatically.
preview_diagram Renders diagram(s) and opens a live HTML preview in the browser render_diagram Renders to PNG or SVG, returns the file path share_diagram Creates a shareable diagrammo.app URL open_in_app Opens the diagram in the Diagrammo desktop app (macOS) list_chart_types Lists all 32 supported chart types with descriptions get_language_reference Fetches full syntax for any chart type on demand generate_report Renders multiple diagrams into an HTML report with table of contents
Or install the MCP server directly:
npm install -g @diagrammo/dgmo-mcp
Set up your AI tool
Each integration ships a context file that teaches your AI the DGMO syntax — chart types, patterns, and what to avoid.
Claude Code
Claude Code
One command installs the MCP server, writes the /dgmo slash command to ~/.claude/commands/, and configures the MCP server in your project or globally. Claude can then create, render, and share diagrams without leaving the session.
dgmo --install-claude-code-integration
Setup guide →
Best for: Diagramming while coding — sequence flows, ERDs, infra diagrams
Codex CLI
OpenAI Codex CLI
One command installs the MCP server, configures .codex/config.toml (project) or ~/.codex/config.toml (global), and writes AGENTS.md to your project root. Codex reads AGENTS.md for syntax context and uses the MCP tools to render diagrams.
dgmo --install-codex-integration
Setup guide →
Best for: Autonomous coding sessions with diagram generation
Editor
Cursor
Copy .cursorrules into your project root. Cursor reads it automatically and gains full DGMO syntax context — all 32 chart types, common patterns, and anti-patterns to avoid. No restart needed.
cp node_modules/@diagrammo/dgmo/.cursorrules .
Setup guide →
Best for: In-editor diagram authoring with AI suggestions
Editor
Windsurf
Copy .windsurfrules into your project root. Windsurf's Cascade agent reads it and understands DGMO syntax, chart types, and rendering options. Combine with the MCP server for full rendering support.
cp node_modules/@diagrammo/dgmo/.windsurfrules .
Setup guide →
Best for: Agentic coding with diagram generation in Cascade
GitHub
GitHub Copilot
Copy copilot-instructions.md into your .github/ folder. Copilot reads it as repository-level instructions and gains DGMO syntax context. Works in VS Code, JetBrains, and any other Copilot surface.
mkdir -p .github && cp node_modules/@diagrammo/dgmo/.github/copilot-instructions.md .github/
Setup guide →
Best for: Diagram generation in pull requests and code reviews
How it works
Two layers work together: a context file teaches the AI the DGMO language, and the MCP server gives it rendering tools.
Layer 1 — Context file
A plain-text file (.cursorrules, AGENTS.md, etc.) gives the AI the DGMO syntax reference, all 32 chart types, and common patterns to use and avoid. The AI reads this at session start.
Supported in: Claude Code, Codex CLI, Cursor, Windsurf, Copilot
Layer 2 — MCP server
The MCP server exposes seven tools the AI can call to render, preview, and share diagrams. Instead of describing an image in words, the AI writes markup and renders it directly into the session.
Supported in: Claude Code, Codex CLI, and any MCP-compatible client
Example: asking Claude Code to draw a flow
You: Draw the OAuth2 authorization code flow as a sequence diagram
Claude: [calls get_language_reference("sequence"), writes markup, calls preview_diagram]
Claude: Here's the flow — I've opened a preview in your browser. Want a shareable link?