flowchart-creator — Claude Code skill: HTML flowcharts
Turns a process into a single HTML file with an SVG flowchart. Handy when a workflow needs a picture instead of a paragraph.
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a claude-codeWhat flowchart-creator does
The skill breaks a process into steps, finds the decision points and lays out the diagram as HTML with inline SVG. It ships ready-made shapes: rounded rectangles for start and end, plain rectangles for steps, diamonds for decisions, arrows with labels on each branch. Swimlanes are there too, for processes that cross roles or systems.
Styling runs on classes — .start-end, .process, .decision — and the colours are fixed at green, blue and orange, so matching your own palette means editing the file by hand. Output lands in [process]-flowchart.html.
The result is a static SVG picture. No dragging nodes around, no live editing. If you want a diagram editor, look elsewhere. What you do get is a file that opens in a browser with no build step and no dependencies.
What it helps with
- draw a process flowchart in HTML without a graphics editor
- build a decision tree with labelled branches
- show a workflow split across roles with swimlanes
- get a diagram as SVG for pasting into docs
- map a process into steps and branch points
Example prompts for the agent
- Create a flowchart for the order checkout process
- Make a decision tree for loan application review
- Show the document approval workflow with swimlanes per department
How to install flowchart-creator
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a claude-code2Manually: put the files in place
~/.claude/skills/flowchart-creator/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/flowchart-creator/
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a codex2Manually: put the files in place
.agents/skills/flowchart-creator/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a cursor2Manually: put the files in place
.cursor/skills/flowchart-creator/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install mhattingpete/claude-skills-marketplace flowchart-creator2Manually: put the files in place
.github/skills/flowchart-creator/SKILL.md1Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a gemini-cli2Platform CLI
gemini skills install https://github.com/mhattingpete/claude-skills-marketplace --path visual-documentation-plugin/skills/flowchart-creatorManually: put the files in place
.devin/skills/flowchart-creator/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about flowchart-creator
How do I install flowchart-creator in Claude?
Run npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -a claude-code. The skill lands at ~/.claude/skills/flowchart-creator/SKILL.md.
What does flowchart-creator do?
It generates HTML flowcharts and process diagrams: nodes, decision diamonds, labelled arrows, colour-coded stages and swimlanes. The output is a [process]-flowchart.html file with SVG inside.
Can I change the colours and styling?
Yes, by hand. Colours come from the .start-end, .process and .decision classes in the <style> block of the generated file — edit them there.
Source text
SKILL.md · Apache-2.0
---
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).
© mhattingpete · Apache-2.0 · mhattingpete/claude-skills-marketplace
