MCP server for AI agents

Give Claude and other AI tools the ability to create diagrams. Just describe what you want — the AI picks the right chart type and renders it.

View on npm GitHub

How it works

MCP (Model Context Protocol) lets AI assistants call tools on your machine. Install the Diagrammo MCP server, and your AI can render diagrams directly — no copy-pasting markup or running commands.

1. You ask

"Draw a sequence diagram of the login flow"

2. AI calls the tool

Claude generates DGMO markup and calls render_diagram

3. You see the result

SVG or PNG returned inline, or a full preview opened in your browser

Setup

Claude Code

Add to your project's .claude/settings.local.json:

json

// .claude/settings.local.json
{
  "mcpServers": {
    "dgmo": {
      "command": "npx",
      "args": ["-y", "@diagrammo/dgmo-mcp"]
    }
  }
}

Claude Desktop

Add to your Claude Desktop config:

json

// ~/Library/Application Support/Claude/claude_desktop_config.json
{
  "mcpServers": {
    "dgmo": {
      "command": "npx",
      "args": ["-y", "@diagrammo/dgmo-mcp"]
    }
  }
}

Restart Claude Desktop after saving. The tools appear automatically.

7 tools included

render_diagram Render DGMO markup to SVG or PNG

preview_diagram Open a browser preview with theme toggle

generate_report Build a multi-diagram HTML report with table of contents

share_diagram Generate a shareable diagrammo.app URL

open_in_app Open in the Diagrammo desktop app

list_chart_types List all 29 supported chart types

get_language_reference Get DGMO syntax documentation

Features

29 chart types

Bar, line, pie, sequence, flowchart, ER, org chart, Sankey, timeline, and more.

Browser preview

Open rendered diagrams in a styled HTML page with light/dark theme toggle.

HTML reports

Bundle multiple diagrams into a polished report with table of contents and print styles.

8 color palettes

Nord, Solarized, Catppuccin, Rose Pine, Gruvbox, Tokyo Night, One Dark, and Bold.