flowchart-creator
Creates custom HTML/SVG flowcharts and process diagrams using standardized nodes, decision diamonds, and connectors.
Install
mkdir -p .claude/skills/flowchart-creator && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4376" && unzip -o skill.zip -d .claude/skills/flowchart-creator && rm skill.zipInstalls to .claude/skills/flowchart-creator
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Generate HTML-based process flow diagrams
- →Create decision trees with branching logic
- →Visualize workflows using SVG components
- →Define custom nodes for start, end, and process steps
How it works
The skill generates an HTML document containing SVG elements. It uses specific CSS classes and path coordinates to render process boxes, decision diamonds, and connecting arrows.
Inputs & outputs
When to use flowchart-creator
- →Visualize software deployment workflows
- →Draft decision trees for business logic
- →Generate process flow diagrams for architecture documentation
About this skill
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).
When not to use it
- →When complex interactive data visualization is required
Limitations
- →Layout requires manual definition of node coordinates
- →Limited to predefined node shapes and colors
How it compares
This approach produces a standalone, portable HTML file instead of relying on external diagramming software or proprietary formats.
Compared to similar skills
flowchart-creator side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| flowchart-creator (this skill) | 1 | 9mo | No flags | Beginner |
| mermaid-diagram-specialist | 12 | 6mo | No flags | Intermediate |
| plantuml-ascii | 8 | 6mo | Review | Beginner |
| architecture-diagram-creator | 8 | 9mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by mhattingpete
View all by mhattingpete →You might also like
mermaid-diagram-specialist
davila7
Mermaid diagram specialist for creating flowcharts, sequence diagrams, ERDs, and architecture visualizations
plantuml-ascii
github
Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams, or mentions plantuml ascii, text diagram, ascii art diagram. Supports: Converting PlantUML diagrams to ASCII art, Creating sequence diagrams, class diagrams, flowcharts in ASCII format, Generating Unicode-enhanced ASCII art with -utxt flag
architecture-diagram-creator
mhattingpete
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
mermaidjs-v11
mrgoonie
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.
mermaid-visualizer
axtonliu
Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in syntax error prevention.
mermaid-tools
daymade
Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts. Activates when working with Mermaid diagrams, converting diagrams to PNG, extracting diagrams from markdown, or processing markdown files with embedded Mermaid code.