写了一款开源思维导图设计器

嗨, 大家好, 我是徐小夕.

上一期内容和大家分享了我开源的 flowmix-flow 可视化流程引擎, 它可以轻松创建可视化工作流, 并且可以基于这套开源方案, 轻松定制企业自己的工作流引擎.

e2838e71a215bc5d852bb5caf8223919.gif

开源地址: https://github.com/MrXujiang/flowmix-flow

线上demo: http://flowmix.turntip.cn/flow-v0

国内镜像: https://gitee.com/lowcode-china/flowmix-flow

随着最近对 flow 的深入研究, 我在开源的flowmix-flow 基础上, 又写了一个思维导图的开源方案, 今天就来和大家分享一下.

demo演示

6c1180f2107ab24af093387c8f71e77a.gif

我们可以使用它轻松的创建思维导图, 并轻松集成到自己的项目中. 当然这个是最小化的版本, 还有很多功能大家也可以在此基础上进行扩展.

当然这个设计器已经实现了常用的功能, 比如:

  • 节点编辑

  • 节点多选全选

  • 组件图层面板

  • 画布控件(放大缩小复位清空等)

  • 参考线吸附

  • 自定义节点能力

  • 自定义边能力

  • 多handles模式

接下来我会分享一些与之前我做的工作流不同的特点, 如果大家想研究学习工作流引擎, 可以看我之前的文章:

flowmix-flow可视化流程引擎, 开源!

自定义连接点

d19d08dd65594d600fd609b29e9170a7.gif

自定义连接点就类似于Dify, 它比较适合流程引擎的多任务模式, 我们可以基于子流程连接不同的逻辑.

自定义连接线箭头

a5518a170dafe58860988cf745e177e0.png

前的连线没有两端的箭头, 对于有流程性的业务来说缺乏指示性效果, 所以在思维导图中我加上了自定义的连接线端点箭头, 如果大家有类似的需求可以参考我源码中的实现.

图层双向面板

4508a9fb0ab5facc0a60366f0fd82be5.gif

图层双向面板也是一个很重要的能力, 我们可以通过节点的选择, 来映射到图层面板, 同时也可以通过图层面板, 对节点进行快捷的操作.

目前这个项目我开源在下面仓库的 flow-mind 分支, 大家感兴趣可以学习参考一下.

f1df8b3a9de159e505178a1ff73d8e9f.png

开源地址: https://github.com/MrXujiang/flowmix-flow

线上demo: http://flowmix.turntip.cn/flow-v1

国内镜像: https://gitee.com/lowcode-china/flowmix-flow

如果大家对工作流, 流程引擎感兴趣, 也可以在下方交流讨论:

e86b48788afcc4cfdf42a22bb4da41ae.png

最近做的多模态文档产品

也许关注我公众号的朋友已经看过我之前做的另一款产品——flowmix/docx, 它是另一款搭建类产品, 类似于飞书和Notion, 可以使用它轻松构建企业下一代知识库产品.

5c3c4ade7075f68178040b41f619eb93.png

后面会和flow结合, 做更深度的产品赋能, 如果大家感兴趣, 也可以在线体验一下.

体验地址: http://flowmix.turntip.cn/docx/

后续我会在 flowmix 公众号中持续分享flowmix零代码搭建系列产品和规划, 感兴趣的朋友可以关注一下:

如果你有好的想法和建议, 也欢迎随时留言区交流讨论~

往期精彩:

猜你喜欢

转载自blog.csdn.net/KlausLily/article/details/143177624