Use when creating flowcharts, process flows, or decision trees in Draw.io. Prevents the common mistake of using wrong shapes for flowchart elements (e.g., rectangle for decisions instead of rhombus). Covers all ISO 5807 flowchart shapes, decision branching patterns, and directed flow layout. Keywords: flowchart, process flow, decision tree, rhombus, diamond, terminator, process, data flow, make a flowchart, yes no diagram, if then diagram, process steps, flow diagram.
Instrucciones de origen · Vista previa de solo lectura
name
drawio-impl-flowcharts
description
Use when creating flowcharts, process flows, or decision trees in Draw.io. Prevents the common mistake of using wrong shapes for flowchart elements (e.g., rectangle for decisions instead of rhombus). Covers all ISO 5807 flowchart shapes, decision branching patterns, and directed flow layout. Keywords: flowchart, process flow, decision tree, rhombus, diamond, terminator, process, data flow, make a flowchart, yes no diagram, if then diagram, process steps, flow diagram.
license
MIT
compatibility
Designed for Claude Code. Requires Draw.io / diagrams.net (current).
metadata
{"author":"OpenAEC-Foundation","version":"1.0"}
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)
ALWAYS use rhombus for decisions — NEVER use a rectangle, rounded rectangle, or any other shape.
ALWAYS label decision branches — Every edge leaving a decision MUST have a value attribute (e.g., value="Yes", value="No").
ALWAYS use consistent flow direction — Pick one primary direction (top-to-bottom or left-to-right) and maintain it throughout the entire diagram.
NEVER mix flow directions — A flowchart that flows both downward and leftward creates confusion and violates readability standards.
ALWAYS include whiteSpace=wrap;html=1; in every shape style — Without it, text overflows and does not wrap.
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
Shape
Style
Dimensions
Purpose
Process
rounded=0;whiteSpace=wrap;html=1;
140 x 60
Standard task or step (rectangle)
Decision
rhombus;whiteSpace=wrap;html=1;
120 x 80
Yes/No or conditional branch (diamond)
Terminator
rounded=1;whiteSpace=wrap;html=1;arcSize=50;
120 x 40
Start or End (stadium shape)
Data (I/O)
shape=parallelogram;whiteSpace=wrap;html=1;
140 x 60
Input or output (parallelogram)
Document
shape=document;whiteSpace=wrap;html=1;
140 x 60
Document output (wavy bottom)
Predefined Process
shape=process;whiteSpace=wrap;html=1;
140 x 60
Subprocess reference (double-barred rectangle)
Manual Input
shape=manualInput;whiteSpace=wrap;html=1;
140 x 60
User input (sloped top edge)
Preparation
shape=hexagon;whiteSpace=wrap;html=1;
140 x 60
Setup or initialization step (hexagon)
Database
shape=cylinder3;whiteSpace=wrap;html=1;
120 x 80
Data store (cylinder)
Decision Tree: Shape Selection
What does this step represent?
A condition/question --> rhombus (decision diamond)
Start or End --> rounded=1;arcSize=50 (terminator)
A task/action --> rounded=0 (process rectangle)
Reading/writing data --> shape=parallelogram (data I/O)
Producing a document --> shape=document
Calling a subprocess --> shape=process (predefined process)
User entering data --> shape=manualInput
Setup/initialization --> shape=hexagon (preparation)
Storing to database --> shape=cylinder3 (database)
Color Conventions
Use consistent colors to signal shape purpose:
Shape Type
Fill Color
Stroke Color
Terminator (Start)
#d5e8d4 (light green)
#82b366
Terminator (End)
#f8cecc (light red)
#b85450
Process
#dae8fc (light blue)
#6c8ebf
Decision
#fff2cc (light yellow)
#d6b656
Data I/O
#e1d5e7 (light purple)
#9673a6
Document
#f5f5f5 (light gray)
#666666
Database
#e1d5e7 (light purple)
#9673a6
Connection Patterns
Standard Edge Style
ALWAYS use endArrow=classic;html=1; as the base edge style for flowchart connections.
For clean orthogonal routing, add edgeStyle=orthogonalEdgeStyle;:
Decision branches MUST carry labels. The value attribute on the edge mxCell renders as an inline label:
<!-- Yes branch (continues downward in top-to-bottom flow) --><mxCellid="e_yes"value="Yes"style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;"edge="1"parent="1"source="decision1"target="next_step"><mxGeometryrelative="1"as="geometry" /></mxCell><!-- No branch (exits to the side) --><mxCellid="e_no"value="No"style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;"edge="1"parent="1"source="decision1"target="alt_step"><mxGeometryrelative="1"as="geometry" /></mxCell>
Multi-Way Branching
For decisions with more than two outcomes, use multiple labeled edges:
