Drawio
Generate native draw.io diagrams and optional PNG, SVG, PDF, or editor URLs when you need architecture, flow, or wireframe artifacts without leaving your agent.
Overview
Draw.io is an agent skill most often used in Build (also Validate, Ship) that generates editable draw.io diagrams and optional PNG, SVG, PDF, or browser URLs from conversational specs.
Install
npx skills add https://github.com/jgraph/drawio-mcp --skill drawioWhat is this skill?
- Writes mxGraphModel XML to `.drawio` files in the working directory
- Exports PNG, SVG, or PDF with `--embed-diagram` when draw.io CLI is available
- `url` mode opens the diagram in the browser while keeping a local `.drawio` copy
- Covers flowcharts, architecture, ER, sequence, class, network diagrams, mockups, and wireframes
- Falls back to editable `.drawio` only when CLI export is missing
- Outputs native `.drawio` mxGraphModel XML
- Supports PNG, SVG, PDF, and browser URL output modes
Adoption & trust: 1.6k installs on skills.sh; 4.3k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a proper diagram or wireframe fast but do not want to rebuild the same layout by hand in draw.io every time your agent iterates.
Who is it for?
Solo builders documenting architecture, APIs, or flows while pair-programming with an agent.
Skip if: Teams that mandate a non-draw.io diagram standard with no `.drawio` workflow, or requests that only need a one-line sketch with no file deliverable.
When should I use this skill?
User asks to create, generate, draw, or design a diagram, flowchart, architecture, ER, sequence, class, or network diagram, mockup, wireframe, or mentions draw.io, drawio, or diagram export to PNG/SVG/PDF.
What do I get? / Deliverables
You get a `.drawio` file (and export or URL when requested) you can open, edit, and attach to specs, PRs, or launch assets.
- .drawio file
- Optional PNG/SVG/PDF with embedded diagram XML
- Optional draw.io editor URL
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Technical diagrams and architecture visuals most often land in product and engineering documentation during the build phase. Docs is the canonical shelf because flowcharts, ER diagrams, and system maps are primarily shipped as persistent project documentation.
Where it fits
Sketch a landing-page wireframe as `.drawio` before you commit to frontend layout.
Produce a service architecture diagram for the README or internal wiki.
Draw a sequence diagram for a third-party webhook flow.
Attach an updated network diagram to a security or design review thread.
How it compares
Use instead of asking the model for static image-only diagrams that cannot be reopened in draw.io.
Common Questions / FAQ
Who is drawio for?
Indie developers and small teams who ship with AI coding agents and want editable draw.io artifacts for docs, design, or launch collateral.
When should I use drawio?
During build when writing system or API docs, during validate when sketching wireframes or prototypes, or before ship when you need a diagram for a review or README.
Is drawio safe to install?
Review the Security Audits panel on this Prism page and limit filesystem and shell access to trusted repos; export uses optional local draw.io CLI commands.
SKILL.md
READMESKILL.md - Drawio
# Draw.io Diagram Skill Generate draw.io diagrams as native `.drawio` files. Optionally export to PNG, SVG, or PDF with the diagram XML embedded (so the exported file remains editable in draw.io), or generate a browser URL that opens the diagram directly in the draw.io editor. ## How to create a diagram 1. **Generate draw.io XML** in mxGraphModel format for the requested diagram 2. **Write the XML** to a `.drawio` file in the current working directory using the Write tool 3. **Handle the requested output format**: - `png` / `svg` / `pdf` → locate the draw.io CLI (see [draw.io CLI](#drawio-cli)), export with `--embed-diagram`, then delete the source `.drawio` file. If the CLI is not found, keep the `.drawio` file and tell the user they can install the draw.io desktop app to enable export, or use `url` mode instead, or open the `.drawio` file directly - `url` → generate a browser URL from the XML and open it (see [Browser URL output](#browser-url-output)). Keep the `.drawio` file as a persistent local copy - *(no format)* → no extra step; the `.drawio` file is the output 4. **Open the result** — the exported file if exported, the browser URL if `url`, or the `.drawio` file otherwise. If the open command fails, print the file path (or URL) so the user can open it manually ## Choosing the output format Check the user's request for a format preference. Examples: - `/drawio create a flowchart` → `flowchart.drawio` - `/drawio png flowchart for login` → `login-flow.drawio.png` - `/drawio svg: ER diagram` → `er-diagram.drawio.svg` - `/drawio pdf architecture overview` → `architecture-overview.drawio.pdf` - `/drawio url flowchart for user login` → opens browser at `app.diagrams.net` with the diagram, keeps `login-flow.drawio` locally If no format is mentioned, just write the `.drawio` file and open it in draw.io. The user can always ask to export later. ### Supported export formats | Format | Embed XML | Notes | |--------|-----------|-------| | `png` | Yes (`-e`) | Viewable everywhere, editable in draw.io | | `svg` | Yes (`-e`) | Scalable, editable in draw.io | | `pdf` | Yes (`-e`) | Printable, editable in draw.io | | `jpg` | No | Lossy, no embedded XML support | PNG, SVG, and PDF all support `--embed-diagram` — the exported file contains the full diagram XML, so opening it in draw.io recovers the editable diagram. ## Browser URL output When the user requests `url` format, generate a draw.io URL that opens the diagram directly in the browser editor at `app.diagrams.net` — no draw.io Desktop required. ### How it works 1. The `.drawio` file is written to disk as usual (gives the user a persistent local copy they can re-edit) 2. The XML is compressed with Node.js's built-in `zlib` and base64-encoded 3. The result is embedded in a `https://app.diagrams.net/#create=...` URL 4. The URL is opened in the default browser This uses only Node.js built-in modules (`zlib`, `child_process`) — no external dependencies. ### URL generation Run this `node -e` one-liner to read the `.drawio` file and print the URL (replace `DIAGRAM.drawio` with the actual filename): ```bash URL=$(node -e ' const fs = require("fs"); const zlib = require("zlib"); const xml = fs.readFileSync(process.argv[1], "utf8"); const compressed = zlib.deflateRawSync(encodeURIComponent(xml)).toString("base64"); const payload = encodeURIComponent(JSON.stringify({ type: "xml", compressed: true, data: compressed })); console.log("https://app.diagrams.net/?grid=0&pv=0&border=10&edit=_blank#create=" + payload); ' DIAGRAM.drawio) ``` The URL format matches the MCP Tool Server. Node.js's `zlib.deflateRawSync` and `pako.deflateRaw` both implement RFC