阿超 > mind-map

mind-map

2025-11-17

前端

或许美化灵魂有不少途径，但我想，阅读是其中易走的，不昂贵的，不须求助他人的捷径。——严歌苓《读书与美丽》

https://github.com/wanglin2/mind-map

思绪 Simple mind map 深度解析：一个简单 & 强大的 Web 思维导图库与跨平台应用生态

仓库地址：wanglin2/mind-map
开发文档：https://wanglin2.github.io/mind-map-docs/
在线使用（网页版思维导图）：https://wanglin2.github.io/mind-map/
中文名：思绪思维导图（Simple mind map）

1. 项目定位

Simple mind map 是一个不依赖任何前端框架的 JS 思维导图库，同时作者基于该库又构建了一个可直接在线使用的 Web 思维导图应用（基于 Vue2 + ElementUI）。它的目标不是“花哨”，而是专注于：

  • 核心逻辑简洁
  • 扩展机制清晰（插件化）
  • 高度可配置与自定义
  • 支持多结构、多格式、多媒体内容节点
  • 可以既做“库”又做“产品”，利于二次开发、自部署以及生态扩展

如果你有“在现有系统中嵌入思维导图能力”或“快速上线一个轻量思维整理工具”的需求，这个项目是一个非常合适的起点。

2. 多端生态一览

类别 说明 获取方式
桌面客户端 支持 Windows / Mac / Linux GitHub Releases、百度网盘等（README列出）
Obsidian 插件 在 Obsidian 中插入/管理脑图 插件发行页
UTools 插件 可在 uTools 中快速使用 直接在 uTools 插件市场搜索“思绪”
Web 在线版 纯前端可本地文件操作 在线地址
云存储版本 需要后端与云同步 可尝试作者另一项目：理想文档
JS 库 不依赖框架的核心实现 通过 npm i simple-mind-map 安装

生态清晰区分了“使用者场景”和“开发者集成场景”，既满足终端用户，又便于技术团队二次封装。

3. 核心特性精读（来自 README 列表）

类别 特性概述
架构 插件化，核心最小化，其它能力按需加载（减小体积）
布局结构 逻辑结构（向左 / 向右）、标准思维导图、组织结构图、目录组织图、时间轴（横/竖）、鱼骨图等
主题 内置多主题 + 支持高度自定义 + 可注册新主题
节点内容类型 文本（普通 / 富文本）、图片、图标、超链接、备注、标签、概要、数学公式
节点交互 拖拽移动 / 自由调整、多种节点形状、可扩展节点内容、可用 DDM 完全自定义节点内容
画布能力 拖动 / 缩放
多选方式 框选（鼠标拖动）+ Ctrl+左键多选
导入导出 导出：json、png、svg、pdf、markdown、xmind、txt；导入：json、xmind、markdown
综合功能 快捷键 / 前进后退 / 关联线 / 搜索替换 / 小地图 / 水印 / 滚动条 / 手绘风格 / 彩虹线条 / 标记 / 外框
配置 丰富配置项适配不同习惯
协同 支持协同编辑（需要相关插件与配置）
演示模式 可切换全屏演示展示思维图
插件扩展 官方提供众多插件（详见下一节）

不会实现的特性（官方明确）：

  1. “自由节点”——即多个根节点结构
  2. 概要节点后继续添加子节点

若你的业务强依赖多根节点或概要后衍生层级，请评估是否满足需求。

4. 官方插件矩阵（README 列出名称）

插件按需引入（功能无效往往是因未加载对应插件）。以下为 README 中列出的部分：

RichText、Select、Drag、AssociativeLine、Export、KeyboardNavigation、MiniMap、Watermark、TouchEvent、NodeImgAdjust、Search、Painter、Scrollbar、Formula、Cooperate、RainbowLines、Demonstrate、OuterFrame、MindMapLayoutPro 等。

提示：具体引用方式与插件参数请查阅开发文档；这里不臆造 API 细节。

5. 安装与最小可运行示例

5.1 安装库

1
npm i simple-mind-map

5.2 准备容器

1
<div id="mindMapContainer"></div>

5.3 基础样式（保持容器内部元素无默认边距）

1
2
3
4
#mindMapContainer * {
  margin: 0;
  padding: 0;
}

5.4 创建实例（来自 README 示例）

1
2
3
4
5
6
7
8
9
import MindMap from "simple-mind-map";

const mindMap = new MindMap({
  el: document.getElementById("mindMapContainer"),
  data: {
    data: { text: "根节点" },
    children: []
  }
});

到此，一个最简的脑图就生成了。

6. 数据结构说明（依据示例）

基础数据格式在初始化配置中通过 data 传入，结构包含：

1
2
3
4
5
6
{
  data: { text: "根节点" },
  children: [
    // 每个子节点对象结构类似，继续嵌套
  ]
}

你可以在构造前动态生成该嵌套结构来描述多层思维图。

7. 典型使用扩展（不虚构 API，仅示范理念）

下面示例是“基于现有初始化方式”进行可读性扩展（使用 README 中暴露的 text 字段和 children 结构理念）。具体高级能力（如富文本、公式、图片）请结合文档中对应插件加载方式实现，这里仅展示概念性构造，避免乱编未提供的调用细节。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import MindMap from "simple-mind-map";

