KityMinder 是一款强大的脑图可视化/编辑工具,由百度 FEX 团队开发并维护。
项目地址:https://github.com/fex-team/kityminder-core
本仓库是 KityMinder 的核心实现部分:
可以参考 example.html 进行使用。
<div id="minder-container">div>
<script type="text/javascript" src="kityminder.core.min.js">script>
<script type="text/javascript">
var minder = new kityminder.Minder({
renderTo: 'minder-container'
});
script>
更多详细的开发资料可以参考 wiki
KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具,适合用于编辑树/图/网等结构的数据。
编辑器由百度 FEX 基于 kityminder-core 搭建,并且在百度脑图中使用。
项目地址:https://github.com/fex-team/kityminder-editor
他们的区别与联系如下:
根目录下的 index.html
为开发环境,dist
目录下的 index.html
使用打包好的代码,适用于线上环境。
npm run init
index.html
开发,或者查看 dist
目录下用于生产环境的 index.html
,Enjoy it! 另外,kityminder-editor 还提供了 bower 包,方便开发者直接使用。你可以在需要用到 kityminder-editor 的工程目录下 运行 bower install kityminder-editor
,接着手动引入 kityminder-editor 所依赖的 css 和 js 文件,具体文件见 dist
目录下的 index.html
,推荐使用 npm 包 wireDep 自动进行, 可参考根目录下 Gruntfile.js
。
运行 grunt build
,完成后 dist
目录里就是可用运行的 kityminder-editor
由于 kityminder-editor 是基于 kityminder-core 搭建的,而 kityminder-core 内置了五种常见 格式的导入或导出,在创建编辑器实例之后,可以使用四个接口进行数据的导入导出。
editor.minder.exportJson()
- 导出脑图数据为 JSON 对象editor.minder.importJson(json)
- 导入 JSON 对象为当前脑图数据editor.minder.exportData(protocol, option)
- 导出脑图数据为指定的数据格式,返回一个 Promise,其值为导出的结果editor.minder.importData(protocol, data, option)
- 导入指定格式的数据为脑图数据,返回一个 Promise,其值为转换之后的脑图 Json 数据目前支持的数据格式包括:
json
- JSON 字符串,支持导入和导出text
- 纯文本格式,支持导入和导出markdown
- Markdown 格式,支持导入和导出svg
- SVG 矢量格式,仅支持导出png
- PNG 位图格式,仅支持导出更多格式的支持,可以加载 kityminder-protocol 来扩展第三方格式支持。
数据格式的具体信息,可参考 kityminder-core-wiki 的中的说明。
KityMinder 是百度 FEX 团队的 f-cube 小组(原 UEditor 小组)的又一力作。作为一款在线的脑图编辑工具,它有着不亚于 native 脑图工具的交互体验。同时,它充分发挥了 Web 云存储的优势,可以直接将编辑中的脑图同步到云端。此外,借由独创的 “云盘分享”功能,用户可以一键将当前编辑的脑图直接生成在线链接共享给其他用户,实现无缝沟通。
项目地址:https://github.com/fex-team/kityminder
KityMinder 基于 SVG 技术实现,支持绝大多数的主流浏览器,包括:
产品地址:http://naotu.baidu.com
不建议直接使用百度脑图仓库进行二次开发。
需要脑图可视化需求的,可以基于 kityminder-core 进行二次开发; 需要脑图编辑需求的,可以使用 kityminder-editor 进行二次开发。
百度脑图依赖列表如下。
lib/bower/codemirror
- 备注窗口使用的代码编辑器lib/fio
- 前端 IO 操作中间件lib/fui
- 基础 UI 组件库lib/kity
- 前端 SVG 库lib/marked
- Markdown 渲染支持git clone https://github.com/fex-team/kityminder.git
要在本地运行百度脑图,需要先安装一下开发工具:git、node、bower
建议 fork
本仓库后进行二次开发。fork
操作完成后,会在您的 github 账户下创建一个 kityminder 的副本。接下来可以克隆到本地。
cd {YOUR_WORKING_DIRECTORY}
git clone https://github.com/{YOUR_GITHUB_USERNAME}/kityminder.git
代码克隆完成,需要初始化子模块。
git submodule init
git submodule update
然后安装项目的依赖项。
npm install
bower install
依赖安装完成,使用 grunt
进行构建:
grunt
运行完成后,会发现生成了 dist
目录,里面就是可运行的 kityminder。