Draw.io Flowchart Implementation

Purpose

This skill enables correct generation of flowcharts, process flows, and decision trees in Draw.io mxGraph XML. It enforces ISO 5807 shape semantics and prevents the most common AI mistakes: wrong shapes for flowchart elements and missing decision branch labels.

Critical Rules (Memorize These)

1. ALWAYS use rhombus for decisions — NEVER use a rectangle, rounded rectangle, or any other shape.
2. ALWAYS label decision branches — Every edge leaving a decision MUST have a value attribute (e.g., value="Yes", value="No").
3. ALWAYS use consistent flow direction — Pick one primary direction (top-to-bottom or left-to-right) and maintain it throughout the entire diagram.
4. NEVER mix flow directions — A flowchart that flows both downward and leftward creates confusion and violates readability standards.
5. ALWAYS include whiteSpace=wrap;html=1; in every shape style — Without it, text overflows and does not wrap.
6. ALWAYS use rounded=1;arcSize=50; for terminators (Start/End) — This produces the ISO 5807 stadium/pill shape. NEVER use ellipse.

ISO 5807 Shape Reference