jsMind

定义

jsMind 是一个用 JavaScript 编写、用于显示与编辑思维导图的类库，不依赖除浏览器运行环境之外的框架^[1]。它把思维导图抽象为若干节点以及节点之间的连线，一张导图有唯一的根节点，根节点外围可以挂接多个子节点，子节点之下还可以继续嵌套^[3]。项目以 BSD 协议发布，使用者只需遵守该许可即可把它集成进自己的项目^[2]。

在用法上，使用者在页面上引入样式文件与脚本文件，准备一个用于承载导图的容器元素，再通过构造 jsMind 对象并调用其显示方法完成渲染^[4]。库同时提供 jsMind.current 这一入口，用于在页面已存在导图时取得相应的 jsMind 对象^[3]。

原理

jsMind 以 HTML5 的 canvas 和 svg 作为绘制基础，把结构化的数据渲染成节点框与连接线组成的图形^[1]。数据在内部被组织为节点对象，每个节点记录标识 id、节点序号 index、主题 topic、是否为根节点 isroot、父节点 parent、分布方向 direction、子节点集合 children、展开状态 expanded 以及附加数据 data 等属性^[3]。

渲染之外，类库把对导图的操作封装为方法，例如用 get_root 取得根节点、用 get_node 按标识查找节点、用 get_selected_node 取得当前选中节点，用 find_node_before 与 find_node_after 查找相邻节点^[3]。节点的展开状态可以通过 collapse_node、expand_node、toggle_node 切换，也可以用 expand_all 或 expand_to_depth 按层级批量展开^[3]。

数据层面，jsMind 支持 node_tree、node_array 和 freemind 三种格式，任意一种都可以载入，也可以作为导出目标^[4]。其中 node_tree 是默认格式，以树的嵌套形式描述节点；freemind 格式则对应 MindManager 一类软件使用的 XML 表示^[4]。配置项中 container 用于指定承载导图的容器，editable 决定是否允许编辑，theme 用于选择主题样式^[4]。

发展历程

jsMind 由张志刚开发并长期维护，代码托管在 GitHub，同时提供 Gitee 上的国内镜像^[1]。早期版本的说明中，该库的绘制基础被描述为基于 HTML5 的 canvas；后续版本的说明则补充为基于 canvas 和 svg 进行设计^[5][1]。

项目随后进入 npm 生态分发，包名为 jsmind，采用 BSD-3-Clause 许可^[6]。0.7 版本的说明中标注了破坏性变更，称旧版本已被弃用，ES6 版本发布，浏览器可运行的脚本文件生成于 es6 目录，源码则位于 src 目录^[6][7]。

在 npm 上，jsmind 的首次发布距今约 9 年，后续持续迭代，较新的版本包括 0.8 系列与 0.9.1^[8][9]。围绕该库还衍生出多个适配包，例如面向 Vue 3 的 vue3-jsmind、面向 React 的 react-jsmind，以及把原库改为 TypeScript 实现的 mind-map^[10][11]。

应用

jsMind 的主要用途是在网页中嵌入可交互的思维导图，用于梳理知识结构、组织目录层级和展示层级关系^[1]。示例站点提供显示单个脑图、试用全部功能以及配合 requirejs 使用等多种演示，另有独立的示例代码仓库^[1]。

由于节点数据以 JSON 形式描述，外部内容可以先转换为该类库可识别的数据格式再交给它渲染。有开发者记录过一种用法：读取 Markdown 文件的标题层级，把标题结构转换为 jsMind 的 JSON 数据，从而实现由文本大纲生成思维导图^[12]。第三方组件也把该库接入到前端框架中，例如基于 jsMind 封装的 react 思维导图组件和在 Vue 3 中使用的插件^[10]。

局限

作为浏览器端类库，jsMind 自身负责的是导图的显示与编辑，数据存储、协同编辑等能力需要使用者自行结合其他方案实现，其文档也把部分界面操控之外的功能归入实验性范围^[3]。文档同时提示，使用者应尽量只采用文档中列出的接口，因为这些接口在后续版本迭代中会得到最大程度的兼容性支持，言下之意是未被文档收录的接口不保证兼容^[3]。

拖动节点属于需要额外引入脚本才能启用的能力，默认引入的主文件不包含该功能^[4]。此外，从 0.7 版本开始旧版本被弃用、ES6 版本启用，说明其间存在不向后兼容的接口变动，依赖旧版写法的项目需要进行迁移^[6]。

参见

• 思维导图 —— jsMind 所绘制和编辑的对象。

• JavaScript —— 编写该类库所使用的编程语言。

• HTML5 —— 该类库绘制图形所依托的浏览器技术基础。

• BSD许可证 —— jsMind 发布所采用的开源许可协议。

• npm —— 分发该库的包管理平台。