mindmaplisted

# 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 标签配对，异常直接报错退