VS Mind

Visual mind map editor for VS Code — drag nodes, edit inline, and work with mind maps using an experience that feels built into the editor.

中文说明

Why VS Mind?

• Feels native to VS Code — opens like any other editor tab, with toolbar, command palette, keybindings, split view, and settings
• Drag & drop editing — drag nodes to rearrange, pan and zoom the canvas, double-click to edit text in place
• Full visual editing — add, delete, and style nodes from the canvas, side panel, or context menu
• Plain JSON files — human-readable map data, easy to edit and share
• Rich appearance — 50+ themes, multiple layouts, export, search, format painter
• Bilingual UI — English and Simplified Chinese

Install

From Marketplace

1. Open VS Code / Cursor
2. Extensions → search VS Mind
3. Install rainlin.vs-mind

From VSIX

npm run package
code --install-extension ./*.vsix

Quick Start

1. Command Palette (Ctrl+Shift+P / Cmd+Shift+P) → VS Mind: New Mind Map File
2. Or open an existing mind map file from the explorer
3. Click the split icon in the editor title bar to open JSON source beside the canvas

Features

File Format

This extension opens .smm files — the SMM mind-map format (UTF-8 JSON). The format is documented separately from this plugin; see smm/SPEC.md ( 中文 ).

{
  "layout": "logicalStructure",
  "root": { "data": { "text": "Topic" }, "children": [] },
  "theme": { "template": "default", "config": {} }
}

Keyboard Shortcuts

Commands

All commands are available via the Command Palette:

Settings

Development

This project vendors a fork of simple-mind-map as a git submodule under vendor/mind-map (see Acknowledgments for why). Make sure the submodule is checked out before building:

# clone with submodules
git clone --recurse-submodules https://github.com/Rainlin007/vs-mind.git

# or, if already cloned
git submodule update --init --recursive

Then:

npm install
npm run build
npm run watch      # rebuild on change
npm run package    # create .vsix
npm run publish    # publish to Marketplace (requires vsce login)

The build (esbuild.js) redirects all simple-mind-map imports to the local fork in vendor/mind-map, so the extension is always built against the patched source.

Links

• GitHub Repository
• Report Issues
• VS Code Marketplace

Acknowledgments

VS Mind is built on top of the excellent open-source simple-mind-map library.

To fix a few upstream issues that affect the editing experience (e.g. an empty node distorting the inline text-edit box and losing its theme border), VS Mind uses a lightweight fork of simple-mind-map included as a git submodule. The fork tracks upstream and only carries minimal, focused patches; fixes are intended to be contributed back where possible.

License

MIT

中文说明

English

VS Mind 是在 VS Code 中可视化编辑思维导图的扩展 — 支持拖拽节点、就地编辑，整体交互接近原生编辑器体验。

亮点

• 接近原生 VS Code 体验 — 像普通文件一样在编辑器标签页中打开，支持工具栏、命令面板、快捷键、分屏与设置项
• 拖拽编辑 — 拖动节点调整结构，拖动画布平移缩放，双击就地修改文字
• 完整可视化编辑 — 在画布、侧栏、右键菜单中增删节点并调整样式
• JSON 存储 — 导图内容以 JSON 保存，结构清晰
• 50+ 主题 — 工具栏/右键切换主题，支持彩虹线与连线粗细
• 双语界面 — 英语 / 简体中文

安装

在扩展市场搜索 VS Mind，或安装 rainlin.vs-mind。

快速开始

1. 命令面板 → VS Mind: 新建思维导图
2. 或在资源管理器中打开已有思维导图文件
3. 点击标题栏分屏图标，在侧边查看 JSON 源码

快捷键

配置项

文件格式

本扩展使用 SMM 思维导图格式（.smm，UTF-8 JSON）。格式说明与插件文档分开维护，见 smm/SPEC.zh-CN.md（English）。

致谢

本扩展基于开源项目 simple-mind-map 构建。

为修复原库在编辑体验上的一些问题（例如空节点会导致内联输入框变形、主题边框消失），本扩展使用了一个轻量的 simple-mind-map fork，以 git submodule 的形式包含在 vendor/mind-map 中。该 fork 跟随上游，仅携带最小化的针对性修复，并会尽量将修复回馈上游。

开发

fork 通过 git submodule 引入，构建前需先检出子模块：

# 克隆时带上子模块
git clone --recurse-submodules https://github.com/Rainlin007/vs-mind.git
# 或已克隆过：
git submodule update --init --recursive

npm install
npm run build      # 构建
npm run watch      # 监听变更重建
npm run package    # 生成 .vsix

构建脚本（esbuild.js）会把所有 simple-mind-map 的导入重定向到 vendor/mind-map 里的本地 fork，因此始终基于已打补丁的源码构建。

链接

• GitHub 仓库
• 问题反馈
• VS Code 扩展市场