io.github.diagrammo/dgmo-mcp

编码与调试

by diagrammo

支持将29种图表与示意图渲染为SVG/PNG,并提供浏览器预览和HTML报告输出。

什么是 io.github.diagrammo/dgmo-mcp

支持将29种图表与示意图渲染为SVG/PNG,并提供浏览器预览和HTML报告输出。

README

@diagrammo/dgmo-mcp

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

npm version npm downloads license

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:

code
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

ToolWhat it doesOver HTTP
render_diagramRender DGMO markup to SVG or PNGyes
validate_diagramCheck markup and report parse errors, without renderingyes
suggest_chart_typeSuggest the chart types that fit a descriptionyes
list_chart_typesList all supported chart types, marking the beta onesyes
get_language_referenceGet DGMO syntax documentation for accurate generationyes
get_examplesFetch worked examples for a chart typeyes
share_diagramGet a shareable diagrammo.app URL — hand your diagram to the web editoryes
open_in_appOpen the diagram straight into the Diagrammo desktop app for editingno
check_app_installedReport whether the desktop app is installedno
preview_diagramRender one or more diagrams and open an HTML preview in the browserno
generate_reportBuild a polished multi-section HTML report with ToC and optional sourceno

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

The four marked no open a browser or launch the desktop app. Over HTTP that would happen on the machine running the server rather than on yours, so they are not offered there — see Serving over HTTP.

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.
  • CLInpx @diagrammo/dgmo-cli 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:

bash
npm install -g @diagrammo/dgmo-cli   # 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:

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.

Serving over HTTP

The setups above launch the server as a child process and talk to it over its standard input and output. That needs the server and the client on the same machine. Where they are not — a hosted agent platform, a container, one server shared by several people — start it as an HTTP endpoint instead:

bash
npx -y @diagrammo/dgmo-mcp --http            # http://127.0.0.1:3333/mcp
MCP_TRANSPORT=http MCP_PORT=8080 npx -y @diagrammo/dgmo-mcp

Every option takes a flag or an environment variable, whichever your setup can express:

FlagVariableDefaultWhat
--httpMCP_TRANSPORT=httpoffServe streamable HTTP instead of stdio
--port <n>MCP_PORT3333Port to listen on
--host <addr>MCP_HOST127.0.0.1Interface to bind
--path <path>MCP_PATH/mcpPath the endpoint answers on
--allow-host <h>MCP_ALLOWED_HOSTSloopbackExtra Host headers to accept, repeatable
--allow-origin <o>MCP_ALLOWED_ORIGINSunsetOrigin headers to accept, repeatable

Each request is served independently — no sessions, nothing kept between calls — so one endpoint can serve several clients at once.

The server has no authentication of its own. It binds loopback by default and rejects requests carrying a Host header it was not told to expect, which is enough for a client on the same machine or inside the same container. Anything reachable from a wider network needs your own authentication in front of it, and --allow-host for the hostname it will be reached by. Binding a non-loopback interface without naming a host prints a warning saying so.

--help prints all of this from the installed version.

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)

bash
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

常见问题

io.github.diagrammo/dgmo-mcp 是什么?

支持将29种图表与示意图渲染为SVG/PNG,并提供浏览器预览和HTML报告输出。

相关 Skills

前端设计

by anthropics

Universal
热门

面向组件、页面、海报和 Web 应用开发,按鲜明视觉方向生成可直接落地的前端代码与高质感 UI,适合做 landing page、Dashboard 或美化现有界面,避开千篇一律的 AI 审美。

想把页面做得既能上线又有设计感,就用前端设计:组件到整站都能产出,难得的是能避开千篇一律的 AI 味。

编码与调试
未扫描171.4k

网页应用测试

by anthropics

Universal
热门

用 Playwright 为本地 Web 应用编写自动化测试,支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志,适合调试动态页面和回归验证。

借助 Playwright 一站式验证本地 Web 应用前端功能,调 UI 时还能同步查看日志和截图,定位问题更快。

编码与调试
未扫描171.4k

网页构建器

by anthropics

Universal
热门

面向复杂 claude.ai HTML artifact 开发,快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML,适合需要状态管理、路由或多组件交互的页面。

在 claude.ai 里做复杂网页 Artifact 很省心,多组件、状态和路由都能顺手搭起来,React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。

编码与调试
未扫描171.4k

相关 MCP Server

GitHub

编辑精选

by GitHub

热门

GitHub 是 MCP 官方参考服务器,让 Claude 直接读写你的代码仓库和 Issues。

这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题,适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现,生产环境得自己加固安全。

编码与调试
89.7k

by Context7

热门

Context7 是实时拉取最新文档和代码示例的智能助手,让你告别过时资料。

它能解决开发者查找文档时信息滞后的问题,特别适合快速上手新库或跟进更新。不过,依赖外部源可能导致偶尔的数据延迟,建议结合官方文档使用。

编码与调试
60.2k

by tldraw

热门

tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。

这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过,目前它只是个基础连接器,你得自己搭建画布应用才能发挥全部潜力。

编码与调试
49.9k

评论