Workflow Visualizer
Turn any system description into a beautiful, interactive HTML diagram. Click nodes, hover for details, and see exactly how data flows through your workflow. One self-contained HTML file, no dependencies.
How It Works
When you say "visualize this workflow" or "map out this system", this skill parses your description, identifies every component, and builds an interactive diagram you can open in any browser.
Step 1: Parse the System
Extract these components from the user's description:
| Component |
What to Look For |
Example |
| Triggers |
What starts the workflow |
"When a new email arrives", "Every morning at 9am" |
| Inputs |
Data that enters the system |
"Email body", "CSV file", "API response" |
| Processing Steps |
Actions that transform data |
"Extract key info", "Summarize text", "Filter results" |
| Tools / Services |
External tools or APIs used |
"Claude", "Zapier", "Google Sheets", "Slack" |
| Decision Points |
Conditional branches |
"If priority is high", "When amount > $100" |
| Outputs |
Final results or deliverables |
"Send Slack message", "Update spreadsheet", "Generate report" |
| Loops |
Recurring or repeating steps |
"Repeat for each item", "Run daily" |
| Data Stores |
Where data lives between steps |
"Database", "JSON file", "Spreadsheet" |
If the user's description is vague, ask clarifying questions before building.
Step 2: Choose a Layout
Select the layout that best fits the workflow shape:
| Layout |
Structure |
Best For |
| Left-to-Right Flow |
Horizontal chain of nodes |
Linear processes, pipelines, simple workflows |
| Top-Down Waterfall |
Vertical cascade |
Sequential steps, decision trees, funnels |
| Hub and Spoke |
Central node with radiating connections |
One tool that connects to many, API integrations |
| Swimlane |
Horizontal lanes per tool/person |
Multi-team processes, handoffs between systems |
| Circular |
Loop back to start |
Recurring workflows, feedback loops, monitoring |
Step 3: Build the Interactive HTML
Generate a single self-contained HTML file with these features:
Node Types and Colors
| Node Type |
Background |
Border |
Icon Style |
| Trigger |
#1e3a5f |
#3B82F6 (blue) |
Lightning bolt, clock, webhook |
| Processing |
#1a3d2e |
#10B981 (green) |
Gear, wand, filter |
| Tool / Service |
#3d2e1a |
#F59E0B (amber) |
Tool logo or wrench |
| Output |
#3d1a1a |
#EF4444 (red) |
Check, send, export |
| Data Store |
#1a1a2e |
#6366F1 (indigo) |
Database, folder, file |
| Decision |
#2e1a3d |
#A855F7 (purple) |
Question mark, fork |
Node Content
Each node displays:
- Icon (emoji or SVG) at the top
- Label (2-4 words, bold)
- Subtitle (one short line describing what happens)
Connections and Interactivity
Lines: Solid with arrowheads, color matches source node border, optional data label, animated dash on highlight.
Hover: Node scales 1.05x, border glows, tooltip with step description.
Click: Highlights node and direct connections, dims unconnected nodes, click background to reset.
Responsive:
- Diagram scales to fit the viewport
- Works on desktop and tablet screens
- Nodes wrap or scroll on very small screens
Style Defaults
Page bg #0f0f0f, container #161616, header text #ffffff, subtitle #888888, node text #ffffff, connections #444444 (colored when highlighted). System sans-serif font, 12px border radius, 20px node padding, 160px min node width.
Include a header (workflow name + description), the diagram container, and a color-coded legend (Blue=Triggers, Green=Processing, Amber=Tools, Red=Outputs, Indigo=Data Stores, Purple=Decisions). All styles and JS inline, no external dependencies.
Rules
- Every node must be a specific action, not a vague label. "Process data" is bad. "Extract invoice total from PDF" is good
- Connections must show what data flows between nodes. Not just that they connect, but WHAT passes through
- Decision points need labeled branches. "Yes" and "No", or the specific conditions
- No floating nodes. Every node must connect to at least one other node
- Dark background always. Light mode diagrams wash out and look less professional
- Max 20 nodes per diagram. If the workflow is bigger, split into sub-diagrams
- Self-contained HTML. No external CSS, JS, or image dependencies. Must work offline
Example Usage
- "Visualize this workflow: new lead from website form, added to CRM, sales gets Slack notification"
- "Map out this system: Claude writes drafts, Grammarly checks, Google Docs for review"
- "Diagram my workflow: check email, triage urgent vs non-urgent, route to Slack or Notion"
Tips for Best Results
- Describe your workflow step by step in plain language
- Mention every tool or service involved by name
- Include any conditions or branches ("if X then Y, otherwise Z")
- The more detail you give, the more accurate the diagram will be
1---2name: workflow-visualizer3description: Map any system or workflow as a beautiful interactive HTML diagram4---56# Workflow Visualizer78Turn any system description into a beautiful, interactive HTML diagram. Click nodes, hover for details, and see exactly how data flows through your workflow. One self-contained HTML file, no dependencies.910## How It Works1112When you say "visualize this workflow" or "map out this system", this skill parses your description, identifies every component, and builds an interactive diagram you can open in any browser.1314## Step 1: Parse the System1516Extract these components from the user's description:1718| Component | What to Look For | Example |19|-----------|-----------------|---------|20| **Triggers** | What starts the workflow | "When a new email arrives", "Every morning at 9am" |21| **Inputs** | Data that enters the system | "Email body", "CSV file", "API response" |22| **Processing Steps** | Actions that transform data | "Extract key info", "Summarize text", "Filter results" |23| **Tools / Services** | External tools or APIs used | "Claude", "Zapier", "Google Sheets", "Slack" |24| **Decision Points** | Conditional branches | "If priority is high", "When amount > $100" |25| **Outputs** | Final results or deliverables | "Send Slack message", "Update spreadsheet", "Generate report" |26| **Loops** | Recurring or repeating steps | "Repeat for each item", "Run daily" |27| **Data Stores** | Where data lives between steps | "Database", "JSON file", "Spreadsheet" |2829If the user's description is vague, ask clarifying questions before building.3031## Step 2: Choose a Layout3233Select the layout that best fits the workflow shape:3435| Layout | Structure | Best For |36|--------|-----------|----------|37| **Left-to-Right Flow** | Horizontal chain of nodes | Linear processes, pipelines, simple workflows |38| **Top-Down Waterfall** | Vertical cascade | Sequential steps, decision trees, funnels |39| **Hub and Spoke** | Central node with radiating connections | One tool that connects to many, API integrations |40| **Swimlane** | Horizontal lanes per tool/person | Multi-team processes, handoffs between systems |41| **Circular** | Loop back to start | Recurring workflows, feedback loops, monitoring |4243## Step 3: Build the Interactive HTML4445Generate a single self-contained HTML file with these features:4647### Node Types and Colors4849| Node Type | Background | Border | Icon Style |50|-----------|-----------|--------|------------|51| **Trigger** | `#1e3a5f` | `#3B82F6` (blue) | Lightning bolt, clock, webhook |52| **Processing** | `#1a3d2e` | `#10B981` (green) | Gear, wand, filter |53| **Tool / Service** | `#3d2e1a` | `#F59E0B` (amber) | Tool logo or wrench |54| **Output** | `#3d1a1a` | `#EF4444` (red) | Check, send, export |55| **Data Store** | `#1a1a2e` | `#6366F1` (indigo) | Database, folder, file |56| **Decision** | `#2e1a3d` | `#A855F7` (purple) | Question mark, fork |5758### Node Content5960Each node displays:61- **Icon** (emoji or SVG) at the top62- **Label** (2-4 words, bold)63- **Subtitle** (one short line describing what happens)6465### Connections and Interactivity6667**Lines:** Solid with arrowheads, color matches source node border, optional data label, animated dash on highlight.6869**Hover:** Node scales 1.05x, border glows, tooltip with step description.7071**Click:** Highlights node and direct connections, dims unconnected nodes, click background to reset.7273**Responsive:**74- Diagram scales to fit the viewport75- Works on desktop and tablet screens76- Nodes wrap or scroll on very small screens7778### Style Defaults7980Page bg `#0f0f0f`, container `#161616`, header text `#ffffff`, subtitle `#888888`, node text `#ffffff`, connections `#444444` (colored when highlighted). System sans-serif font, 12px border radius, 20px node padding, 160px min node width.8182Include a header (workflow name + description), the diagram container, and a color-coded legend (Blue=Triggers, Green=Processing, Amber=Tools, Red=Outputs, Indigo=Data Stores, Purple=Decisions). All styles and JS inline, no external dependencies.8384## Rules85861. **Every node must be a specific action, not a vague label.** "Process data" is bad. "Extract invoice total from PDF" is good872. **Connections must show what data flows between nodes.** Not just that they connect, but WHAT passes through883. **Decision points need labeled branches.** "Yes" and "No", or the specific conditions894. **No floating nodes.** Every node must connect to at least one other node905. **Dark background always.** Light mode diagrams wash out and look less professional916. **Max 20 nodes per diagram.** If the workflow is bigger, split into sub-diagrams927. **Self-contained HTML.** No external CSS, JS, or image dependencies. Must work offline9394## Example Usage9596- "Visualize this workflow: new lead from website form, added to CRM, sales gets Slack notification"97- "Map out this system: Claude writes drafts, Grammarly checks, Google Docs for review"98- "Diagram my workflow: check email, triage urgent vs non-urgent, route to Slack or Notion"99100## Tips for Best Results101102- Describe your workflow step by step in plain language103- Mention every tool or service involved by name104- Include any conditions or branches ("if X then Y, otherwise Z")105- The more detail you give, the more accurate the diagram will be
Hassaan146