create-workflow-diagram

工作流图创建器

创建类似 FigJam/Miro 风格的工作流图，并导出为 PNG 图片。此技能会根据纯文本工作流描述，生成带有连接节点、方向箭头和标签的样式化 HTML 图表，然后自动截图，方便分享到文档、Slack、LinkedIn 或演示文稿中。

核心理念

1. 视觉清晰 — 每个步骤都是独立节点，连接关系清晰
2. FigJam/Miro 风格 — 色彩丰富、圆角友好的图表样式
3. 自动导出 — 生成 HTML → 截图 → 导出可直接分享的 PNG
4. 智能布局 — 自动按照逻辑流程排列节点
5. 一条命令 — 用纯文本描述工作流，即可获得精美图表

---

输出规格

格式： PNG 图片

• 默认尺寸： 1920×1080px（横向，适合演示）
• 其他尺寸： 1080×1080px（正方形，适合 LinkedIn）、1200×630px（适合博客/社交媒体）
• 文件格式： PNG
• 文件大小： 小于 5MB

---

何时使用此技能

适用于以下工作流/流程图：

• “在 Apollo 上寻找潜在客户 → 使用 Clay 补充信息 → 使用 Claude 评估 → 发送到 Smartlead”
• “用户注册 → 发送引导邮件 → 试用 → 提示升级 → 付费”
• “创建 PR → 运行 CI → 审查 → 批准 → 合并 → 部署”
• “抓取数据 → 清理 → 补充信息 → 评分 → 路由到 CRM”

不适用于：

• 组织结构图或层级图（使用树形布局工具）
• 包含多个分支的复杂流程图（使用 draw.io）
• 数据架构图（使用 Mermaid 或类似工具）
• 简单文本列表（直接使用项目符号）

---

工作流概览

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

---

阶段 1：内容探索

步骤 1.1：获取工作流描述

询问用户：

问题 1：工作流是什么？

• 标题：“工作流”
• 问题：“描述工作流步骤。使用箭头（→）或数字表示流程。”
• （自由文本输入）
• 示例：
  • “1. 在 Apollo 上寻找潜在客户 → 2. 使用 Clay 补充信息 → 3. 使用 Claude 评估 → 4. 发送到 Smartlead”
  • “抓取 Reddit 内容 → 筛选相关帖子 → 起草评论 → 发送到 Slack 进行审查 → 发布”

问题 2：布局方向

• 标题：“布局”
• 问题：“图表应按什么方向流动？”
• 选项：
  • “从左到右” — 水平流程（默认，适合 4-8 个步骤）
  • “从上到下” — 垂直流程（适合 3-5 个步骤）
  • “蛇形/之字形” — 自动换到下一行（适合 6 个以上步骤）

问题 3：图表尺寸

• 标题：“尺寸”
• 问题：“哪种尺寸最适合你的用途？”
• 选项：
  • “横向（1920×1080）” — 演示文稿、文档、Slack（默认）
  • “正方形（1080×1080）” — LinkedIn、社交媒体
  • “宽幅（1200×630）” — 博客标题图、社交卡片

步骤 1.2：解析工作流

从用户的描述中提取结构化数据：

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

解析规则：

• 按 →、->、>、编号列表或换行符拆分
• 提取主要操作（标签）和工具/平台（详情）
• 根据操作自动分配相关表情符号图标
• 如果出现 “if”、“or”、“else” 等词，则检测分支

图标分配启发规则：

操作关键词	图标
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	⏰

---

阶段 2：样式选择

样式选项

问题：选择一种样式

• 标题：“样式”
• 问题：“你想要哪种视觉样式？”
• 选项：
  • “FigJam Classic” — 彩色便签节点，置于点状画布上（默认）
  • “Blueprint” — 带网格线的深色技术主题
  • “Minimal White” — 简洁白色背景，搭配细边框和柔和阴影
  • “Neon Flow” — 深色背景，搭配发光霓虹连接线
  • “Pastel Board” — 浅色背景上的柔和粉彩节点

有关每种样式的完整详情，请参阅 STYLE_PRESETS.md。

---

阶段 3：生成 HTML 图表

文件结构

skills/create-workflow-diagram/[diagram-name]/
├── diagram.html               # Full diagram page
└── exports/
    └── diagram.png            # Screenshot (generated in Phase 4)

HTML 架构

该图表使用纯 HTML/CSS 构建，通过绝对定位放置节点，并使用 SVG 绘制箭头。

重要：使用绝对定位精确放置节点。使用 SVG 覆盖层绘制箭头/连接线。

<!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>

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

    
    <div class="diagram-title">Lead Generation Pipeline</div>
    <div class="diagram-subtitle">Apollo → Clay → Claude → Smartlead</div>

    <div class="diagram">
        
        <svg class="arrows-layer" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
            
            <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>
            
            <line x1="380" y1="490" x2="520" y2="490"
                  stroke="var(--arrow-color)" stroke-width="3"
                  stroke-dasharray="8,6" marker-end="url(#arrowhead)" />
            
        </svg>

        
        <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>
            <span class="node-label">Enrich Leads</span>
            <span class="node-detail">Clay</span>
        </div>

        
    </div>
</body>
</html>

布局算法

从左到右（4-8 个步骤时默认）：

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)

从上到下（3-5 个步骤）：

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

蛇形/之字形（6 个以上步骤）：

- 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

绘制箭头

箭头绘制为节点边缘之间的 SVG 线条：

// 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 };
    }
}

对于曲线箭头（更像 FigJam 的风格），使用带三次贝塞尔曲线的 SVG <path>：

<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)" />

对于蛇形布局中连接不同行的垂直连线：

<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)" />

分支（可选）

如果工作流包含条件分支：

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

绘制为：

• 步骤 3 的主节点
• 从步骤 3 分出的两个箭头
• 每个箭头上都标注标签（“合格”/“不合格”）
• 两个目标节点

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

---

阶段 4：生成截图

生成 HTML 后，自动截取屏幕截图。

使用 Playwright

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

此操作将：

1. 在无头浏览器中打开图表 HTML
2. 将视口设为图表尺寸（例如，1920×1080）
3. 等待字体加载
4. 以 2 倍分辨率截取 PNG 截图
5. 保存到图表的 exports/ 目录

安装

首次设置：

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

---

阶段 5：交付

生成截图后，向用户展示：

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?

---

节点尺寸规则

保持节点尺寸一致且清晰易读：

元素	尺寸
节点宽度	200-240px
节点最小高度	110-140px
节点内边距	20-28px
图标	32-40px
标签字体	20-24px，字重 700
详情字体	14-16px，字重 500
步骤徽标	28-34px 圆形
箭头描边	2-3px
箭头间距	节点之间 60-100px

内容规则

每个节点应包含：

1. 步骤编号 — 左上角的徽标
2. 图标 — 相关表情符号（根据关键词自动分配）
3. 标签 — 2-4 个词描述的操作（例如，“查找潜在客户”）
4. 详情 — 工具/平台名称（例如，“Apollo”）— 可选

如果标签过长，请截断或分行显示。标签最多 2 行。

---

故障排除

节点重叠

解决方案： 增大 --node-gap，或节点较多时切换为蛇形布局。

箭头未对齐

解决方案： 根据节点的实际位置重新计算箭头的起点/终点。使用最靠近目标的节点边缘中心点。

字体未加载

解决方案： 在截图前添加 await page.waitForLoadState('networkidle')。将超时时间增加到 1000ms。

图表过于拥挤

解决方案： 合并步骤以减少节点数量，切换为更大的画布尺寸，或使用蛇形布局。

---

样式速查

预设	最适合	风格
FigJam Classic	通用工作流	友好、色彩丰富
Blueprint	技术流程	专业、深色
Minimal White	文档	简洁、商务
Neon Flow	技术/AI 工作流	未来感、醒目
Pastel Board	演示文稿	柔和、亲切

完整样式详情请参阅 STYLE_PRESETS.md。

---

相关技能

• create-html-carousel — 用于多页 LinkedIn 轮播图
• frontend-slides — 用于完整的 HTML 演示文稿

---

示例会话流程

1. 用户：“创建一个图表：在 Apollo 上查找潜在客户 → 使用 Clay 丰富信息 → 使用 Claude 进行资格筛选 → 发送到 Smartlead”
2. 技能询问：布局方向、尺寸、样式
3. 用户选择默认值（从左到右、横向、FigJam Classic）
4. 技能解析出 4 个节点并自动分配图标
5. 技能生成带定位节点和 SVG 箭头的 HTML 图表
6. 技能运行截图脚本
7. 技能交付 PNG 文件
8. 用户分享到 Slack/文档/LinkedIn

总耗时：从描述到导出图表需 2-5 分钟。