playbooks

home / skills / mhattingpete / claude-skills-marketplace / flowchart-creator

flowchart-creator skill

/visual-documentation-plugin/skills/flowchart-creator

This skill generates interactive HTML flowcharts and process diagrams with nodes, arrows, and swimlanes for clear workflow visualization.

npx playbooks add skill mhattingpete/claude-skills-marketplace --skill flowchart-creator

Review the files below or copy the command above to add this skill to your agents.

Files (5)
SKILL.md
2.0 KB
---
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
<!DOCTYPE html>
<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>
  <h1>[Process Name] Flowchart</h1>
  <svg viewBox="0 0 800 600">
    <!-- flowchart nodes and connectors -->
  </svg>
</body>
</html>
```

## Node Patterns

```html
<!-- Start/End (rounded rect) -->
<rect x="350" y="50" width="100" height="50" rx="25" class="start-end"/>
<text x="400" y="80" text-anchor="middle">Start</text>

<!-- Process box -->
<rect x="350" y="150" width="100" height="60" class="process"/>
<text x="400" y="185" text-anchor="middle">Process</text>

<!-- Decision diamond -->
<path d="M400,250 L450,280 L400,310 L350,280 Z" class="decision"/>
<text x="400" y="285" text-anchor="middle">Decision?</text>

<!-- Arrow -->
<path d="M400,100 L400,150" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
```

## 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).

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

FAQ

What file do I get as output?

You receive a single HTML file containing styled SVG, ready to open in a browser or embed.

Can I customize colors and layout?

Yes. The generated HTML uses simple CSS classes for node types and an SVG viewBox so you can tweak colors, spacing, and orientation.

Does it support swimlanes?

Yes. Swimlanes are optional and group nodes by role or team to show handoffs and parallel flows.