生成交互式思维导图

SKILL前端设计

原名 Generate Mindmap · 标识 mindmap

前端设计 未标注权限 许可证不明确
安装这个技能

根据 Markdown 大纲或 JSON 输入生成思维导图,一条命令导出可编辑 HTML、PNG、JPG、SVG、PDF、XMind 等格式,提供多种布局与深浅主题,并附带结构质检

一句话选型结论

按资料字段整理

生成交互式思维导图是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install zcwl/generate-mindmap
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方zcwl仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 enterprise
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验2026-11-06上游最后核验时间 · 数据更新 2026-11-06
正文体量8.2 KBSKILL.md 原文大小,越大说明说明书写得越细

能做什么

0 项能力
上游给出的能力概览与适用场景
大纲整理成导图导出多格式图稿检查导图结构质量

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
生成交互式思维导图当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

8.2 KB
模型实际读到的说明书原文,来自技能仓库

Mind Map Generator — 思维导图生成器

把内容提炼成放射状知识结构,一条命令导出多种格式。核心特色:

  • Markdown 大纲直接输入 —— 不必手写 JSON,也没有 shell 引号转义问题
  • 一次生成多格式 —— --format html,png,xmind 一条命令搞定
  • 深空 / 纸墨双主题 —— --theme midnight|paper,HTML 内还有 🌓 一键切换
  • 结构质检报告 —— 自动按认知负荷·双重编码·渐进分化·MECE·概念图关系等原则检查,输出改进建议
  • 交互式 HTML —— 双击编辑、Enter 加兄弟 / Tab 加子节点、拖到另一节点上改挂父子关系、拖到空白处按位置重排兄弟顺序(拖动后始终自动整齐布局,不会拉乱连线)、拖根平移全图、8 种布局、右键菜单;节点标签超过 20 字符自动省略(…)保持版面整洁,双击节点在编辑框中查看并修改完整内容;点「HTML」按钮绑定文件后,之后每次改动自动写回该 HTML 文件(Chrome/Edge),不支持时回退为下载含全部编辑的自包含文件

快速开始(推荐工作流)

第一步:按 内容设计方法 提炼结构,写入一个 Markdown 大纲文件(避免把内容塞进 shell 参数——引号和特殊字符会出问题):

cat > /tmp/mindmap_outline.md << 'EOF'
# 中心洞见(一句话,不是话题标签)

## 🔬 维度一 [#4A90D9]
- 具体证据 A
- 量化数据 B
  - 更具体的事实

## 💰 维度二 [#27AE60]
- 证据 C
- 证据 D
EOF

语法规则:# 一级标题 = 中心节点;## = 主分支(可在行尾用 [#十六进制] 指定颜色);- 列表按缩进(2 空格一层)嵌套为子节点。也可以省略 # 标题,此时 --title 会作为中心节点。

第二步:一条命令生成全部格式:

python3 {baseDir}/generate_mindmap.py \
  --title "主题名" \
  --format html,png,xmind \
  --data-file /tmp/mindmap_outline.md \
  --output "主题名.html"

--output 只需给一个路径,其余格式自动换扩展名。省略 --output 时自动选择输出目录:$MINDMAP_OUTPUT_DIR → /mnt/user-data/outputs(Claude 沙箱)→ ~/.openclaw/workspace(OpenClaw)→ 当前目录。

第三步:查看 stderr 中的质检报告(📋 一行摘要 + ⚠ 警告)。如出现警告(分支超过 6 个、总节点超 40、标签过长、单子节点分支等),先修改大纲再重新生成,不要把警告丢给用户。

第四步:向用户汇报,必须包含脚本 stdout 中 ✅ ... → 路径 的完整绝对路径,并说明各格式用途:HTML 浏览器打开可交互编辑(双击改文字、Enter 加兄弟节点、Tab 加子节点、把一个节点拖到另一个节点上可改变其父子归属、拖动中心节点平移整图、右上角切主题;点「HTML」按钮绑定文件后,在 Chrome/Edge 中之后的改动会自动保存回该文件,其它浏览器则每次点按钮另存为含全部改动的新文件)、PNG 直接嵌入文档分享、XMind 可在 XMind 软件继续编辑。

输入格式

Markdown 大纲(首选,见上)。JSON(需要精确控制时):

{
  "central": "核心洞见",
  "branches": [
    {"label": "🔬 维度一", "color": "#4A90D9",
     "children": ["证据A", {"label": "证据B", "children": ["事实1", "事实2"]}]}
  ]
}

