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 Start/End nodes: rounded rectangles (#48bb78 green, #e53e3e red) Process boxes: rectangles (#4299e1 blue) Decision diamonds: diamonds (#f59e0b orange) Arrows: connecting paths with labels Swimlanes: grouped sections (optional) HTML Structure
<html> <head> <title>[Process] Flowchart</title> <style> body { font-family: system-ui; } svg { max-width: 100%; } .start-end { fill: #48bb78; } .process { fill: #4299e1; } .decision { fill: #f59e0b; } </style> </head> <body>[Process Name] Flowchart
</body> </html>Node Patterns
Workflow Break down process into steps Identify decision points Layout nodes vertically or horizontally Connect with arrows Add labels to decision branches Write to [process]-flowchart.html
Keep layout clean, use consistent spacing (100px between nodes).