flowchart-creator

Q: How do I install flowchart-creator?

Run npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flowchart-creator/ (personal) or .claude/skills/flowchart-creator/ (project).

by mhattingpeteFrontend & Design

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.

Installs: 738
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads flowchart-creator automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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).

FAQ

What does the flowchart-creator skill do?

How do I install flowchart-creator?

Run npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flowchart-creator/ (personal) or .claude/skills/flowchart-creator/ (project).

Which AI agents can use flowchart-creator?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is flowchart-creator safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains flowchart-creator?

It is published by mhattingpete in mhattingpete/claude-skills-marketplace. It has 738 recorded installs.