Draw.io Diagram Generation

Generate professional diagrams as clickable draw.io URLs using Python code execution.
The generated URL opens directly in the draw.io web editor at app.diagrams.net.

When to Use

Trigger this skill for ANY visual diagram request including but not limited to:

• Standard: Flowcharts, org charts, mind maps, timelines, Venn diagrams
• Software: UML (class, sequence, activity, use case), ERD, architecture diagrams
• Cloud/Infrastructure: AWS, Azure, GCP, Kubernetes, network topology
• Engineering: Electrical circuits, digital logic, P&ID, floor plans
• Business: BPMN, value streams, customer journeys, SWOT
• UI/UX: Wireframes, mockups, sitemaps
• And more: Infographics, data flows, decision trees, etc.

Format Selection

Choose the best format for the diagram type:

Format	Best For
Mermaid	Flowcharts, sequences, ERD, Gantt, state diagrams, class diagrams (RECOMMENDED DEFAULT)
CSV	Hierarchical data (org charts), bulk import from spreadsheets
XML	Complex layouts, precise positioning, custom styling, icons, cloud shapes

Mermaid is the recommended default due to its reliability and broad support.

Workflow

1. Determine the best format (Mermaid, CSV, or XML) for the requested diagram
2. Generate the diagram code
3. Execute the Python script from scripts/generate_drawio_url.py to create the URL
4. Present the HTML output as an artifact — this is the clickable link for the user

CRITICAL: URL Output Rules

NEVER type, retype, or reproduce the generated URL in your chat response.

The URL contains compressed base64 data. Retyping it WILL corrupt it — even a single
changed character breaks the link completely.

Instead:

1. Execute the Python script
2. The script outputs a complete HTML page with the correct link embedded
3. Save the HTML output as a file and present it to the user (the link inside is guaranteed correct because it was generated by the script, not by you)
4. In your chat message, tell the user to click the button to open their diagram

DO NOT copy the URL from the script output into your response text. The HTML file IS the delivery mechanism for the link.

Usage

Run the generation script:

python3 scripts/generate_drawio_url.py --type <mermaid|xml|csv> --input <diagram_file> --output <output.html>

All flags (mirrors the full MCP server feature set from index.js)

Flag	Short	Default	Description
--type	-t	mermaid	Diagram format: mermaid, xml, or csv
--input	-i	stdin	Input file path
--url	-u	—	Fetch diagram content from a URL instead of a local file
--output	-o	(required)	Output HTML file path
--title	—	Diagram Ready	Title shown on the HTML page
--lightbox	—	off	Open in lightbox (read-only) mode
--dark	—	auto	Dark mode: auto, true, or false
--border	—	10	Border size in pixels
--edit	—	_blank	Edit target

Examples

# Basic mermaid flowchart
python3 scripts/generate_drawio_url.py -t mermaid -i flowchart.txt -o diagram.html

# XML diagram in dark mode with lightbox (read-only)
python3 scripts/generate_drawio_url.py -t xml -i arch.xml -o diagram.html --lightbox --dark true

# Fetch CSV content from a URL
python3 scripts/generate_drawio_url.py -t csv --url https://example.com/orgchart.csv -o diagram.html

# Pipe from stdin
echo "graph TD; A-->B; B-->C" | python3 scripts/generate_drawio_url.py -t mermaid -o diagram.html

Format Examples

For detailed format examples and references, read references/format-examples.md.

Quick Mermaid Example

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Quick CSV Example (Org Chart)

# label: %name%
# style: rounded=1;whiteSpace=wrap;html=1;
# connect: {"from":"manager","to":"name","invert":true}
# layout: auto
name,manager
CEO,
CTO,CEO
CFO,CEO

Quick XML Example

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="Box" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1">
      <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>