Loading... # Drawnix 开源白板工具技术分析 # 一、概述 ## 1. 项目背景 ### A. 项目简介 Drawnix 是一个开源白板工具（SaaS），提供一体化白板体验，包含思维导图、流程图、自由画等多种绘图功能。该项目由 plait-board 组织开发，基于插件架构设计，底层采用 Plait 画图框架。 ### B. 核心亮点 - 完全免费且开源 - 基于 Monorepo 架构 - 插件化设计，支持扩展 - 支持多种绘图类型：思维导图、流程图、自由画 - 支持 Mermaid 语法转流程图 - 支持 Markdown 文本转思维导图 ### C. 项目数据 - GitHub Star：13.1k - Fork：1.1k - 主要语言：TypeScript（88.4%） - 最新版本：v0.3.0（2025-09-14） ## 2. 技术架构 ### A. 技术栈 - 前端框架：React - 开发语言：TypeScript（88.4%） - 样式：SCSS（9.1%） - 构建工具：Nx（Monorepo 管理） ### B. 核心依赖 - Plait：开源画图框架 - Slate：富文本编辑器框架 - Floating UI：弹出层基础库 # 二、系统架构 ## 1. 整体架构 ```mermaid graph TB subgraph 应用层 A[drawnix.com Web 应用] end subgraph 插件层 B1[白板应用插件] B2[React 视图层插件] B3[文本渲染模块] end subgraph 框架层 C1[Plait 画图框架] C2[Slate 富文本框架] C3[Floating UI] end A --> B1 A --> B2 A --> B3 B1 --> C1 B2 --> C1 B3 --> C2 A --> C3 ```  ## 2. 仓储结构 项目采用 Monorepo 架构，使用 Nx 进行多包管理： ``` drawnix/ ├── apps/ │ └── web/ # drawnix.com Web 应用 │ └── index.html # 入口文件 ├── dist/ # 构建产物 ├── packages/ │ ├── drawnix/ # 白板应用核心包 │ ├── react-board/ # 白板 React 视图层 │ └── react-text/ # 文本渲染模块 └── README.md ``` ## 3. 插件架构设计 Drawnix 采用插件化架构，具有以下优势： - 支持多种 UI 框架（Angular、React） - 可集成不同富文本框架（当前支持 Slate） - 业务分层清晰 - 可开发细粒度可复用插件 - 易于扩展更多画板应用场景 # 三、核心功能 ## 1. 绘图功能 ```mermaid graph LR A[用户输入] --> B{选择绘图类型} B --> C[思维导图] B --> D[流程图] B --> E[自由画] C --> F[Mermaid/Markdown 转换] D --> F E --> G[画笔工具] F --> H[渲染输出] G --> H ```  ## 2. 编辑特性 - 撤销、重做 - 复制、粘贴 - 无限画布：缩放、滚动 - 自动保存（浏览器缓存） ## 3. 导入导出 - 支持 Mermaid 语法转流程图 - 支持 Markdown 文本转思维导图 - 导出为 PNG、JSON（.drawnix 格式） # 四、技术特点 ## 1. 插件机制 基于 Plait 框架的插件系统，核心特点： | 特性 | 说明 | |------|------| | 多框架支持 | 支持 Angular、React 等 UI 框架 | | 富文本集成 | 可集成不同富文本框架 | | 分层架构 | 业务逻辑分层清晰 | | 插件复用 | 细粒度可复用插件 | ## 2. 与 Plait 框架关系 Drawnix 是基于 Plait 框架的开箱即用产品，Plait 是底层画图框架，代表着公司在知识库产品（PingCode Wiki）上的技术沉淀。 两者关系： - Drawnix：产品层，面向最终用户 - Plait：框架层，面向开发者 ## 3. 本地优先（Local-first） - 数据存储在浏览器缓存 - 自动保存功能 - 支持 JSON 格式导出备份 # 五、部署方案 ## 1. 本地开发 ```bash npm install npm run start ``` ## 2. Docker 部署 ```bash docker pull pubuzhixing/drawnix:latest ``` ## 3. 在线应用 官方在线地址：https://drawnix.com # 六、项目生态 ## 1. 版本发布 - 最新版本：v0.3.0（2025-09-14） - 发布代号：Dawn（破晓）版本即将发布 ## 2. 贡献者 - 16 名贡献者 - 活跃维护 ## 3. 社区认可 - HelloGitHub 推荐项目 - Trendshift 收录 # 七、技术分析 ## 1. 架构优势 ### A. Monorepo 架构 - 代码统一管理 - 依赖版本一致 - 跨包复用方便 ### B. 插件化设计 - 高度可扩展 - 业务解耦 - 技术栈灵活 ### C. 本地优先策略 - 数据隐私保护 - 离线可用 - 无服务器依赖 ## 2. 技术选型分析 | 技术选择 | 优势 | |---------|------| | TypeScript | 类型安全，开发体验好 | | React | 生态成熟，组件化开发 | | Slate | 富文本编辑器框架，灵活可扩展 | | Nx | Monorepo 管理工具，构建优化 | | Plait | 自研框架，可控性强 | ## 3. 应用场景 - 个人知识管理 - 团队协作绘图 - 思维导图制作 - 流程图设计 - 自由绘画创作 # 八、发展方向 ## 1. 短期规划 - Dawn（破晓）版本开发 - 高频迭代 drawnix.com ## 2. 技术演进 - 更多富文本框架集成 - 更多 UI 框架支持 - 插件生态建设 ## 3. 产品定位 - 开箱即用的工具产品 - 与 Plait 框架形成产品与框架双轮驱动 *** ## 参考资料 1. [Drawnix GitHub 仓库](https://github.com/plait-board/drawnix) 2. [Plait 开源画图框架](https://github.com/worktile/plait) 3. [Drawnix 在线应用](https://drawnix.com) 4. [Slate 富文本编辑器框架](https://github.com/ianstormtaylor/slate) 最后修改：2026 年 01 月 24 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