Create Workflow Diagram

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: