Plait 框架
一款开源、现代化的绘图框架，用于构建一体化的白板工具产品，比如：思维导图、流程图、自由画笔等等。
支持 React
经过一段时间的努力，Plait 底层已经成功改造成框架未可知的架构，可以同时支持 Angular、React 两大框架，我们公司的知识库产品 PingCode Wiki 已经平滑升级（基于 Angular），并且我们也在基于 React 做了一个开源白板工具 - Drawnix，算是在 React 上也有具体的落地场景了。
架构介绍
以前的架构图：
新的架构图（应用层之前增加了视图层）：
新的包组织：
新的插件：知识图谱
基于我们公司的业务需要，我们新支持了一个数据可视化的插件 @plait/graph-viz，当前仅仅实现一个可以展示文档关联关系的知识图谱。
新的应用：开源白板工具 Drawnix
Drawnix 的定位是一个开箱即用、开源、免费的白板工具，基于 Plait + React 开发，近期刚刚启动。它没有内容存储能力，但是可以将创作的内容以图片或者文件的形式保存到本地（ *.drawnix* 后缀），然后支持加载本地保存的文件实现一个使用上的基础闭环。。
特性
- 💯 免费 + 开源
- ⚒️ 思维导图、流程图
- 🖌 自由画（新增 🔥🔥🔥）
- 😀 插入 Iconfont 表情（🚧 支持中...）
- 🚀 基于插件机制 - 可灵活扩展
- 🖼️ 📃 导出为 PNG, JPG, JSON(
.drawnix) - 💾 自动保存（浏览器缓存）
- ⚡ 编辑特性：撤销、重做、复制、粘贴等
- 🌌 无限画布：缩放、滚动、
- 🎨 主题模式（新增 🔥🔥🔥）
- 📱 移动设备适配（待优化）
功能界面
在线地址： drawnix.com
核心技术
支持 React 技术上主要还是基于 Plait 的插件机制，这里简单介绍：
- 抽象出依赖框架进行组件渲染的钩子，比如 renderText、renderComponent，将具体的实现放到插件层，不同框架可以有不同的实现。
- 入口组件，不同框架单独实现，就是上图中的 angular-board、react-board 部分。
- 自研 list-render 处理列表数据的数据驱动渲染，因为不依赖框架无法利用像 Angular 的模版渲染语法（ngFor/@for）或者 React 中的 jsx 的循环渲染，所以自己实现了类似的逻辑处理数据渲染及数据变更时的更新。
- 每一个插件元素在渲染时对应一个抽象的 ElementFlavour，ElementFlavour 定义插件元素渲染的生命周期：intialize、onContextChanged、destroy，上层开发只需要实现这些生命周期函数就可以完成元素的渲染、更新和销毁。
写在最后
个人认为 Plait 框架以及一些白板插件的实现上还是有很大的进步空间，需要随着我个人的成长、Drawnix 的开发、文档的完善、更多人的参与等等各个维度共同促进、不断地迭代出一个更好的白板框架、一个更好的白板工具。
欢迎大家 star 支持：