mhattingpete
Install Flowchart Creator
Pick your agent. Every command is ready to paste.
npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creatorThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads flowchart-creator when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the flowchart-creator skill”. In Codex, type $flowchart-creator.
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>
<!-- 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
- Break down process into steps
- Identify decision points
- Layout nodes vertically or horizontally
- Connect with arrows
- Add labels to decision branches
- Write to
[process]-flowchart.html
Keep layout clean, use consistent spacing (100px between nodes).
Tips for Flowchart Creator
- • Start a fresh session after installing so your agent picks up the new skill.
- • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
- • It is part of a pack with 18 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Flowchart Creator
What does the Flowchart Creator skill do?
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.
How do I install Flowchart Creator?
Run "npx skills add mhattingpete/claude-skills-marketplace --skill flowchart-creator" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Flowchart Creator work in Cursor and Codex?
Yes. Flowchart Creator uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Flowchart Creator free?
Flowchart Creator is open source on GitHub under the Apache-2.0 license. It is free to install; check the license before commercial use.
Who made Flowchart Creator?
Flowchart Creator is published by mhattingpete in the mhattingpete/claude-skills-marketplace repository, together with 17 other skills.
