mhattingpete

flowchart-creator

@mhattingpete/flowchart-creator
mhattingpete
225
33 forks
Updated 1/18/2026
View on GitHub

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.

Installation

$skills install @mhattingpete/flowchart-creator
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Repositorymhattingpete/claude-skills-marketplace
Pathvisual-documentation-plugin/skills/flowchart-creator/SKILL.md
Branchmain
Scoped Name@mhattingpete/flowchart-creator

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

skills list

Skill Instructions

name: flowchart-creator description: 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.

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

<!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

  1. Break down process into steps
  2. Identify decision points
  3. Layout nodes vertically or horizontally
  4. Connect with arrows
  5. Add labels to decision branches
  6. Write to [process]-flowchart.html

Keep layout clean, use consistent spacing (100px between nodes).

More by mhattingpete

View all
file-operations
225

Analyze files and get detailed metadata including size, line counts, modification times, and content statistics. Use when users request file information, statistics, or analysis without modifying files.

conversation-analyzer
225

Analyzes your Claude Code conversation history to identify patterns, common mistakes, and opportunities for workflow improvement. Use when user wants to understand usage patterns, optimize workflow, identify automation opportunities, or check if they're following best practices.

code-execution
225

Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.

feature-planning
225

Break down feature requests into detailed, implementable plans with clear tasks. Use when user requests a new feature, enhancement, or complex change.