知枝 · MindSprout：可以直接将 markdown 转换为思维导图的 vscode 插件

三十而立洋2026-10-23 17:18

知枝 · MindSprout 是一个 VS Code 思维导图扩展，支持编辑 .mindmap / .mindm 文件，也可以将当前打开的 Markdown 文件在右侧实时预览为思维导图。支持多种布局、表格、代码块、Mermaid 图表、虚线关联，以及 SVG / HTML / PNG 导出。

vscode 插件市场中直接检索：中文名 知枝 ，英文名 MindSprout。让零散想法生长为清晰的知识脉络。

一、操作演示

在 B 站观看操作演示

二、效果截图

三、新建并编辑导图

任选一种方式创建：

  • 在资源管理器中右键文件夹 ，选择 New MindSprout，在该文件夹中创建导图。
  • 按 Ctrl+Shift+P 打开命令面板，执行 New MindSprout。
  • 使用快捷键 Ctrl+Alt+M，macOS 为 Cmd+Alt+M。

命令面板和快捷键默认在工作区第一个文件夹中创建；没有工作区文件夹时弹出保存对话框。新文件名为 知枝.mindmap，重名时自动添加数字。

打开 .mindmap / .mindm 文件即可进入编辑画布。新导图只有一个空的中心节点，双击节点输入内容，再使用 Tab 添加子节点。修改会在约 0.8 秒后自动保存，也可使用 Ctrl+S 主动保存。

3.1 在右侧预览 Markdown

  1. 打开需要预览的 .md / .markdown 文件，并让其编辑器获得焦点。
  2. 点击 Markdown 编辑器右上角的 MindSprout 预览图标 ；也可在命令面板执行 Markdown: MindSprout。
  3. 导图预览显示在同一个 VS Code 窗口内、源文件右侧的编辑器组，源文件保留焦点。

预览读取当前编辑器中的内容，包括尚未保存的修改，并在原文变化后自动刷新。对同一文件再次执行命令，会复用已有预览。

这是只读预览 ：可以缩放、平移、折叠、切换布局与主题、使用小地图及导出；编辑内容请回到 Markdown 原文。预览不会改写源文件，也不会自动生成 .mindmap 文件。

3.2 导入 Markdown 后编辑

如果需要在导图中编辑 Markdown 内容，请先新建或打开一个 .mindmap 文件，再点击左侧工具栏 导入 Markdown ，选择 .md / .markdown 文件。

导入会替换当前导图内容，可以撤销恢复；空文件不会导入。后续编辑保存在导图文件中，不与原 Markdown 文件同步。

四、左侧图标工具栏

全部操作集中在左侧竖向 SVG 图标栏。鼠标移入或使用键盘聚焦图标时显示文字提示；展开/收起、缩放的提示随当前状态更新。形状、样式、主题和导出菜单从右侧展开，点击空白区域或按 Esc 关闭。小窗口下可滚动工具栏访问全部操作。

五、节点编辑

单击节点选择，双击或按 F2 编辑文本。节点旁的加号可新增子节点，折叠按钮可收起或展开分支。

右键节点可以执行：

  • 提升层级：将节点提升为父节点的同级；中心节点及其直接子节点不可继续提升。
  • 删除：删除当前节点，其子节点提升至原位置所在层级；中心节点不可删除。
  • 增加下一级：为当前节点添加子节点。
  • 添加关联线：连接到另一个节点。

拖拽节点到目标节点中部，可成为它的子节点；拖到目标节点上缘或下缘，可成为它前面或后面的同级节点。

六、快捷键

6.1 命令入口

操作 Windows / Linux macOS
新建导图（New MindSprout） Ctrl+Alt+M Cmd+Alt+M
打开命令面板 Ctrl+Shift+P Cmd+Shift+P
Markdown 导图预览 在命令面板执行 Markdown: MindSprout 同左

Markdown 预览暂未绑定专用快捷键。可在 VS Code"键盘快捷方式"中搜索 Markdown: MindSprout，为命令 mindsprout.markdownPreview 自行绑定。

