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

```html
<!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-d