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).

How to create a diagram

Generate draw.io XML in mxGraphModel format for the requested diagram
Write the XML to a
```
.drawio
```
file in the current working directory using the Write tool
If the user requested an export format (png, svg, pdf), export using the draw.io CLI with
```
--embed-diagram
```
, then delete the source
```
.drawio
```
file
Open the result — the exported file if exported, or the
```
.drawio
```
file otherwise

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

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.

draw.io CLI

The draw.io desktop app includes a command-line interface for exporting.

Locating the CLI

Try

drawio

first (works if on PATH), then fall back to the platform-specific path:

macOS:

/Applications/draw.io.app/Contents/MacOS/draw.io

Linux:
```
drawio
```
(typically on PATH via snap/apt/flatpak)
Windows:
```
"C:\Program Files\draw.io\draw.io.exe"
```

Use

which drawio

(or

where drawio

on Windows) to check if it's on PATH before falling back.

Export command

bash

drawio -x -f <format> -e -b 10 -o <output> <input.drawio>

Key flags:

```
-x
```
/
```
--export
```
: export mode
```
-f
```
/
```
--format
```
: output format (png, svg, pdf, jpg)
```
-e
```
/
```
--embed-diagram
```
: embed diagram XML in the output (PNG, SVG, PDF only)
```
-o
```
/
```
--output
```
: output file path
```
-b
```
/
```
--border
```
: border width around diagram (default: 0)
```
-t
```
/
```
--transparent
```
: transparent background (PNG only)
```
-s
```
/
```
--scale
```
: scale the diagram size
```
--width
```
/
```
--height
```
: fit into specified dimensions (preserves aspect ratio)
```
-a
```
/
```
--all-pages
```
: export all pages (PDF only)
```
-p
```
/
```
--page-index
```
: select a specific page (1-based)

Opening the result

macOS:
```
open <file>
```
Linux:
```
xdg-open <file>
```
Windows:
```
start <file>
```

File naming

Use a descriptive filename based on the diagram content (e.g.,
```
login-flow
```
,
```
database-schema
```
)
Use lowercase with hyphens for multi-word names
For export, use double extensions:
```
name.drawio.png
```
,
```
name.drawio.svg
```
,
```
name.drawio.pdf
```
— this signals the file contains embedded diagram XML
After a successful export, delete the intermediate
```
.drawio
```
file — the exported file contains the full diagram

XML format

.drawio

file is native mxGraphModel XML. Always generate XML directly — Mermaid and CSV formats require server-side conversion and cannot be saved as native files.

Basic structure

Every diagram must have this structure:

xml

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Diagram cells go here with parent="1" -->
  </root>
</mxGraphModel>

Cell
```
id="0"
```
is the root layer
Cell
```
id="1"
```
is the default parent layer
All diagram elements use
```
parent="1"
```
unless using multiple layers

Common styles

Rounded rectangle:

xml

<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Diamond (decision):

xml

<mxCell id="3" value="Condition?" style="rhombus;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="200" width="120" height="80" as="geometry"/>
</mxCell>

Arrow (edge):

xml

<mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Labeled arrow:

xml

<mxCell id="5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="3" target="6" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Useful style properties

Property	Values	Use for
`rounded=1`	0 or 1	Rounded corners
`whiteSpace=wrap`	wrap	Text wrapping
`fillColor=#dae8fc`	Hex color	Background color
`strokeColor=#6c8ebf`	Hex color	Border color
`fontColor=#333333`	Hex color	Text color
`shape=cylinder3`	shape name	Database cylinders
`shape=mxgraph.flowchart.document`	shape name	Document shapes
`ellipse`	style keyword	Circles/ovals
`rhombus`	style keyword	Diamonds
`edgeStyle=orthogonalEdgeStyle`	style keyword	Right-angle connectors
`edgeStyle=elbowEdgeStyle`	style keyword	Elbow connectors
`dashed=1`	0 or 1	Dashed lines
`swimlane`	style keyword	Swimlane containers

CRITICAL: XML well-formedness

NEVER use double hyphens (
--
) inside XML comments.
```
--
```
is illegal inside
```

```
per the XML spec and causes parse errors. Use single hyphens or rephrase.
Escape special characters in attribute values:
```
&amp;
```
,
```
&lt;
```
,
```
&gt;
```
,
```
&quot;
```
Always use unique
```
id
```
values for each
```
mxCell
```

drawio

NPX Install

Tags

SKILL.md Content