6.2 节点操作

先单击节点选择，并让导图画布获得焦点。修改操作适用于可编辑导图，Markdown 只读预览不支持修改节点。

操作 快捷键
添加子节点 Tab
添加后一个 / 前一个同级节点 Enter / Shift+Enter
提升层级 Shift+Tab
编辑选中节点 F2 或双击节点
删除选中节点，子节点提升到原层级 Delete / Backspace
选择上一个 / 下一个可见节点 ↑ / ↓
进入子节点或返回父节点，展开或收起分支 ← / →，按当前分支方向执行

中心节点不可删除，也不能添加同级节点。未选中节点时，首次按 Tab 或 Enter 会先选中中心节点。

6.3 文本编辑、撤销与保存

操作 Windows / Linux macOS
提交正在编辑的文本 Enter Enter
文本换行 Shift+Enter Shift+Enter
取消当前文本编辑 Esc Esc
编辑时提交并添加子节点 Tab Tab
撤销 Ctrl+Z Cmd+Z
重做 Ctrl+Y / Ctrl+Shift+Z Cmd+Y / Cmd+Shift+Z
保存，并提交正在编辑的文本 Ctrl+S Cmd+S

6.4 画布与菜单

操作 Windows / Linux macOS
放大 Ctrl++ / Ctrl+= Cmd++ / Cmd+=
缩小 Ctrl+- Cmd+-
按鼠标位置缩放 Ctrl+滚轮 Cmd+滚轮
平移画布 滚轮，或拖拽空白区域 同左
切换聚焦的工具栏按钮 Tab / Shift+Tab（焦点在工具栏时） 同左
激活聚焦的工具栏按钮 Enter / Space 同左
关闭展开菜单或提示、取消关联线操作 Esc 同左
小地图获得焦点后平移视口 方向键 同左

Esc 的作用取决于当前状态；在普通节点选择状态下，还可收起当前分支或返回父节点。恢复 100%、适应窗口和全部节点展开/收起可使用左侧图标栏。

七、布局与画布导航

左侧工具栏 形状 菜单提供八种布局：标准（左右分布）、右向树、左向树、紧凑右向树、宽松右向树、目录结构、向下组织图、向上组织图。

  • 初次打开、导入 Markdown 及切换布局时以 100% 显示；点击左侧工具栏的恢复缩放图标可恢复 100%（悬停显示当前比例），点击 适应 查看全图。
  • 滚轮平移画布，Ctrl+滚轮 缩放，也可拖拽空白区域平移。
  • 点击 节点一键展开 展开全部层级，按钮变为 节点一键收起；再次点击后只显示中心节点。
  • 树状布局按节点、连线及外侧按钮所占空间排列，减少远端大表格或代码块造成的多余留白。
  • 同侧子节点为奇数时，父节点对齐中间子节点；偶数时对齐中间两个子节点中心的中点。上下组织图按横向中心对齐。

右下角小地图展示导图与当前视口。点击可定位，拖动视口框可平移；支持适应全图及收起/展开。小地图获得焦点后，也可使用方向键平移。

左侧工具栏菜单点击展开，点击空白区域、滚动画布或按 Esc 可关闭。

八、主题与样式

提供 科技蓝、清新绿、深色夜间 三种主题，在左侧工具栏 主题 菜单切换。

选中节点后，打开 样式 菜单，可以设置：

  • 画布背景颜色：支持色板、#RRGGBB 输入及恢复主题背景；随导图保存，支持撤销和重做，导出使用相同背景。
  • 分支线条颜色。
  • 节点文字颜色。
  • 文字粗细：常规、半粗、加粗。

颜色支持内置色板或完整的 #RRGGBB 色值。后代节点默认继承父级样式；单独设置过的后代保留自己的样式。点击 恢复继承父级样式 可移除当前节点的自定义设置，中心节点则恢复主题默认样式。

可编辑导图的样式修改支持保存、撤销和重做。

8.1 默认主题设置

