手绘风流程图开发

更新于 阅读 5

目前流程图工具已经很多,能很好的满足工作的需要,那为啥要重复造轮子,主要是一下原因:

  1. 目前没事干,失业在家中(时间比较充裕)。
  2. 平时也有自己捣鼓项目的习惯,所以不如捣鼓一个手绘风的流程图工,自己还能用用,边用边改进。

技术栈:react + antd,手绘风插件使用 Rough.js。

目前没使用状态管理工具,因为目前绘图的逻辑主要使用面向对象的方式编写,通过原生js来操控dom节点。但后续打算引入zustand,跟redux相比更简洁,直接使用hooks的方式,并且不需要context。目前事件的发布订阅模式就可满足需要。

前期界面上参考frame0,先把最基本的功能实现再折腾UI。

在线预览地址:x-frame

https://file.vwood.xyz/2025/03/06/upload_wy1vp1s5s1j7gdwz7suh9ppbhvxkbwnz.png