Diagrammo (dgmo)

by diagrammo

328 downloads

Not rated

GitHub

Other
AI

About

MCP server for rendering DGMO diagrams. Generate sequence diagrams, flowcharts, ER diagrams, C4 architecture, gantt charts, kanban, sitemaps, mind maps, and 30+ other chart types from concise text markup.

Details

Author: diagrammo
Downloads: 328
Categories: Other, AI

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Diagrammo (dgmo)

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Install by adding the dgmo entry to your Claude Desktop or Claude Code configuration using npx -y @diagrammo/dgmo-mcp. After restarting the client, the tools appear automatically. Use tools like render_diagram, share_diagram, open_in_app, list_chart_types, get_language_reference, preview_diagram, and generate_report.

`render_diagram`

Render DGMO markup to SVG or PNG. Returns SVG text or base64 PNG image. When format is "png", also saves the image to a temp file and returns the path. For DGMO syntax call get_language_reference (e.g. color a label with a trailing color name: "Sales red").

`share_diagram`

Generate a shareable diagrammo.app URL for a DGMO diagram.

`open_in_app`

Open a DGMO diagram in the Diagrammo desktop app (macOS only). Falls back to browser preview if the app is not installed. Pass `filePath` to open a saved .dgmo file directly — the app opens THAT file, so in-app edits autosave back to it (one editable source of truth, live re-render). This is the preferred path when the app is installed: write the .dgmo source first, then open it here. Omit `filePath` for an ephemeral diagram (sends a deep link; the app creates its own copy).

`check_app_installed`

Check whether the Diagrammo desktop app is installed (macOS). Call this ONCE before choosing how to show a diagram. If installed, the preferred output is to save the .dgmo source and open that file live in the app (open_in_app with filePath) — do NOT default to an online share URL. If not installed, fall back to the online share URL.

`list_chart_types`

List all supported DGMO chart types with descriptions.

`get_language_reference`

Get the DGMO language reference documentation. Optionally filter by chart type.

`preview_diagram`

Render one or more DGMO diagrams and open an HTML preview in the browser. Supports theme toggle and optional source display. For DGMO syntax call get_language_reference (e.g. color a label with a trailing color name: "Sales red").

`generate_report`

Generate a polished HTML report with multiple DGMO diagrams, table of contents, and optional source blocks. Opens in browser by default. For DGMO syntax call get_language_reference (e.g. color a label with a trailing color name: "Sales red").

`validate_diagram`

Validate DGMO markup without rendering. Returns structured parse errors and warnings. Much faster than render_diagram — use this to check syntax before rendering.

`suggest_chart_type`

Suggest the best DGMO chart type for a user's plain-English diagram request. ALWAYS CALL THIS FIRST when creating a new diagram — it prevents guessing and is the authoritative selection mechanism. Returns one of two shapes: (1) a confident pick (high/medium) with the top match's syntax, or (2) an '⚠️ ASK THE USER' directive when the choice is ambiguous or nothing matched. On an ASK-THE-USER directive, do NOT pick a type yourself — present the listed candidates to the user and wait for their choice before generating.

`get_examples`

Get example DGMO diagrams for a chart type. Returns real-world examples from the gallery that demonstrate syntax patterns. Use these as few-shot references when generating new diagrams.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

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

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: ``

json
  {
    "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

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

render_diagram

share_diagram

open_in_app

check_app_installed

list_chart_types

get_language_reference

preview_diagram

generate_report

validate_diagram

suggest_chart_type

get_examples

Claude Desktop / Cursor

McpServers

What it does

Install

More like this

Sequential Thinking

Filesystem

EverArt

Google Drive

Context 7

Reactive Resume

`render_diagram`

`share_diagram`

`open_in_app`

`check_app_installed`

`list_chart_types`

`get_language_reference`

`preview_diagram`

`generate_report`

`validate_diagram`

`suggest_chart_type`

`get_examples`