drawio-mcp is an official Model Context Protocol server that lets AI assistants create and open editable diagrams in the draw.io editor. It supports diagram workflows ranging from inline chat previews to browser editing and generated draw.io, PNG, SVG, or PDF files. The catalogue entries provide its MCP servers, assistant integrations, project instructions, and skill.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/jgraph/drawio-mcp/drawionpx skills add jgraph/drawio-mcp --skill drawiogit clone --depth 1 https://github.com/jgraph/drawio-mcpWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/jgraph/drawio-mcp/drawio)<a href="https://agentmods.dev/skills/jgraph/drawio-mcp/drawio"><img src="https://agentmods.dev/badge/skills/jgraph/drawio-mcp/drawio.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00075 | $0.05246 |
| Opus 5 | $0.00037 | $0.02623 |
| Sonnet 5 | $0.00015 | $0.01049 |
| Haiku 4.5 | $0.00007 | $0.00525 |
Grade A, and why
drawio scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Runs shell commandslowCapability
Expected in a hook, worth knowing in a rule or an instructions file.
This uses only Node.js built-in modules (`zlib`, `child_process`) — no external dependencies. How it starts
The opening of the file, as written. The whole thing — 390 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Draw.io Diagram Skill
Generate draw.io diagrams as native .drawio files. Author each diagram either as Mermaid (concise text that the draw.io desktop CLI converts and lays out for you) or as draw.io XML directly. Optionally auto-layout XML-authored diagrams with ELK, export to PNG/SVG/PDF with the diagram XML embedded (so the exported file stays editable in draw.io), or generate a browser URL that opens the diagram directly in the draw.io editor.
Authoring: Mermaid or XML?
The desktop CLI can convert Mermaid to a native .drawio file, so prefer Mermaid for the diagram types it handles well — its parser lays the diagram out automatically, which is far more reliable than hand-positioning cells in XML.
| Author as | Best for | Needs desktop CLI? |
|---|---|---|
| Mermaid | Flowcharts, sequence, class, state, ER, gantt, mindmap, timeline, user journey, quadrant, C4, git graph, pie, and other standard types | Yes — to convert to .drawio |
| XML | Custom styling, precise/hand positioning, specific shape libraries (AWS, Azure, network, UML detail…), or when the desktop CLI is not installed | No (optional ELK --layout needs the CLI) |
- Prefer Mermaid when the desktop CLI is available and the request is one of the standard types above — write terse Mermaid and let draw.io lay it out.
- Use XML for precise control, or as the universal fallback: XML needs no CLI at all, so it's the only option when the desktop app isn't installed (output a
.drawiofile or aurl). - For XML-authored diagrams you can ask the CLI to apply an ELK auto-layout (
--layout) instead of computing coordinates yourself — the same layouts the draw.io editor's Arrange ▸ Layout menu applies, and the same engine the draw.io MCP app server uses. See ELK layout for XML.
If you're unsure whether the desktop CLI is present, detect it first (see Locating the CLI). No CLI → author as XML and deliver a .drawio file or a url.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 390 lines · 75 tokens per session scan A 4db0d9428e85
drawio is a skill published in the GitHub repository jgraph/drawio-mcp (5,332 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 75 tokens to every session and 5,246 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 1 finding (runs shell commands). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
hallmark
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
prototype-web
可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA.
desktop-principles
Desktop-specific UX principles - hover states, pointer precision, keyboard shortcuts, multi-window, focus management. Covers macOS, Windows, Linux, web desktop.
taiyi-ui-design
TaiyiForge 第 4 阶段 — UI/UX 契约，产出 UI-DESIGN.md。四端通用。.
drawio-diagram
Generate draw.io network diagrams — native .drawio files with CLI export (PNG/SVG/PDF), plus browser-based Mermaid/XML/CSV via MCP server. Use when creating network topology diagrams, generating architecture visuals, exporting diagrams to PNG or PDF, or building draw.io files from discovery data.