design mediaby mhattingpete
Flowchart Creator
mhattingpete/flowchart-creator
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes.
What it changes
Passed 3 of 22 test cases with the skill, and 3 of 22 without it.
Without skill14%
With skill14%
0 fixed3 passed either way19 still failing0 broke
- Pass-rate lift
- 0 pp
- Tokens
- +17%
- Agent turns
- 0%
- Response time
- +9%
Model gemini-3.6-flashMeasured 8/18/2026v13 of 22 cases passed with skill
What's inside
The instructions your model reads when the skill loads.
SKILL.md72 lines3 files
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>
Track record
Benchmark
3 / 22
test cases passed, vs 3 / 22 without
Adoption
- Users
- 0
- Times used
- 0
Safety and source details
SkillSafety
✓ 3 of 3 passed✓Code scan15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026
View 15 scanner checks
live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing
✓IntentSafe
LLM judge · does the skill do what it claims
✓ContentClean
LLM judge · policy & harmful-content review
Source
Importedmhattingpete / claude-skills-marketplace
visual-documentation-plugin/skills/flowchart-creator/SKILL.md
License Apache-2.0Imported 8/3/2026Version v1Bundled 2 files