JSON 也通过 --data-file 传入(自动识别 JSON / Markdown);--data-file - 读 stdin;--data '...' 仅限极短内容。主分支若缺 emoji,脚本会按语义关键词自动补充。

命令参考

参数 说明
--title 必填。导图标题(大纲无 # 标题时兼作中心节点)
--data-file 数据文件路径(JSON 或 Markdown),- 为 stdin
--data 内联数据字符串(仅限短内容)
--format 逗号分隔多格式:html,svg,png,jpg,pdf,xmind(默认 html)
--theme midnight 深空(默认)/ paper 纸墨(适合打印、白底文档)
--output 输出路径;多格式时自动换扩展名;省略则用自适应工作目录
--scale PNG/JPG/PDF 像素密度,默认 2.0
--quality JPG 质量 1–100,默认 92
--no-lint 关闭质检报告
--no-auto-install 禁止自动安装 Pillow,仅打印安装指引

内容设计四步法

完整的认知科学依据(Buzan 放射性思考、Paivio 双重编码、Miller/Sweller 认知负荷、语义网络、Ausubel 渐进分化、MECE 完全穷尽、Novak 概念图关系)与详细规范见 {baseDir}/references/methodology.md——生成前先读它。执行时的硬约束:

  1. 中心节点 = 核心洞见,不是话题标签。✅ "AI 正从工具变为协作者";❌ "AI 发展趋势"。
  2. 主分支 3–6 个 = 理解维度,不是原文章节。同级抽象层次一致,每个分支带一个不重复的 emoji,颜色与语义一致(蓝=机制、绿=成果、橙=问题、紫=背景、黄=资源、青=流程、红=警告)。定稿前做 MECE 自检:这些维度是否完全穷尽了主题、有无遗漏或重叠(总结类任务尤其关键)。
  3. 子节点 = 具体证据(机制、数据、案例、对比、行动、限制),每分支 2–5 个,优先可想象的具体词。渐进分化:从中心到叶子概括度逐层递减,不出现"子节点比父节点更宽泛"的倒挂。
  4. 节点 4–12 字、全图 ≤ 40 节点、≤ 4 层。主题内在复杂度过高时拆成多张图而非硬压缩。生成后核对质检报告(会提示 MECE、渐进分化、关系型表述等)。

关系表达(概念图):内容里若是因果/时序/对比/条件等非从属关系,别硬塞进父子层级——因果优先鱼骨图、时序优先时间线,或在措辞里保留关系词("导致""优于""若…则"),避免把关系信息压扁丢失。

按内容类型选维度框架与布局:分析类"是什么·为什么·怎么做·结果"(左右均衡);问题解决"根因·影响·方案·评估"(鱼骨图);学习类"概念·机制·场景·误区";项目类"目标·策略·执行·风险"(树形);时间/流程类按顺序(时间线);头脑风暴自由发散(辐射/力导向)。布局在 HTML 中随时可切换。

依赖与故障排除

  • 零系统级 C 库依赖。 HTML/SVG/XMind 纯 Python;PNG/JPG/PDF 需 Pillow(pip install pillow)。若检测到 Playwright 则优先用它渲染 PNG/JPG(质量更高、保留 emoji)。
  • Pillow 缺失时脚本会尝试 pip install pillow(先普通安装、再 --user,绝不使用 --break-system-packages);在受管环境失败会打印指引。共享或锁定环境请加 --no-auto-install 并让用户自行安装。
  • Pillow 后备渲染会去掉 emoji(系统字体不含彩色 emoji);若用户在意 emoji 的图片效果,安装 Playwright 或让用户在 HTML 中用浏览器导出。
  • 中文乱码/方块:Pillow 渲染依赖系统 CJK 字体(微软雅黑 / PingFang / Noto CJK),Linux 无 CJK 字体时建议 apt install fonts-noto-cjk。

内置示例

{baseDir}/examples/:ai_trends.html、product_launch.html、python_learning.html(可直接用浏览器打开体验交互与主题切换),以及对应 .json 数据和 outline_example.md 大纲示例。

常见问题

5 问
答案由本站依据条目字段整理
生成交互式思维导图怎么安装?

在支持 Skills 的客户端里执行:skillhub install zcwl/generate-mindmap。安装方式为未标注。装完刷新技能列表或重开客户端。

生成交互式思维导图支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

生成交互式思维导图权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

生成交互式思维导图收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

生成交互式思维导图用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 2026-11-06。