嗨，大家好，我是徐小夕。
架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”。

最近一直在研究和迭代多模态文档引擎 flowmix/docx：

想让文档支持展现更多的内容载体，虽然 flowmix/docx 已经支持了思维导图，电子表格，流程图等内容的编辑，但是许多用户反馈想让我们支持一下在文档中嵌入在线白板的功能。

在经过一段时间的调研之后，我们成功的将在线白板集成到了flowmix/odcx文档编辑器中。

下面是演示的效果：

好啦，接下来就和大家揭秘画板的技术实现。

Drawnix 作为开源项目，有着许多亮点。开源意味着代码公开，技术爱好者都能参与到它的改善与优化中。这不仅加速了功能迭代，还能确保工具的稳定性与安全性。我们可以根据自身需求，定制个性化功能，满足特定场景下的使用。

免费 + 开源

• ⚒️ 思维导图、流程图
• 画笔
• 插入图片
• 基于插件机制
• ️ 导出为 PNG, JSON(.drawnix)
• 自动保存（浏览器缓存）
• ⚡ 编辑特性：撤销、重做、复制、粘贴等
• 无限画布：缩放、滚动
• 主题模式
• 移动设备适配
• 支持 mermaid 语法转流程图
• ✨ 支持 markdown 文本转思维导图（新支持 ）

代码的仓库结构也很简洁，大家可以参考一下：

github地址：https://github.com/plait-board/drawnix

如果大家技术栈比较匹配，可以相对低成本的把它集成到项目中作为系统的白板编辑模块。由于我们在研发 flowmix/docx 多模态编辑器的过程中，思考到要支持vue和react两个版本，所以采用了成本相对较大的技术方案，好在我们顺利的在文档编辑器中集成了在线白板的功能。

开源白板功能演示

Drawnix 的定位是一个开箱即用、开源、免费的工具产品，它的底层是 Plait 框架，接下来和大家全面的演示一下它的功能和界面。

上图是我用 Drawnix 画的一个内容，包含了流程图，文本和思维导图，我们点击对应的元素，会出现元素的属性配置浮窗：

顶部左上角有工具菜单，我们可以一键的删除，复制元素，如下：

我们还可以在顶部工具条上切换不同的编辑属性和编辑元素，来实现不同内容的创作：

同时右下角还能轻松切换不同的白板主题风格，满足不同用户的体验需求：

整体体验研究下来，这个项目的“可玩性”还是许多的，代码设计的还算优雅，唯一的缺点我觉得就是开发文档，目前还没有比较详细的二次开发文档，所以对于研发人员来说开发成本还是有一些的。

我们最近研发的 flowmix/docx多模态文档引擎，目前也在持续更新中，欢迎体验参考：

flowmix/docx

如果大家有好的提议和反馈，欢迎在留言区交流反馈～