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>
        /* ===========================================
           WORKFLOW DIAGRAM
           =========================================== */
        :root {
            --diagram-width: 1920px;
            --diagram-height: 1080px;

            /* Colors (from chosen preset) */
            --bg-primary: #f5f5f0;
            : ;
            :    (,,,);
            : ;
            : ;
            : ;

            
            : ;  
            : ;  
            : ;  
            : ;  
            : ;  
            : ;  

            
            : , -apple-system, sans-serif;
            : ;
            : ;
            : ;

            
            : ;
            : ;
            : ;
            : ;
            : ;  
        }

        * {
            : ;
            : ;
            : border-box;
        }

        ,  {
            : (--diagram-width);
            : (--diagram-height);
            : hidden;
        }

         {
            : (--font-family);
            : (--bg-primary);
            : relative;
        }

        
         {
            : absolute;
            : ;
            : ;
            : (circle, (--bg-dot-color) , transparent );
            :  ;
            : ;
        }

        
         {
            : absolute;
            : ;
            : ;
            : ;
        }

        
         {
            : absolute;
            : ;
            : ;
            : ;
            : none;
        }

        
         {
            : absolute;
            : (--node-width);
            : (--node-min-height);
            : (--node-padding);
            : (--node-radius);
            : (--node-shadow);
            : flex;
            : column;
            : center;
            : center;
            : ;
            : ;
            :  solid (,,,);
        }

         {
            : (--node-icon-size);
            : ;
        }

         {
            : (--node-title-size);
            : ;
            : (--text-primary);
            : ;
        }

         {
            : (--node-detail-size);
            : ;
            : (--text-secondary);
            : ;
        }

         {
            : absolute;
            : -;
            : -;
            : ;
            : ;
            : ;
            : (--text-primary);
            : white;
            : ;
            : ;
            : flex;
            : center;
            : center;
        }

        
         {
            : absolute;
            : ;
            : ;
            : (-);
            : ;
            : ;
            : (--text-primary);
            : ;
            : center;
        }

         {
            : absolute;
            : ;
            : ;
            : (-);
            : ;
            : ;
            : (--text-secondary);
            : ;
        }
    


    

    
    Lead Generation Pipeline
    Apollo → Clay → Claude → Smartlead

    
        
        
            
            
                
                    
                
            
            
            
            
        

        
        
            1
            🔍
            Find Leads
            Apollo
        

        
            2
            ✨
            Enrich Leads
            Clay
        

        
    

Layout Algorithms

Left-to-Right (default for 4-8 steps):

Position each node evenly across the width:
- totalWidth = diagramWidth - (2 * margin)
- nodeSpacing = totalWidth / (nodeCount - 1)
- node[i].x = margin + (i * nodeSpacing) - (nodeWidth / 2)
- node[i].y = (diagramHeight / 2) - (nodeHeight / 2)

For the default 1920×1080 with 4 nodes:
- margin = 200px
- spacing = ~507px
- y = ~460px (vertically centered)

Top-to-Bottom (3-5 steps):

- totalHeight = diagramHeight - (2 * margin)
- nodeSpacing = totalHeight / (nodeCount - 1)
- node[i].y = margin + (i * nodeSpacing) - (nodeHeight / 2)
- node[i].x = (diagramWidth / 2) - (nodeWidth / 2)

Snake/Zigzag (6+ steps):

- maxPerRow = 4
- rowHeight = 250px
- For each row, alternate left-to-right and right-to-left
- Row 0: nodes flow →
- Row 1: nodes flow ←
- Row 2: nodes flow →
- Connect last node of row to first node of next row with vertical arrow

Arrow Drawing

Arrows are drawn as SVG lines between node edges:

// Calculate arrow coordinates between two nodes
function getArrowCoords(fromNode, toNode, direction) {
    if (direction === 'horizontal') {
        // Arrow from right edge of fromNode to left edge of toNode
        const x1 = fromNode.x + fromNode.width;
        const y1 = fromNode.y + fromNode.height / 2;
        const x2 = toNode.x;
        const y2 = toNode.y + toNode.height / 2;
        return { x1, y1, x2, y2 };
    }
    if (direction === 'vertical') {
        // Arrow from bottom of fromNode to top of toNode
        const x1 = fromNode.x + fromNode.width / 2;
        const y1 = fromNode.y + fromNode.height;
        const x2 = toNode.x + toNode.width / 2;
        const y2 = toNode.y;
        return { x1, y1, x2, y2 };
    }
}

