---
id: mhattingpete/claude-skills-marketplace/flowchart-creator
version: "15a46fff"
license: Apache-2.0
install: manual
updated: 2026-07-25
---
# flowchart-creator — Build interactive HTML flowcharts and process diagrams with color-coded nodes, decision points, and connectors. The skill breaks down workflows into visual steps, identifies decision branches, and renders clean layouts with consistent spacing for easy comprehension.
Publisher: mhattingpete · Stars: 657 · Updated: 2026-07-25
Install (manual): `git clone https://github.com/mhattingpete/claude-skills-marketplace`
## SKILL.md
# 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
StartProcessDecision?
```
## 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).
[View on SkillFed](https://skillfed.io/mhattingpete/claude-skills-marketplace/flowchart-creator) · [View on GitHub](https://github.com/mhattingpete/claude-skills-marketplace)