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-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%; z-index: 1; pointer-events: none; } /* Workflow node */ .node { position: absolute; width: var(--node-width); min-height: var(--node-min-height); padding: var(--node-padding); border-radius: var(--node-radius); box-shadow: var(--node-shadow); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; z-index: 2; border: 2px solid rgba(0,0,0,0.06); } .node-icon { font-size: var(--node-icon-size); line-height: 1; } .node-label { font-size: var(--node-title-size); font-weight: 700; color: var(--text-primary); line-height: 1.2; } .node-detail { font-size: var(--node-detail-size); font-weight: 500; color: var(--text-secondary); opacity: 0.8; } .node-step { position: absolute; top: -12px; left: -12px; width: 32px; height: 32px; border-radius: 50%; background: var(--text-primary); color: white; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Title overlay */ .diagram-title { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 32px; font-weight: 700; color: var(--text-primary); z-index: 3; text-align: center; } .diagram-subtitle { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 400; color: var(--text-secondary); z-index: 3; } </style> </head> <body> <div class="canvas-bg"></div> <!-- Optional title --> <div class="diagram-title">Lead Generation Pipeline</div> <div class="diagram-subtitle">Apollo → Clay → Claude → Smartlead</div> <div class="diagram"> <!-- SVG arrows connecting nodes --> <svg class="arrows-layer" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg"> <!-- Arrow from node 1 to node 2 --> <defs> <marker id="arrowhead" markerWidth="12" markerHeight="8" refX="10" refY="4" orient="auto"> <path d="M 0 0 L 12 4 L 0 8 Z" fill="var(--arrow-color)" /> </marker> </defs> <!-- Connection lines drawn between node centers --> <line x1="380" y1="490" x2="520" y2="490" stroke="var(--arrow-color)" stroke-width="3" stroke-dasharray="8,6" marker-end="url(#arrowhead)" /> <!-- Repeat for each connection --> </svg> <!-- Nodes --> <div class="node" style="left: 160px; top: 420px; background: var(--node-1);"> <span class="node-step">1</span> <span class="node-icon">🔍</span> <span class="node-label">Find Leads</span> <span class="node-detail">Apollo</span> </div> <div class="node" style="left: 560px; top: 420px; background: var(--node-2);"> <span class="node-step">2</span> <span class="node-icon">✨</span>