/create-workflow-diagram

name: create-workflow-diagram
description: Create FigJam/Miro-style workflow diagrams as high-quality PNG images from plain-text workflow descriptions. Renders beautiful HTML diagrams with connected nodes, arrows, and labels, then screenshots them for sharing.

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>
        /* ===========================================