For curved arrows (more FigJam-like), use SVG <path> with cubic bezier:

<path d="M 380,490 C 430,490 470,490 520,490"
      stroke="var(--arrow-color)" stroke-width="3"
      fill="none" stroke-dasharray="8,6"
      marker-end="url(#arrowhead)" />

For snake layout vertical connectors between rows:

<!-- Vertical connector from end of row 1 to start of row 2 -->
<path d="M 1500,550 C 1500,620 200,620 200,690"
      stroke="var(--arrow-color)" stroke-width="3"
      fill="none" stroke-dasharray="8,6"
      marker-end="url(#arrowhead)" />

Branching (Optional)

If the workflow has conditional branches:

Step 3: Qualify leads
  ├── Yes → Step 4a: Send to Smartlead
  └── No → Step 4b: Add to nurture sequence

Render as:

• Main node for step 3
• Two arrows diverging from step 3
• Label on each arrow ("Qualified" / "Not Qualified")
• Two destination nodes

<!-- Branch label on arrow -->
<text x="650" y="400" font-size="14" fill="var(--text-secondary)"
      font-family="Inter" font-weight="600">Qualified</text>

---

Phase 4: Screenshot Generation

After generating HTML, automatically capture a screenshot.

Using Playwright

cd /path/to/skills/create-workflow-diagram
node screenshot-diagram.js <diagram-name>

This will:

1. Open the diagram HTML in a headless browser
2. Set viewport to the diagram dimensions (e.g., 1920×1080)
3. Wait for fonts to load
4. Capture PNG screenshot at 2x resolution
5. Save to the diagram's exports/ directory

Installation

First time setup:

cd /path/to/skills/create-workflow-diagram
npm install

---

Phase 5: Delivery

After the screenshot is generated, present to user:

Your workflow diagram is ready!

HTML source: skills/create-workflow-diagram/[name]/diagram.html
PNG export: skills/create-workflow-diagram/[name]/exports/diagram.png

Preview: Open diagram.html in a browser to see the full diagram.

Diagram details:
- 4 workflow steps connected with arrows
- Style: FigJam Classic
- Size: 1920×1080px (landscape)
- File size: ~350 KB

Want to make any changes?

---

Node Sizing Rules

Keep nodes consistent and readable:

Element	Size
Node width	200-240px
Node min-height	110-140px
Node padding	20-28px
Icon	32-40px
Label font	20-24px, weight 700
Detail font	14-16px, weight 500
Step badge	28-34px circle
Arrow stroke	2-3px
Arrow gap	60-100px between nodes

Content Rules

Each node should have:

1. Step number — Badge in top-left corner
2. Icon — Relevant emoji (auto-assigned from keyword)
3. Label — Action in 2-4 words (e.g., "Find Leads")
4. Detail — Tool/platform name (e.g., "Apollo") — optional

If a label is too long, truncate or split across lines. Max 2 lines for label.

---

Troubleshooting

Nodes Overlap

Solution: Increase --node-gap or switch to snake layout for many nodes.

Arrows Misaligned

Solution: Recalculate arrow start/end points based on actual node positions. Use the center of the node edge closest to the target.

Fonts Not Loading

Solution: Add await page.waitForLoadState('networkidle') before screenshot. Increase timeout to 1000ms.

Diagram Too Crowded

Solution: Reduce node count by combining steps, switch to a larger canvas size, or use snake layout.

---

Style Quick Reference

Preset	Best For	Vibe
FigJam Classic	General workflows	Friendly, colorful
Blueprint	Technical processes	Professional, dark
Minimal White	Documentation	Clean, corporate
Neon Flow	Tech/AI workflows	Futuristic, bold
Pastel Board	Presentations	Soft, approachable

See STYLE_PRESETS.md for complete styling details.

---

Related Skills

• create-html-carousel — For multi-slide LinkedIn carousels
• frontend-slides — For full HTML presentations

---

Example Session Flow

1. User: "Create a diagram for: Find leads on Apollo → Enrich with Clay → Qualify with Claude → Send to Smartlead"
2. Skill asks: layout direction, size, style
3. User picks defaults (left-to-right, landscape, FigJam Classic)
4. Skill parses 4 nodes with auto-icons
5. Skill generates HTML diagram with positioned nodes and SVG arrows
6. Skill runs screenshot script
7. Skill delivers PNG file
8. User shares in Slack/docs/LinkedIn

Total time: 2-5 minutes from description to exported diagram.