// 构造一个简单学习路线图
const learnTree = {
  data: { text: "前端学习路线" },
  children: [
    {
      data: { text: "HTML 基础" },
      children: [
        { data: { text: "语义化" }, children: [] },
        { data: { text: "多媒体标签" }, children: [] }
      ]
    },
    {
      data: { text: "CSS 核心" },
      children: [
        { data: { text: "布局：Flex/Grid" }, children: [] },
        { data: { text: "动画与过渡" }, children: [] }
      ]
    },
    {
      data: { text: "JavaScript" },
      children: [
        { data: { text: "ES 标准" }, children: [] },
        { data: { text: "异步与事件循环" }, children: [] }
      ]
    }
  ]
};

const map = new MindMap({
  el: document.getElementById("mindMapContainer"),
  data: learnTree
});

说明：示例仅使用 README 已展示的结构字段 data.text 与 children，没有引入未列出的属性，确保不“乱编”。

8. 主题与样式自定义的思路（概念性说明）

README 明确支持：内置多主题 + 自定义样式 + 注册新主题。由于 README 未给出具体注册代码接口，这里只做安全思路描述：

步骤 思路
1 查看开发文档中主题注册接口（例如可能有 registerTheme(name, config) 之类——具体以文档为准）
2 准备主题配置对象：颜色、节点形状、线条风格、字体等
3 初始化实例时传入主题名称或在运行期调用切换接口
4 与“彩虹线条、手绘风格、水印”等插件组合做展示风格定制

不写伪 API，确保尊重 README 信息边界。

9. 导入导出策略（按 README 所列支持格式）

操作 说明
导出 支持：json / png / svg / pdf / markdown / xmind / txt
导入 支持：json / xmind / markdown
使用建议 在业务系统中做“版本留存”时优先用 json；在知识分享/文档平台嵌入时用 markdown；跨工具迁移时用 xmind；图像展示用 png/svg; 长文档归档可用 pdf

10. 协同编辑与演示模式

README 明确写到支持协同与演示：

  • 协同：意味着你可以在团队知识管理或在线教学场景中同步操作节点（需要插件与后端支持）。
  • 演示模式：用于展示脑图内容而非编辑，适合课堂/会议/培训演示。

这里的实际实现依赖对应插件与开发文档，不在 README 中展开细节，故不臆造。

11. 使用与定制边界

适合人群 原因
需要在产品中嵌入脑图能力的开发者 不依赖框架，可灵活封装
追求可定制主题和布局的团队 多结构、多主题、多节点类型支持
有导出/数据留存需求的知识工作者 多格式导入导出
想做插件二次开发的前端工程师 插件化架构减小主包体积，增强可维护性
需要轻量演示/教学工具的人 演示模式 + 协同（在合适后端配合下）

不适合：

  • 多根节点（自由节点）场景
  • 概要节点继续派生复杂层级的场景

12. 合理商业使用与版权声明

License：MIT。README 要求：保留 simple-mind-map 版权声明和来源即可自由商用。
示例引用格式（来自 README 指引）可放在“关于 / 帮助 / 协议”页：

本产品思维导图基于 SimpleMindMap 项目开发，版权归源项目所有，开源协议。

如希望不保留，可联系作者（微信 wanglinguanfang）通过付费方式处理（README 中说明）。

13. 赞助 / 使用者与社区能量

README 后半部分列出了大量赞助者与使用者（如 drawon.cn 等），说明项目在实际生产与个人创作领域已有一定落地积累。对你而言意味着：

  • 生态验证过（不是概念演示）
  • 有真实用户反馈迭代
  • 插件模式经受过多场景考验

14. 推荐的实践集锦（基于 README 信息的安全建议）

目标 推荐做法
快速嵌入 用最小示例 + 按需只加载需要的插件
优化性能 避免一次性注册过多非必要插件，保持体积
数据安全 导出 json 做本地或后端版本备份
协同场景 与自有后端 WebSocket 或实时服务结合（参考文档）
主题品牌化 自定义主题（颜色、形状、线条）以符合产品视觉
Markdown 迁移 利用 markdown 导出将脑图结构迁移到知识库
二次开发 先阅读开发文档 → 明确插件接口 → 局部扩展节点内容

15. 常见“踩坑”前置提醒（依据 README 提示逻辑）

可能疑惑 解释路径
某功能不生效 很可能未引入对应插件（README 明确）
想多根节点 官方明确不支持自由节点，多根需求需另寻库
概要后继续加子节点 README 明确不会实现该特性
富文本/数学公式无法使用 确认是否引入 RichText / Formula 插件
体积过大 评估是否加载了非必要的插件集合
商用版权声明疑虑 按 README 指定格式添加来源引用即可（或与作者联系付费去除）

16. 总结

Simple mind map 的价值在于：

  • 用一个“极简核心 + 插件拼装”的方式，把思维导图能力标准化，避免常见前端脑图库臃肿不可维护的问题；
  • 结构类型丰富（逻辑、组织、时间轴、鱼骨图等），覆盖多种知识梳理场景；
  • 数据导出/导入渠道多，易于融入文档、协作、归档工作流；
  • 生态延展（桌面、Obsidian、UTools、Web、云版本），让用户与开发者分别获益；
  • 明确列出“不支持特性”，减少决策误区。

如果你的需求在其支持范围内，它是一套“快速集成 + 可长期维护”的开源选择。点个 Star 支持作者继续迭代，也是对开源生态的直接鼓励。

17. 再次快速引用核心入口

项目元素 链接
仓库 wanglin2/mind-map
在线使用 Web版
开发文档 Docs
Obsidian 插件 Releases
安装库 npm i simple-mind-map
License MIT

如果你已经决定尝试：复制“安装 + 最小示例”，然后根据实际功能需要逐步引入插件即可。祝你构建出属于自己的思维捕获系统！🚀