What output format does the flowchart-creator produce?

An HTML snippet with SVG visuals that you can embed or save as a standalone file.

Can I customize colors and swimlanes?

Yes. Use the CSS classes start-end, process, and decision and enable optional swimlanes to group steps.

How do I embed the chart in a webpage?

Copy the generated HTML into your page and include the accompanying CSS and SVG markup; the example HTML shows the expected structure.

flowchart-creator

npx machina-cli add skill mhattingpete/claude-skills-marketplace/flowchart-creator --openclaw

Files (1)

SKILL.md

2.0 KB

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

Source

git clone https://github.com/mhattingpete/claude-skills-marketplace/blob/main/visual-documentation-plugin/skills/flowchart-creator/SKILL.md

View on GitHub

Overview

Flowchart-creator builds interactive HTML flowcharts and process diagrams, including decision trees and color-coded stages. It supports Start/End nodes, Process boxes, Decision diamonds, arrows, and optional swimlanes to visualize complex workflows. This helps clarify processes for user requests that require flowcharts or workflow visuals.

How This Skill Works

It uses standard HTML, CSS and SVG patterns with predefined classes for each node type (start-end, process, decision). You break down the process, lay out nodes and connectors, and export to an HTML file named [process]-flowchart.html for easy hosting.

When to Use It

Create flowchart for [process]
Generate process flow diagram
Make decision tree for [workflow]
Show workflow visualization
Respond to requests for flowcharts or process diagrams

Quick Start

Step 1: Break down the process into steps
Step 2: Identify decision points and plan layout
Step 3: Connect nodes with arrows and export to [process]-flowchart.html

Best Practices

Break down the process into discrete steps
Identify decision points and branches
Layout nodes with consistent spacing, ideally 100px apart
Connect nodes with arrows and label decision branches
Export to [process]-flowchart.html and keep a clean design

Example Use Cases

Marketing onboarding flow
Customer support escalation path
Order fulfillment workflow
User signup journey with decisions
Incident response procedure

Frequently Asked Questions

Add this skill to your agents