Flowchart Creator

Generates standalone HTML flowcharts with SVG nodes and connectors. You give it a process description and it builds start/end nodes, process boxes, decision diamonds, and labeled arrows with a clean vertical or horizontal layout. Uses color coding (green for start, blue for processes, orange for decisions, red for end) and consistent 100px spacing. The output is a single HTML file you can open in any browser. Good for quick workflow diagrams or decision trees without firing up dedicated flowchart software. The diagrams are static SVG, not interactive beyond being viewable, so this is more for documentation than building something users click through.

skills.sh installs: 749
GitHub stars: 693
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator --agent claude-code

Installs into .claude/skills of the current project.

Files

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

<!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

<!-- 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>

SKILL.md on GitHub