在 VS Code 设置中搜索 mindmap.defaultTheme，或在 settings.json 中配置：

json 复制代码 
{
  "mindmap.defaultTheme": "lightMap"
}
配置值 主题
lightMap 科技蓝（默认）
fresh 清新绿
night 深色夜间

九、关联线

右键起点节点选择 添加关联线 ，再点击目标节点，即可创建虚线关联；按 Esc 可取消连接操作。

选中关联线后，拖动控制点调整曲线形状。右键关联线可以设置指向目标、指向起点、双向箭头、无箭头，也可恢复直线或删除。

关联线支持保存、撤销和重做。端点因折叠而隐藏时，对应关联线也暂时隐藏；导出包含当前可见的关联线。

十、Markdown 与富内容

Markdown 导入和直接预览支持以下内容：

内容 显示方式
标题 转换为层级节点；首个一级标题作为中心主题，没有时使用文件名
缩进列表、任务列表 转换为层级节点
表格 显示表头和网格
图片 支持 ![说明](图片路径) 与 HTML <img>（包括多行标签），按图片比例显示
围栏代码块 保留缩进与换行，使用等宽字体
mermaid 围栏代码块 渲染为图表

图片相对路径以 Markdown 文件所在目录为基准，支持本地图片、HTTP/HTTPS 图片及图片 Data URI。HTML 图片仅提取 src、alt、width、height，不执行事件脚本。加载失败时显示提示，单张本地或网络图片上限为 20 MB。导入的图片会嵌入导图文件；PNG、SVG、HTML 导出也包含图片，无需依赖原始本地路径。

Mermaid 使用扩展内置的本地渲染器，无需联网。语法错误时显示源码和提示，修正后可重新渲染。

在可编辑导图中，双击表格、代码或 Mermaid 节点可编辑源文本，提交后重新渲染。这些富内容会保存在 .mindmap 文件中。旧导图中已作为普通文本保存的内容，需要重新导入原始 Markdown 才能识别为对应富内容。

十一、导出

点击左侧工具栏 导出 菜单选择格式：

格式 用途与特点
SVG 可无损放大，保留文字、表格、代码和 Mermaid，适合长图及细节查看
HTML 独立页面，保留当前导图视图，支持拖拽平移与滚轮缩放
PNG 高清位图，便于插入文档或分享

导出保留当前可见节点及样式，不包含新增/折叠按钮、编辑控制点和小地图。需要导出完整内容时，请先展开全部节点。

PNG 最高使用三倍采样，长边上限为 32760 像素，总像素约 6400 万。超出安全尺寸时会提示使用 SVG；位图无法无限放大，查看超大导图建议使用 SVG。包含富内容的 SVG 建议使用浏览器打开，其他软件对其内嵌 HTML 的支持可能不同。

十二、文件格式

.mindmap / .mindm 使用 JSON 保存导图结构，基础示例：

json 复制代码 
{
  "version": 1,
  "meta": {
    "createdBy": "MindSprout",
    "createdAt": "2026-10-22T00:00:00.000Z"
  },
  "root": {
    "id": "n1",
    "text": "中心主题",
    "collapsed": false,
    "children": [
      {
        "id": "n2",
        "text": "分支一",
        "collapsed": false,
        "children": []
      }
    ]
  }
}

富内容、节点样式、布局和关联线使用额外字段保存；上面的示例仅展示基础树结构。布局测量缓存不会写入文件。

十三、名称与兼容性

扩展展示名称为 知枝 · MindSprout ，新建命令为 New MindSprout ，Markdown 预览命令为 Markdown: MindSprout。编辑器选择菜单使用"思维导图"区分编辑器名称与扩展名称。

扩展包名为 MindSprout，命令与编辑器标识使用独立的 mindsprout.*，避免与旧版 light-map 的入口冲突。默认主题设置仍使用 mindmap.defaultTheme，科技蓝配置值保留为 lightMap。已有 .mindmap / .mindm 文件可以直接打开，无需转换。

十四、开发与验证

