Using DGMO with AI: MCP, Claude Code, Cursor, and More

DGMO is a plain-text diagramming tool — you describe a diagram in a simple text format, and it renders it as a crisp SVG or PNG. That plain-text format turns out to be a perfect match for AI: describe what you want in English, and an AI assistant can write the DGMO code for you in seconds.

This post walks you through setting that up — from installation to what you can actually make.

Install DGMO

If you haven’t installed DGMO yet, the easiest way is Homebrew:

brew install diagrammo/dgmo/dgmo

Or with npm (works on any platform):

npm install -g @diagrammo/dgmo

Once installed, dgmo is available on the command line. You can render any .dgmo file to a PNG:

dgmo my-diagram.dgmo

Or open the browser playground at diagrammo.app/playground — no installation required.

Connect It to Your AI Assistant

The one-liner that sets everything up for Claude Code:

dgmo --install-claude-code-integration

This does three things:

1. Installs the @diagrammo/dgmo-mcp package (an MCP server that gives Claude diagramming tools)
2. Copies the /dgmo slash command to ~/.claude/commands/
3. Writes the MCP configuration (you pick project-scoped or global)

Restart Claude Code, and you’re done. Claude can now create and render diagrams without any extra steps on your end — you just ask in plain English.

What Can You Make?

Here are some things that work especially well with AI:

System and API flows — describe how requests move through your backend and get a sequence diagram back. Great for onboarding docs, design reviews, or just thinking through a flow.

sequence OAuth2 Authorization Code Flow

Browser -GET /authorize-> AuthServer
AuthServer -Login prompt-> Browser
Browser -POST credentials-> AuthServer
AuthServer -302 + code-> Browser
Browser -POST /token (code)-> AuthServer
AuthServer -access_token + refresh_token-> Browser
Browser -GET /api/me (Bearer token)-> API
API -200 user profile-> Browser

Database schemas — paste your SQL CREATE statements or describe your tables and relationships. The AI can produce an ER diagram with all the foreign keys in place.

Infrastructure diagrams — describe your cloud setup: load balancers, services, databases, cache layers. The AI can model the topology and even annotate it with request rates and latency numbers.

infra API Traffic Flow

edge
  rps 5000
  -> CloudFront

CloudFront
  cache-hit 70%
  -> ALB

ALB
  -> [API Pods] | split: 80%
  -> [Worker Pods] | split: 20%

[API Pods]
  API
    instances 3
    max-rps 600
    latency-ms 40
    -> Cache
    -> DB

[Worker Pods]
  Worker
    instances 2
    max-rps 400
    latency-ms 200
    -> DB

Cache
  latency-ms 2

DB
  latency-ms 8

Org charts and team structures — give a list of names and reporting relationships, get a chart back. Useful for org design discussions or public-facing team pages.

Flowcharts and decision trees — describe a process or policy in prose, ask the AI to turn it into a flowchart. Good for runbooks, onboarding guides, and support docs.

Project roadmaps and timelines — list your milestones and the AI can produce a timeline or Gantt-style chart.

All 32 chart types are supported. You can ask Claude what’s available with list_chart_types, or browse them at diagrammo.app/docs.

The MCP Tools

When Claude has the MCP server running, it gets seven dedicated tools for diagramming:

• preview_diagram — renders a diagram and opens a live HTML preview in your browser. This is what Claude uses when you ask to “see” a diagram.
• render_diagram — renders to a PNG or SVG file
• 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 chart types
• get_language_reference — fetches the exact syntax reference for any chart type, mid-conversation
• generate_report — renders multiple diagrams into an HTML report with a table of contents

The get_language_reference tool matters more than it sounds: instead of relying on training data (which may be stale or incomplete), Claude can look up the exact syntax on the fly. That’s why AI-generated DGMO diagrams tend to be correct on the first try.

The /dgmo Slash Command

If you use Claude Code, the /dgmo command gives Claude full context about the DGMO language — all chart types, syntax, CLI flags, and common patterns. Type /dgmo at the start of a conversation to activate it.

The command is installed by --install-claude-code-integration. To install just the command without the MCP server:

dgmo --install-claude-skill

Cursor, Windsurf, and Copilot

Working in an editor other than Claude Code? DGMO ships context files for the most common AI editors. Copy the one for your editor into your project root:

# Cursor
cp node_modules/@diagrammo/dgmo/.cursorrules .

# Windsurf
cp node_modules/@diagrammo/dgmo/.windsurfrules .

# GitHub Copilot
mkdir -p .github && cp node_modules/@diagrammo/dgmo/.github/copilot-instructions.md .github/

If you installed DGMO globally instead of as a project dependency, use:

cp $(npm root -g)/@diagrammo/dgmo/.cursorrules .

Once the file is in your project, your AI assistant understands DGMO syntax automatically — no extra prompting needed.

OpenAI Codex CLI

Codex CLI reads AGENTS.md for project context — the same role that .cursorrules plays for Cursor. One command sets everything up:

dgmo --install-codex-integration

This checks for the dgmo-mcp package, writes the MCP config to .codex/config.toml (project) or ~/.codex/config.toml (global), and drops AGENTS.md in your project root. Codex will use the MCP tools and have full dgmo syntax context from the first session.

To copy AGENTS.md manually (if you prefer not to use the install script):

cp node_modules/@diagrammo/dgmo/AGENTS.md .

The config Codex needs in .codex/config.toml:

[mcp_servers.dgmo]
command = ["dgmo-mcp"]

Using DGMO in Scripts

The --json flag makes dgmo return machine-readable output, useful for scripting or when an AI agent needs to confirm the result:

# Render and get a JSON result
dgmo diagram.dgmo -o output.png --json
# → {"success": true, "output": "/path/to/output.png", "chartType": "sequence"}

# Generate a shareable URL
dgmo diagram.dgmo -o url
# → https://diagrammo.app/d/...

Try It Now

The fastest way to get going:

# Install the CLI
brew install diagrammo/dgmo/dgmo

# Set up Claude Code integration
dgmo --install-claude-code-integration

# Restart Claude Code, then try:
# "Draw the OAuth2 authorization code flow as a sequence diagram"

Or skip installation entirely and try the playground at diagrammo.app/playground.