Flowchart Creator

mhattingpete/claude-skills-marketplace/visual-documentation-plugin/skills/flowchart-creator

by mhattingpeteb5b34bcf4c920bb72cee1c391b54a33cb5353c12No licenseListed Oct 9, 2026Updated Oct 9, 2026

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.

Instructions onlyDesign & Creative
AI-generated overview

Creates interactive HTML flowcharts and process diagrams with decision diamonds, color-coded nodes, arrows, and optional swimlanes.

What it does
This skill provides instructions for producing a self-contained HTML file containing an SVG flowchart. It defines node types (start/end rounded rectangles, process boxes, decision diamonds), a color scheme, arrow connectors, optional swimlanes, and a step-by-step layout workflow. The output is written as a [process]-flowchart.html file.
When to use it
Use it when a user asks for a flowchart, process diagram, workflow visualization, or decision tree. It suits requests to visualize a sequence of steps or branching logic as a diagram.
Requirements
No scripts are shipped; it is instructions only. It relies on the agent's ability to write HTML and SVG, plus the bundled template and reference files. No credentials or network access are required.

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

Source and attribution

Source:mhattingpete/claude-skills-marketplaceinvisual-documentation-plugin/skills/flowchart-creatorat commitb5b34bc

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from mhattingpete/claude-skills-marketplace

Codebase Documenter

mhattingpete

Generates markdown documentation explaining a codebase's architecture, components, data flow and development guidelines.

Software DevelopmentOct 9, 2026

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative180Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative180Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative180Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative180Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative180Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today