flowchart-creator_skill

Overview

This skill generates interactive HTML flowcharts and process diagrams with color-coded nodes, arrows, labels, and optional swimlanes. It produces portable SVG-based layouts you can open in a browser or embed in documentation. Use it to turn process descriptions or decision logic into clear visual diagrams quickly.

How this skill works

You provide a process description or list of steps and decision points. The skill maps each step to styled SVG nodes (start/end, process, decision) and connects them with labeled arrows. It applies consistent spacing and optional swimlanes, then outputs a single HTML file containing the SVG and minimal CSS for colors, fonts, and arrow markers.

When to use it

• Create a process flowchart from a step-by-step workflow
• Generate a decision tree showing branching logic and labels
• Visualize handoffs using swimlanes to show roles or teams
• Produce an embeddable HTML diagram for documentation or presentations
• Quickly prototype alternate process layouts (vertical or horizontal)

Best practices

• Break the process into discrete steps and mark decision points explicitly
• Use consistent spacing (about 100px) to preserve readability
• Keep labels short and place branch labels near arrows for clarity
• Use swimlanes only when you need to show responsibility or parallel tracks
• Choose contrasting colors for node types: start/end, process, decision

Example use cases

• Onboard workflow: Start -> Verify account -> Create profile -> Decision: Approved / Rejected
• Code review process with swimlanes for Developer and Reviewer roles
• Release pipeline showing build, test, deploy steps and conditional rollback
• Customer support triage decision tree with priority paths and outcomes
• HR hiring process with offer, background check, and onboarding steps