Jaxton07 mindmap
把任意内容提炼成「中心主题 + 左右分支」的脑图，输出单文件 HTML：深色主题、SVG 贝塞尔曲线连接、画布固定窗口大小、滚轮缩放、拖拽平移。所有脑图共用同一套视觉语言，样式与交互只在 scripts/generate_mindmap.py 里维护。
When to Use
触发：
- 用户说「画个脑图 / 思维导图 / mind map」
- 用户想把架构、流程、知识体系整理成「看一眼就记住」的结构图
- 已有成块内容（代码理解、文档、会议结论）需要框架化呈现
不适用：
- 内容以先后时序为主（一步一步的流程关系）→ 时序长页 / 流程图更合适，脑图会丢掉流向
- 内容归纳不出单一中心主题（说明还没想清楚，先和用户讨论结构）
Iron Rules
- 不手改生成的 HTML。样式、布局、交互只改
scripts/generate_mindmap.py，改完重新生成。直接在产物 HTML 上打补丁会让不同脑图之间样式漂移。 - 先归纳，再画图。JSON 里每个节点都必须来自对源材料的真实理解；不允许为了对称或填满分支编造节点。源材料不够就先读够再画。
- 一张图一个中心。中心主题 ≤ 12 个字说清本质，副标题一行补充。
- 控制容量：分支总数 ≤ 7，每个分支 3–8 个子节点，子节点 ≤ 28 字（推荐「关键词 · 说明」格式）。塞不下就向上归纳合并，不要缩字号、不要堆二级子节点。
- 输出路径先问用户。用户没有明确说产物生成到哪里时，先询问输出路径，不要默认写进当前目录或临时目录。
- 必须截图验证。生成后用无头浏览器截图并亲眼看一遍：连线交叉、节点遮挡、文字溢出、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 条）。
# 脚本位于本 skill 目录的 scripts/ 下，以 skill 目录为工作目录运行
python3 scripts/generate_mindmap.py input.json -o <用户确认的输出路径>.html
脚本行为：
- 自动布局：画布高度按内容计算，左右分支各自垂直居中，根节点居中
- 输出前自检 HTML 标签配对，异常直接报错退出
- 对超长文本 / 分支过多打印 WARNING（不阻断，由你判断是否回去归纳改写 JSON）
3. 截图验证
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
{
"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 请求的一生