javascript流程图可视化插件KityMinder

KityMinder Editor

KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具,适合用于编辑树/图/网等结构的数据。

编辑器由百度 FEX 基于 kityminder-core 搭建,并且在百度脑图中使用。

他们的区别与联系如下:

  • kityminder-core 是 kityminder 的核心部分,基于百度 FEX 开发的矢量图形库 kity。包含了脑图数据的可视化展现,简单编辑功能等所有底层支持。
  • kityminder-editor 基于 kityminder-core 搭建,依赖于 AngularJS,包含 UI 和热盒 hotbox 等方便用户输入的功能,简单来说,就是一款编辑器。
  • 百度脑图 基于 kityminder-editor,加入了第三方格式导入导出 (FreeMind, XMind, MindManager) 、文件储存、用户认证、文件分享、历史版本等业务逻辑。

javascript流程图可视化插件KityMinder_第1张图片

javascript流程图可视化插件KityMinder_第2张图片

大家把脑图导出km格式,就是大家代码需要生成的json格式数据

javascript流程图可视化插件KityMinder_第3张图片

今天心情好,利用 kityminder-core 代码去繁化简,提供流程图显示功能,并做了位置显示优化,给大家分享下,仅供学习使用!

简化后的可视化效果:

javascript流程图可视化插件KityMinder_第4张图片

javascript流程图可视化插件KityMinder_第5张图片

javascript流程图可视化插件KityMinder_第6张图片

代码下载:

https://download.csdn.net/download/chy2z/11051839

你可能感兴趣的:(Javascript)