--- name: flowchart-creator description: Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees. --- # Flowchart Creator Create interactive HTML flowcharts and process diagrams. ## When to Use - "Create flowchart for [process]" - "Generate process flow diagram" - "Make decision tree for [workflow]" - "Show workflow visualization" ## Components 1. **Start/End nodes**: rounded rectangles (#48bb78 green, #e53e3e red) 2. **Process boxes**: rectangles (#4299e1 blue) 3. **Decision diamonds**: diamonds (#f59e0b orange) 4. **Arrows**: connecting paths with labels 5. **Swimlanes**: grouped sections (optional) ## HTML Structure ```html [Process] Flowchart

[Process Name] Flowchart

``` ## Node Patterns ```html Start Process Decision? ``` ## Workflow 1. Break down process into steps 2. Identify decision points 3. Layout nodes vertically or horizontally 4. Connect with arrows 5. Add labels to decision branches 6. Write to `[process]-flowchart.html` Keep layout clean, use consistent spacing (100px between nodes).

flowchart-creator

Install this skill

Comments