drawio-flowchart

Generate clean, well-structured draw.io (.drawio) XML flowcharts with proper swimlane containers, text hierarchy, color coding, and orthogonal arrows for wor...

zhiningo@zhiningo

Install

openclaw skills install @zhiningo/drawio-flowchart

draw.io Flowchart Generator

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

Quick Start

Understand the user's process/workflow
Plan the hierarchy: stages → sub-stages → nodes
Generate the XML following the mandatory rules below
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.

Content complexity	pageWidth	pageHeight
Simple (≤3 stages, few nodes)	600	1200
Medium (4-5 stages)	800	2800
Complex (6+ stages, nested)	800	3800

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:

xml

<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:

Level	fontSize	fontStyle	Example
Stage title (swimlane)	14-16	1 (bold)	① Skill 上传
Node title (inside box)	13 with `<b>` tag	bold via HTML	格式验证 ✅
Node body text	12	normal	SKILL.md & YAML 合法

Use inline HTML for mixed sizes within a single cell:

xml

value="&lt;b style=&quot;font-size:13px&quot;&gt;Title&lt;/b&gt;&lt;br&gt;&lt;br&gt;Body text line 1&lt;br&gt;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)

xml

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

xml

<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:

xml

<!-- 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:

xml

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

With <Array as="points"> routing along x=5 to avoid crossing content.

Color Palette

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

Stage	fillColor	strokeColor	fontColor
1 (intro/input)	#EBF5FF	#2563EB	#1e40af
2 (validation)	#F0FDF4	#16a34a	#047857
3 (evaluation)	#FAF5FF	#7c3aed	#6d28d9
4 (approval)	#F0FDF4	#059669	#047857
5 (management)	#FFF7ED	#ea580c	#c2410c

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

xml

<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:

xml

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 文件，告诉用户打开方式。

步骤

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

xml

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

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

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

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

Validation Checklist

Before writing the file, verify: