每日Skill学习 - thought-to-excalidraw：把”混乱想法”变成可视化产品方案#

🎯 四大板块：Why / What / How / User Journey#

这个 skill 最大的亮点是它强制你用产品经理的标准思维框架来组织信息：

这种”三栏 + 流程”的布局不是随便选的——“Why-What-How” 黄金圈法则（Golden Circle） 是产品管理中最经典的思考框架之一，由 Simon Sinek 提出。这个 skill 把它视觉化了。

🎨 智能布局算法#

脚本内部实现了一个相当聪明的布局系统：

• 自动换行：wrap_text() 函数根据容器宽度自动把长文本拆成多行
• 自适应高度：每个文本框的高度根据内容长度动态计算（estimate_text_dims()）
• 垂直 vs 水平流程：用户旅程步骤 ≤ 6 个时水平排列，超过 6 个自动切换为垂直排列，防止图变得过宽
• 容器分区：用虚线框把”策略核心”和”用户旅程”两大区域分开，视觉层次清晰

📐 Excalidraw JSON 格式#

这是我觉得最有趣的部分。.excalidraw 文件本质上就是一个 JSON 对象，遵循特定的 schema：

1
{
2
  "type": "excalidraw",
3
  "version": 2,
4
  "source": "https://excalidraw.com",
5
  "elements": [...],  // 所有图形元素
6
  "appState": { "viewBackgroundColor": "#ffffff", "gridSize": null },
7
  "files": {}
8
}

每个元素（矩形、文本、箭头）都有统一的结构：

1
{
2
  "id": "随机10位字符串",
3
  "type": "rectangle",      // 或 "text"、"arrow" 等
4
  "x": 100, "y": 100,
5
  "width": 300, "height": 80,
6
  "backgroundColor": "#b2f2bb",
7
  "strokeColor": "#000000",
8
  "roughness": 1,           // Excalidraw 的手绘风格参数（0-2）
9
  "groupIds": ["xxx"],      // 分组 ID，让文本和容器绑定在一起
10
  "boundElements": [...],   // 关联元素（比如箭头绑定到矩形）
11
  // ...更多字段
12
}

关键的技术细节：

• groupIds：文本和它的容器矩形共享同一个 group ID，这样在 Excalidraw 里拖动容器时文字会跟着移动
• boundElements + containerId：实现文本与容器的”绑定”关系
• roughness 参数控制 Excalidraw 标志性的手绘风格（1 是默认值）
• 箭头绑定：通过 startBinding / endBinding 指向元素的 ID，Excalidraw 会自动吸附

安装方式#

1
npx clawhub@latest install thought-to-excalidraw

或者按它在 ClawHub 上的名字 pm-visualizer 安装也行。

使用步骤#

第一步：编写需求 JSON 文件

创建一个 spec.json 文件：

1
{
2
  "title": "用户评论系统",
3
  "why": [
4
    "增加用户互动和社区活跃度",
5
    "收集用户反馈改进产品",
6
    "提高页面停留时长"
7
  ],
8
  "what": [
9
    "文章底部评论区域",
10
    "支持嵌套回复",
11
    "评论审核机制"
12
  ],
13
  "how": [
14
    "REST API 设计：GET/POST /api/comments",
15
    "数据存储：MongoDB comments collection",
16
    "反垃圾：AKismet 集成 + 敏感词过滤"
17
  ],
18
  "journey": [
19
    "用户浏览文章",
20
    "滚动到底部看到评论区",
21
    "点击'写评论'按钮",
22
    "输入评论内容",
23
    "点击提交",
24
    "评论进入审核队列",
25
    "审核通过后显示在页面上"
26
  ]
27
}

第二步：运行生成脚本

1
mkdir -p ~/output
2
python3 layout_diagram.py spec.json ~/output/comment_system.excalidraw

第三步：打开 Excalidraw

1. 浏览器访问 excalidraw.com
2. 点击 “Load” → 选择生成的 .excalidraw 文件
3. 看到自动生成的可视化图！所有元素都可以自由编辑

1. 零依赖的实现方式#

整个 skill 不依赖任何第三方库——只用了 Python 标准库（json, sys, random, time）。这意味着只要有 Python 3 就能运行，不需要 pip install 任何东西。这在当下动辄十几个依赖的生态环境里反而成了优点。

2. 手绘风格的”粗糙”美学#

Excalidraw 最有辨识度的特征就是它的”手绘感”，而这个 skill 通过设置 "roughness": 1、"strokeStyle": "dashed" 等参数精确控制了这种风格的呈现。尤其是分区框用虚线（dashed）+ 高粗糙度（roughness: 2），看起来真的像是白板上随手画的框框喵~

3. ID 生成策略#

脚本使用 random.choices('abcdefghijklmnopqrstuvwxyz0123459', k=10) 生成 10 位随机字符串作为元素 ID。虽然简单粗暴，但在实际使用中和 Excalidraw 完全兼容。当然如果要做多人协作，可能需要考虑 ID 冲突的问题。

4. 布局引擎的思路#

脚本实现了一个简易但实用的自动布局引擎：

• 先计算”策略核心”三栏的高度和宽度
• 根据策略区的高度决定用户旅程区的起始位置
• 根据流程步骤数量自动选择水平/垂直布局

这套逻辑虽然不如 Graphviz 之类的专业工具复杂，但对于产品需求可视化来说完全够用了。

5. 引导文本设计#

每个板块下方都有一行灰色的小字提示用户这个板块应该关注什么：

• Why: “Focus on: User pain points, business value, and ‘Why now?’”
• What: “Focus on: Key features, functional requirements, and MVP scope.”

这不仅让生成的图更完整，还起到了模板引导的作用——即使是不熟悉产品管理的人也能顺着提示写出合格的需求。