draw.io Flowchart Generator

Generate production-ready .drawio XML files that render cleanly in app.diagrams.net.

Quick Start

1. Understand the user's process/workflow
2. Plan the hierarchy: stages → sub-stages → nodes
3. Generate the XML following the mandatory rules below
4. Save the .drawio file and tell the user how to open it (see Output Delivery)

Mandatory Rules

These are non-negotiable. Every flowchart MUST follow all of them.

Canvas Sizing (Critical)

diagrams.net auto-scales to fit the canvas. A canvas too large = tiny text on screen.

• Never exceed pageWidth=800. Wider canvases get scaled down, making text unreadable.
• Set dx and dy to match or slightly exceed page dimensions.

Container Structure

Use swimlane containers for every stage/group — never bare mxgraph.basic.rect:

<mxCell id="g1" parent="1" connectable="0"
  style="swimlane;startSize=32;fillColor=#EBF5FF;strokeColor=#2563EB;
         strokeWidth=2;fontSize=16;fontStyle=1;fontColor=#1e40af;
         rounded=0;collapsible=0;"
  value="① Stage Name" vertex="1">
  <mxGeometry x="20" y="60" width="720" height="200" as="geometry" />
</mxCell>

Key properties:

• startSize=32 — header height for title
• rounded=0 — sharp corners (never rounded containers)
• collapsible=0 — prevent collapse UI
• connectable="0" — on the cell tag, not in style

Text Hierarchy

Three tiers of text size — no exceptions:

Use inline HTML for mixed sizes within a single cell:

value="<b style="font-size:13px">Title</b><br><br>Body text line 1<br>Body text line 2"

Alignment

• All text: align=center — no exceptions for node content
• Stage titles use swimlane's built-in left-aligned bold header (this is fine)
• Nodes within a container: distribute evenly across the container width
• 2 nodes: left half + right half
• 3 nodes: thirds

Arrows

Arrows must be clean and orthogonal. No diagonal lines, no crossing, no spaghetti.

Between stages (main flow)

<mxCell id="ea_1to2" parent="1" source="g1" target="g2" edge="1"
  style="edgeStyle=orthogonalEdgeStyle;strokeWidth=3;strokeColor=#2563EB;
         fontColor=#2563EB;fontSize=12;fontStyle=1;"
  value="Label text">

• strokeWidth=3, blue (#2563EB), bold label

Within a container (internal flow)

<mxCell id="e30" parent="g2" source="30" target="31" edge="1"
  style="edgeStyle=orthogonalEdgeStyle;strokeWidth=2;strokeColor=#82b366;">

• strokeWidth=2, color matches container theme

Fan-out pattern (one source → multiple targets)

Use explicit entry points to prevent crossing:

<!-- Left target: entryX=0.25 -->
style="...entryX=0.25;entryY=0;exitX=0.5;exitY=1;"
<!-- Center target: entryX=0.5 -->
style="...entryX=0.5;entryY=0;exitX=0.5;exitY=1;"
<!-- Right target: entryX=0.75 -->
style="...entryX=0.75;entryY=0;exitX=0.5;exitY=1;"

Return/loop arrows

Use dashed lines routed via explicit waypoints on the left margin:

style="edgeStyle=orthogonalEdgeStyle;dashed=1;strokeColor=#d97706;strokeWidth=2;"

With routing along x=5 to avoid crossing content.

Color Palette

Use this consistent 5-stage palette. If fewer stages, use a subset:

Sub-containers (dashed): use lighter fills (#FEFCE8, #FFF7ED, #FEF2F2) with dashed=1.

Node fills: always #FFFFFF with border color matching the parent stage.

Special nodes:

• Warning/fail: fillColor=#f8cecc, strokeColor=#b85450
• Pending/future: fillColor=#fff2cc, strokeColor=#d6b656
• Decision (rhombus): fillColor=#fff2cc, strokeColor=#d6b656

Spacing Rules

• Container left margin: x=20, right margin: leave 20px
• Container width: pageWidth - 40 (e.g., 720 for 800-wide canvas)
• Vertical gap between stages: 30-40px (including arrow space)
• Nodes inside container: 10-20px padding from container edges
• Vertical gap between node bottom and container bottom: ≥15px

"或" (Or) Pattern

When two parallel options exist (e.g., manual vs automatic):

<mxCell id="s1or" parent="s1box"
  style="text;html=1;align=center;fontSize=16;fontStyle=1;fontColor=#999;"
  value="或" vertex="1">

Place centered between the two option boxes, vertically aligned to their midpoint.

Status/Note Bars

For status flow annotations or notes at the bottom of a container:

style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999;
       fontSize=11;align=center;fontStyle=2;"

Height: 22-28px, italic, gray — visually subordinate to main content.

XML Structure Template

See references/template.md for the complete XML skeleton.

Output Delivery

交付本地 .drawio 文件，告诉用户打开方式。

步骤

1. 生成完整的 .drawio XML，必须包含 外层包裹：

<mxfile host="app.diagrams.net" type="device">
  <diagram id="xxx" name="图表名称">
    <mxGraphModel ...>
      <root>
        ...
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

1. 将文件保存到 workspace 或用户指定路径，文件名以 .drawio 结尾
2. 告诉用户文件路径和打开方式：

打开方式（告知用户，选其一即可）：

• 方式一：浏览器打开 https://app.diagrams.net → 点「Open Existing Diagram」→ 选择本地文件
• 方式二：直接将 .drawio 文件拖拽到已打开的 app.diagrams.net 页面中
• 方式三：如果安装了 diagrams.net 桌面版（或 VS Code draw.io 插件），直接双击文件打开

Validation Checklist

Before writing the file, verify:

• [ ] pageWidth ≤ 800
• [ ] All containers use swimlane style with rounded=0;collapsible=0
• [ ] All node text has align=center
• [ ] Stage titles use fontSize 14-16 with fontStyle=1
• [ ] Node titles use tags at fontSize 13
• [ ] Inter-stage arrows: strokeWidth=3, strokeColor=#2563EB
• [ ] Intra-container arrows: strokeWidth=2, matching container color
• [ ] Fan-out arrows use explicit entryX/exitX anchors
• [ ] No XML comments () in the output — they cause load errors
• [ ] All edge cells have edge="1" attribute and valid source/target
• [ ] Container cells have connectable="0" on the tag (not in style)
• [ ] Nodes inside a container have parent="containerId"
• [ ] No overlapping geometry — manually check x/y/width/height
• [ ] Return arrows route via left margin with explicit waypoints