name: drawio
description: Create professional diagrams using Draw.io (diagrams.net) XML format. Best for complex architecture diagrams, network topologies, flowcharts with custom shapes, and technical documentation requiring precise positioning. Use when you need rich shape libraries (AWS, Azure, Cisco, UML, etc.) or pixel-perfect layouts. NOT for simple flowcharts (use mermaid) or data-driven charts (use vega).
auth: Draw.io is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://xicilion.gitbook.io/markdown-viewer-extension/

Draw.io Diagram Generator

Quick Start: Create <mxfile> with <diagram> → Define <mxGraphModel> with grid settings → Add <root> with cells → Use <mxCell> for shapes and edges → Set geometry with <mxGeometry> → Wrap in ```drawio fence.

Critical Syntax Rules

Rule 1: Document Structure

<?xml version="1.0" encoding="UTF-8"?>
<mxfile>
  <diagram name="Page-1" id="unique-id">
    <mxGraphModel dx="1434" dy="499" grid="1" gridSize="10">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- Your shapes and edges here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Rule 2: Root Cells Required

❌ Missing root cells → Diagram won't render
✅ <mxCell id="0"/>                    → Root cell (required)
✅ <mxCell id="1" parent="0"/>         → Default parent (required)

Rule 3: Shape Definition (vertex)

<mxCell id="shape1" value="Label" style="..." parent="1" vertex="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Rule 4: Edge Definition (edge)

<mxCell id="edge1" style="..." parent="1" source="shape1" target="shape2" edge="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Rule 5: Style Syntax

style="key1=value1;key2=value2;key3=value3;"

Common Style Properties

Shape Styles

Edge Styles

Preset Color Palette

Common Shapes

Basic Shapes

<!-- Rectangle -->
<mxCell value="Box" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="120" height="60" as="geometry"/>
</mxCell>

<!-- Rounded Rectangle -->
<mxCell value="Rounded" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="120" height="60" as="geometry"/>
</mxCell>

<!-- Ellipse/Circle -->
<mxCell value="Circle" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="80" height="80" as="geometry"/>
</mxCell>

<!-- Diamond -->
<mxCell value="Decision" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="80" height="80" as="geometry"/>
</mxCell>

<!-- Cylinder (Database) -->
<mxCell value="Database" style="shape=cylinder;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="60" height="80" as="geometry"/>
</mxCell>

<!-- Cloud -->
<mxCell value="Cloud" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="120" height="80" as="geometry"/>
</mxCell>

Container/Swimlane

<!-- Container with label at top -->
<mxCell value="Container" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="200" height="150" as="geometry"/>
</mxCell>

<!-- Zone/Region (no border, background only) -->
<mxCell value="Zone Name" style="whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;verticalAlign=top;fontSize=14;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="300" height="200" as="geometry"/>
</mxCell>

Edge Examples

<!-- Simple arrow -->
<mxCell style="endArrow=classic;html=1;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

<!-- Orthogonal (right-angle) edge -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

<!-- Bidirectional arrow -->
<mxCell style="endArrow=classic;startArrow=classic;html=1;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

<!-- No arrow (line only) -->
<mxCell style="endArrow=none;html=1;strokeWidth=2;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

<!-- Dashed line -->
<mxCell style="endArrow=classic;dashed=1;html=1;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Complete Example: Simple Architecture

<?xml version="1.0" encoding="UTF-8"?>
<mxfile>
  <diagram name="Architecture" id="arch-1">
    <mxGraphModel dx="800" dy="600" grid="1" gridSize="10">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>

        <!-- Client -->
        <mxCell id="client" value="Client" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="40" y="100" width="100" height="50" as="geometry"/>
        </mxCell>

        <!-- Server -->
        <mxCell id="server" value="Server" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="240" y="100" width="100" height="50" as="geometry"/>
        </mxCell>

        <!-- Database -->
        <mxCell id="db" value="Database" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
          <mxGeometry x="440" y="85" width="80" height="80" as="geometry"/>
        </mxCell>

        <!-- Edges -->
        <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="client" target="server">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>

        <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="server" target="db">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Common Pitfalls

Output Format

```drawio
<?xml version="1.0" encoding="UTF-8"?>
<mxfile>
  <diagram name="Page-1" id="unique-id">
    <mxGraphModel>
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- diagram content -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

Tips for AI Generation

1. Plan layout first: Sketch positions mentally before writing XML
2. Use grid alignment: Position shapes at multiples of 10 or 20
3. Layer backgrounds first: Define zone/container cells before shapes inside them
4. Unique IDs: Use descriptive IDs like client, server, db instead of random strings
5. Consistent spacing: Keep 40-60px gaps between connected shapes
6. Color zones: Use light background colors with strokeColor=none for region highlighting

Resources

• Draw.io Documentation
• mxGraph API Reference