flowchart-creator

Solid

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.

AI & Automation 671 stars 96 forks Updated 1 months ago Apache-2.0

Install

View on GitHub

Quality Score: 85/100

Stars 20%
94
Recency 20%
75
Frontmatter 20%
70
Documentation 15%
91
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 <!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 ```html <!-- 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-w...

Details

Author
mhattingpete
Repository
mhattingpete/claude-skills-marketplace
Created
10 months ago
Last Updated
1 months ago
Language
HTML
License
Apache-2.0

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

make-flowchart

Create one accurate readable flowchart from an explicit process model with verified nodes, decisions, labels, and connections. Use for process, decision, system, or workflow diagrams; do not use for infographics, floor plans, freeform illustrations, project schedules, or diagrams whose source logic is unknown.

1 Updated 3 days ago
weshopai
DevOps & Infrastructure Listed

flowchart

Generate flowchart .drawio from a process description — start/end, process, decision, standard mxGraph, opens directly in draw.io.

8 Updated 1 months ago
KhaiTrang1995
AI & Automation Featured

architecture-diagram-creator

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.

671 Updated 1 months ago
mhattingpete