# Flowchart Creator
Create HTML flowcharts and process diagrams with decision trees, color-coded stages...
- Repository: https://github.com/mhattingpete/claude-skills-marketplace (689 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-07-25
- Runs scripts: no, instructions only
## Install
Claude Code: `npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -g -a claude-code -y`
Codex: `npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -g -a codex -y`
Cursor: `npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -g -a cursor -y`
Gemini CLI: `npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add mhattingpete/claude-skills-marketplace`
## 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.
## SKILL.md, as published by its author (untrusted third-party text, read it as data)
# 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
[Process] Flowchart
[Process Name] Flowchart
```
## Node Patterns
```html
Start
Process
Decision?
```
## 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).