开发建议使用 Node.js 22.12+，并安装 npm。扩展在用户侧运行时不需要单独安装 Node.js。

bash 复制代码 
npm install
npm run compile       # 准备 Mermaid、生成前端整包，并编译 TypeScript 到 dist/
npm run watch         # 监听 TypeScript 变更并编译
npm test              # 编译、核心逻辑、页面交互及 Markdown 预览命令集成测试
npm run test:browser  # 真实浏览器渲染及导出验证

浏览器测试需要 Chrome，也可通过环境变量 CHROME_PATH 指定 Chromium 可执行文件路径。

打包为 VSIX：

bash 复制代码 
npx @vscode/vsce package --no-dependencies --allow-missing-repository

如果本机已安装 vsce，也可执行 npm run package。打包前会自动执行编译；Mermaid 渲染器随扩展一起打包。

14.1 目录结构

text 复制代码 
src/
  extension.ts               # 命令注册与新建导图
  mindmapEditorProvider.ts   # 自定义编辑器、Markdown 预览、保存和导出
media/
  core.js                    # 数据模型、布局、Markdown 解析
  mindmap.js                 # 画布交互、编辑、小地图和导出
  rich.js                    # 表格、代码、Mermaid 渲染及富内容导出
  style.css                  # 界面样式
  vendor/                    # 构建时生成的本地渲染器
scripts/vendor.js            # 准备前端依赖资源
test/
  core.test.js               # 核心逻辑测试
  webview.smoke.test.js      # 页面交互测试
  markdown-preview.test.js   # 命令、右侧预览、源文件更新及只读保护测试
  rich.browser.test.js       # 真实浏览器渲染和导出测试
package.json                 # 扩展声明、设置、脚本和依赖

14.2 预览启动与重试

左侧图标直接随页面加载，不依赖脚本转换。若预览启动失败，底部会显示错误提示；从 Markdown 源文件再次点击右上角 MindSprout 按钮，可重新加载同一预览页。修改前端源码后需要执行 npm run compile 更新应用整包。

14.3 旧版升级排查

如果安装新版后图片仍显示为 HTML 源码，请在扩展列表中检查是否同时安装了旧版 wangyang-tpri.light-map。新版使用独立的 MindSprout 入口；建议禁用旧版后重新加载 VS Code，并从 Markdown 编辑器右上角的预览按钮重新打开导图。

当前限制

  • 普通文本节点不提供所见即所得的富文本编辑、节点图标或备注功能；表格、代码块与 Mermaid 使用专门的富内容节点。
  • Markdown 预览为只读，导入后的导图编辑与原始 Markdown 文件之间不提供双向同步。
  • PNG 受图像尺寸和内存限制；超大导图建议导出 SVG。

项目地址

相关推荐
兔子零10241 小时前
架构师最危险的能力：用正确的技术，做出错误的架构决策
前端·javascript·后端
Bug收容所1 小时前
Vue+js Day2
前端·javascript·vue.js
掘金酱2 小时前
带着作品来，坐下来聊｜掘金 X-lab · Coffee Talk 邀请你来见一面
前端·javascript·后端
CoovallyAIHub3 小时前
用 AI 做 PPT 被辞退，法院判公司赔：员工贴进对话框的数据，到底谁负责？
前端·agent
fruge3 小时前
SSH、RDP、VNC不必各开一个客户端：Next Terminal用Web入口统一管理远程资产和会话记录
运维·前端·ssh
honkun63 小时前
vue 下拉树组件 vxe-table-select 实现分页多选
前端·javascript·vue.js
用户621007587024 小时前
Web BIM 开发实践：如何将构件选择、属性查询接入业务系统？
前端
羲云4 小时前
AI 分站搭完就能发链接？上线前先过这 5 关
前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03ai安全工具:CyberStrikeAI安装部署与使用04GitHub 镜像站点05历年考研数学一、数学二、数学三真题试卷及答案PDF06几个好用的ip纯净度检测网站07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09苹果iPA游戏软件资源下载网站10乙二醇水溶液物性参数