create-workflow-diagram

Workflow Diagram Creator

Create FigJam/Miro-style workflow diagrams as PNG images. This skill takes a plain-text workflow description and generates a styled HTML diagram with connected nodes, directional arrows, and labels — then automatically screenshots it for sharing in docs, Slack, LinkedIn, or presentations.

Core Philosophy

1. Visual Clarity — Each step is a distinct node with clear connections
2. FigJam/Miro Aesthetic — Colorful, rounded, friendly diagram style
3. Automated Export — Generate HTML → Screenshot → PNG ready to share
4. Smart Layout — Automatically arranges nodes in logical flow patterns
5. One-Command — Describe workflow in plain text, get a polished diagram

Output Specs

Format: PNG image

• Default size: 1920×1080px (landscape, presentation-friendly)
• Alternative sizes: 1080×1080px (square, LinkedIn), 1200×630px (blog/social)
• File format: PNG
• File size: Under 5MB

When to Use This Skill

Use for workflow/process diagrams like:

• "Find leads on Apollo → Enrich with Clay → Qualify with Claude → Send to Smartlead"
• "User signs up → Onboarding email → Trial → Upgrade prompt → Paid"
• "PR opened → CI runs → Review → Approve → Merge → Deploy"
• "Scrape data → Clean → Enrich → Score → Route to CRM"

NOT for:

• Org charts or hierarchy diagrams (use a tree layout tool)
• Complex flowcharts with many branches (use draw.io)
• Data architecture diagrams (use Mermaid or similar)
• Simple text lists (just use bullet points)

Workflow Overview

1. Content Input → User describes the workflow in plain text
2. Parse Steps → Extract nodes, connections, and labels
3. Style Selection → Choose visual style
4. HTML Generation → Create positioned diagram with SVG arrows
5. Screenshot → Auto-capture as PNG
6. Delivery → PNG file ready to share

Phase 1: Content Discovery

Step 1.1: Get Workflow Description

Ask the user:

Question 1: What's the workflow?

• Header: "Workflow"
• Question: "Describe the workflow steps. Use arrows (→) or numbers to show the flow."
• (Free text input)
• Examples:
• "1. Find leads on Apollo → 2. Enrich with Clay → 3. Qualify with Claude → 4. Send to Smartlead"
• "Scrape Reddit → Filter relevant posts → Draft comments → Send to Slack for review → Post"

Question 2: Layout Direction

• Header: "Layout"
• Question: "How should the diagram flow?"
• Options:
• "Left to Right" — Horizontal flow (default, best for 4-8 steps)
• "Top to Bottom" — Vertical flow (best for 3-5 steps)
• "Snake/Zigzag" — Wraps to next row (best for 6+ steps)

Question 3: Diagram Size

• Header: "Size"
• Question: "What size works best for your use case?"
• Options:
• "Landscape (1920×1080)" — Presentations, docs, Slack (default)
• "Square (1080×1080)" — LinkedIn, social media
• "Wide (1200×630)" — Blog headers, social cards

Step 1.2: Parse the Workflow

Extract structured data from the user's description:

Input: "1. Find leads on Apollo → 2. Enrich with Clay → 3. Qualify with Claude → 4. Send to Smartlead via API"

Parsed:
nodes:
  - id: 1, label: "Find leads", detail: "Apollo", icon: "🔍"
  - id: 2, label: "Enrich leads", detail: "Clay", icon: "✨"
  - id: 3, label: "Qualify leads", detail: "Claude", icon: "🤖"
  - id: 4, label: "Send to Smartlead", detail: "via API", icon: "📤"

connections:
  - from: 1, to: 2
  - from: 2, to: 3
  - from: 3, to: 4

Parsing rules:

• Split on →, ->, >, numbered lists, or line breaks
• Extract the primary action (label) and the tool/platform (detail)
• Auto-assign relevant emoji icons based on the action
• Detect branching if words like "if", "or", "else" appear

Icon assignment heuristics: | Action keyword | Icon | |---------------|------| | find, search, discover | 🔍 | | enrich, enhance, augment | ✨ | | qualify, score, filter | 🎯 | | send, email, outreach | 📤 | | scrape, crawl, extract | 🕷️ | | analyze, research | 📊 | | review, approve | ✅ | | deploy, ship, launch | 🚀 | | store, save, database | 💾 | | AI, Claude, GPT | 🤖 | | alert, notify, Slack | 🔔 | | clean, transform | 🧹 | | merge, combine | 🔗 | | schedule, automate | ⏰ |

Phase 2: Style Selection

Style Options

Question: Pick a Style

• Header: "Style"
• Question: "Which visual style?"
• Options:
• "FigJam Classic" — Colorful sticky-note nodes on dotted canvas (default)
• "Blueprint" — Technical dark theme with grid lines
• "Minimal White" — Clean white with thin borders and subtle shadows
• "Neon Flow" — Dark background with glowing neon connections
• "Pastel Board" — Soft pastel nodes on light background

See STYLE_PRESETS.md for full details on each style.

Phase 3: Generate HTML Diagram

File Structure

skills/create-workflow-diagram/[diagram-name]/
├── diagram.html               # Full diagram page
└── exports/
    └── diagram.png            # Screenshot (generated in Phase 4)

HTML Architecture

The diagram is built with pure HTML/CSS using absolute positioning for nodes and SVG for arrows.

CRITICAL: Use absolute positioning for precise node placement. Use SVG overlay for arrows/connections.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Workflow Diagram</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        /* ===========================================
           WORKFLOW DIAGRAM
           =========================================== */
        :root {
            --diagram-width: 1920px;
            --diagram-height: 1080px;

            /* Colors (from chosen preset) */
            --bg-primary: #f5f5f0;
            --bg-dot-color: #d4d4d0;
            --node-shadow: 0 4px 12px rgba(0,0,0,0.08);
            --arrow-color: #666;
            --text-primary: #1a1a1a;
            --text-secondary: #666;

            /* Node colors (cycle through for each node) */
            --node-1: #FFE066;  /* Yellow */
            --node-2: #A8D8EA;  /* Blue */
            --node-3: #C3F0CA;  /* Green */
            --node-4: #F0B4D4;  /* Pink */
            --node-5: #D4BAFF;  /* Purple */
            --node-6: #FFB366;  /* Orange */

            /* Typography */
            --font-family: 'Inter', -apple-system, sans-serif;
            --node-title-size: 22px;
            --node-detail-size: 15px;
            --node-icon-size: 36px;

            /* Node dimensions */
            --node-width: 220px;
            --node-min-height: 120px;
            --node-padding: 24px;
            --node-radius: 16px;
            --node-gap: 80px;  /* gap between nodes for arrows */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: var(--diagram-width);
            height: var(--diagram-height);
            overflow: hidden;
        }

        body {
            font-family: var(--font-family);
            background: var(--bg-primary);
            position: relative;
        }

        /* Dotted grid background (FigJam-style) */
        .canvas-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle, var(--bg-dot-color) 1.2px, transparent 1.2px);
            background-size: 24px 24px;
            z-index: 0;
        }

        /* Diagram container */
        .diagram {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* SVG arrow layer */
        .arrows-layer {
            position: absolute;
            width: 100%;
            height: 100%;