# Mindmap

> Use when the user wants to turn content (architecture, processes, knowledge frameworks, meeting conclusions, notes) into a mind map / 脑图 / 思维导图, rendered as a single self-contained HTML page with the established dark radial style, fixed-size canvas, wheel-zoom and drag-pan interactions.

- Skill: `jaxton07/mindmap` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add jaxton07/mindmap`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jaxton07/mindmap/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Jaxton07 (https://skillmd.com/u/jaxton07)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jaxton07/mindmap

---


# mindmap

把任意内容提炼成「中心主题 + 左右分支」的脑图，输出单文件 HTML：深色主题、SVG 贝塞尔曲线连接、画布固定窗口大小、滚轮缩放、拖拽平移。所有脑图共用同一套视觉语言，样式与交互只在 `scripts/generate_mindmap.py` 里维护。

## When to Use

触发：
- 用户说「画个脑图 / 思维导图 / mind map」
- 用户想把架构、流程、知识体系整理成「看一眼就记住」的结构图
- 已有成块内容（代码理解、文档、会议结论）需要框架化呈现

不适用：
- 内容以先后时序为主（一步一步的流程关系）→ 时序长页 / 流程图更合适，脑图会丢掉流向
- 内容归纳不出单一中心主题（说明还没想清楚，先和用户讨论结构）

## Iron Rules

1. **不手改生成的 HTML**。样式、布局、交互只改 `scripts/generate_mindmap.py`，改完重新生成。直接在产物 HTML 上打补丁会让不同脑图之间样式漂移。
2. **先归纳，再画图**。JSON 里每个节点都必须来自对源材料的真实理解；不允许为了对称或填满分支编造节点。源材料不够就先读够再画。
3. **一张图一个中心**。中心主题 ≤ 12 个字说清本质，副标题一行补充。
4. **控制容量**：分支总数 ≤ 7，每个分支 3–8 个子节点，子节点 ≤ 28 字（推荐「关键词 · 说明」格式）。塞不下就向上归纳合并，不要缩字号、不要堆二级子节点。
5. **输出路径先问用户**。用户没有明确说产物生成到哪里时，先询问输出路径，不要默认写进当前目录或临时目录。
6. **必须截图验证**。生成后用无头浏览器截图并亲眼看一遍：连线交叉、节点遮挡、文字溢出、JS 是否生效，都要确认。

## Workflow

### 1. 提炼结构，写 JSON 定义

通读源材料后归纳成「中心 + 左右两侧分支」，写成一个 JSON 文件（schema 见文末，完整示例见 `examples/http-request-lifecycle.json`）。

内容设计要点：

- **principle 一句话口诀**：标题正下方放记忆框架，例如「一张快照、一条主线 → 3 模式 / 8 闸口 / 4 暂停」，让人先看口诀再看图。支持 `**加粗**`。
- **右侧放主线 / 流程，左侧放结构 / 分类**；内容多的一侧放右边。
- **有顺序含义的分支设 `"numbered": true`**：子节点自动带数字徽章，编号即阅读顺序（如「主链路 8 步」「协议 4 层」）。
- **颜色自动分配**：按 右→左 顺序从调色板取色，通常不用显式指定；分支可写 `"color": "#hex"` 覆盖。
- **图例名自动取** label 第一个 `·` 前的部分，可用 `"legend"` 显式覆盖。

### 2. 确认输出路径，运行生成脚本

如果用户没有明确指定产物的输出路径，**先询问用户**再执行（见 Iron Rules 第 5 条）。

```bash
# 脚本位于本 skill 目录的 scripts/ 下，以 skill 目录为工作目录运行
python3 scripts/generate_mindmap.py input.json -o <用户确认的输出路径>.html
```

脚本行为：
- 自动布局：画布高度按内容计算，左右分支各自垂直居中，根节点居中
- 输出前自检 HTML 标签配对，异常直接报错退出
- 对超长文本 / 分支过多打印 WARNING（不阻断，由你判断是否回去归纳改写 JSON）

### 3. 截图验证

```bash
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
"$CHROME" --headless --disable-gpu --screenshot=/tmp/mindmap-check.png \
  --window-size=1600,1000 --hide-scrollbars "file://$(pwd)/output.html"
```

用 Read 看截图，逐项检查：
- **整图是否居中适配**：正常说明 JS 生效；若看到未缩放的巨图被裁切，说明 JS 报错，检查生成日志
- 曲线与节点是否遮挡、文字是否溢出节点边框
- 分支颜色与图例是否一致
- 窗口换成更小尺寸（如 `--window-size=1200,800`）再截一张，确认自动适配

有问题改 JSON 或脚本后重新生成，**不要**改产物 HTML。

### 4. 交付

告知用户：输出路径 + 交互方式（滚轮缩放、拖拽平移、双击复位、右上角 ＋/−/适应 按钮）。

## JSON Schema

```json
{
  "title": "页面大标题（h1，必填）",
  "kicker": "顶部小字（可选，如英文领域标识）",
  "principle": "标题下方的一句话记忆框架（可选，支持 **加粗**）",
  "root": { "title": "中心主题 ≤ 12 字", "sub": "一行副标题" },
  "footer": "底部注（可选，支持 **加粗**）",
  "right": [
    {
      "label": "分支名（父节点，建议 ≤ 12 字）",
      "legend": "图例短名（可选）",
      "color": "#58a6ff（可选，默认按调色板顺序分配）",
      "numbered": true,
      "children": ["子节点，≤ 28 字，推荐「关键词 · 说明」"]
    }
  ],
  "left": [ "结构同 right，可为空数组" ]
}
```

布局由脚本固定：子节点宽 320px、纵向间距 46px；分支父节点宽 200px；根节点居中。无需也不应手工指定坐标。

## Files

- `scripts/generate_mindmap.py` — 唯一的样式 / 布局 / 交互实现（纯标准库，零依赖）
- `examples/http-request-lifecycle.json` — 完整参考示例：一次 HTTP 请求的一生