mirror of https://github.com/jgraph/drawio-mcp.git synced 2026-09-14 15:42:06 +08:00

Files

T

Gaudenz Alder 3366c8e7b3 feat: single source of truth for XML generation prompt

Move the draw.io XML generation reference to shared/xml-reference.md
and wire all four consumers to use it instead of duplicating the
content. Add layers, tags, and metadata/placeholders documentation.

- MCP app server: reads at startup (Node.js) or pre-builds into
  generated-html.js (Workers) via build-html.js
- MCP tool server: reads at startup with fallback to local copy;
  prepack script bundles the file before npm publish
- Skill: references the GitHub raw URL so it works after install
- Project instructions: tells users to copy from GitHub

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-02 18:59:19 +02:00

3.2 KiB

Raw Permalink Blame History

Draw.io Skill for Claude Code

A Claude Code skill that generates native .drawio files, with optional export to PNG, SVG, or PDF (with embedded XML so the exported file remains editable in draw.io). No MCP setup required.

How It Works

When you ask Claude Code to create a diagram, it will:

Generate draw.io XML for your requested diagram
Write it to a .drawio file in your current directory
If you requested an export format, export using the draw.io desktop CLI
Open the result

Prerequisites

Claude Code installed
draw.io Desktop installed (required for PNG/SVG/PDF export)

Installation

Copy drawio/SKILL.md to your Claude Code skills directory:

Global (all projects):

mkdir -p ~/.claude/skills/drawio
cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md

Per-project:

mkdir -p .claude/skills/drawio
cp drawio/SKILL.md .claude/skills/drawio/SKILL.md

Usage

/drawio create a flowchart for user login

By default, this writes a .drawio file and opens it in draw.io. To export to an image format, mention the format in your request:

/drawio png flowchart for user login       → login-flow.drawio.png
/drawio svg: ER diagram for e-commerce     → er-diagram.drawio.svg
/drawio pdf architecture overview          → architecture-overview.drawio.pdf

More examples:

/drawio sequence diagram for API auth
/drawio png class diagram for the models in src/

Export Formats

Format	Extension	Notes
(default)	`.drawio`	Native XML, editable in draw.io, no desktop CLI needed
`png`	`.drawio.png`	Viewable everywhere, embedded XML, editable in draw.io
`svg`	`.drawio.svg`	Scalable, embedded XML, editable in draw.io
`pdf`	`.drawio.pdf`	Printable, embedded XML, editable in draw.io

The .drawio.* double extension signals that the file contains embedded diagram XML. Open any of these in draw.io to recover and edit the full diagram. The intermediate .drawio source file is deleted after export since the exported file contains the complete diagram.

XML Reference

The skill references the shared XML generation guide (edge routing, containers, layers, tags, metadata, dark mode, etc.) from GitHub at runtime: shared/xml-reference.md

This is the single source of truth for all draw.io MCP prompts across the repository. No extra files need to be copied during installation.

Why XML Only?

A .drawio file is just mxGraphModel XML. Mermaid and CSV formats require draw.io's server-side conversion — they can't be saved as native files. Claude generates XML directly for all diagram types, which means:

No server dependency
No conversion step
Files are immediately editable in draw.io

Other Variants

This repository offers multiple ways to integrate draw.io with AI assistants:

MCP App Server — Inline diagrams in chat (Claude.ai, VS Code)
MCP Tool Server — Opens diagrams in browser via MCP (Claude Desktop)
Project Instructions — Claude.ai Projects, no install needed

3.2 KiB Raw Permalink Blame History