Drawnix 开源白板工具全面教程
Drawnix是一款开源、免费的一体化在线白板工具，集思维导图、流程图、自由绘画等多种功能于一体。其名称源于“绘画”（Draw）与“凤凰”（Phoenix），象征创意如同凤凰般浴火重生。
项目基于自研的Plait画图框架开发，采用插件化架构，定位为轻量、开箱即用、可扩展的白板解决方案。官方在线地址：https://drawnix.com
GitHub 开源仓库：https://github.com/plait-board/drawnix （MIT 协议）
一、核心理念与项目定位
Drawnix 的核心理念是做“技术与创意之火的守护者”，致力于提供一个免费、开源、一体化的绘图环境，打破工具壁垒，让创意自由流动。
核心定位：
- 三位一体：思维导图 + 流程图 + 自由画布，减少多工具切换的繁琐
- 完全开源 & 数据自主：MIT 协议，用户可在线使用，也可 Docker 私有部署
- 轻量 + 可扩展：追求极简易用，同时开放插件机制，支持深度定制与二次开发
二、架构与技术亮点
1. 整体架构
项目采用Nxmonorepo 工作区规范，主要分为两层：
- apps/：面向用户的 Web 应用（drawnix.com）
- packages/：核心功能包（drawnix、react-board、react-text 等）
2. 插件化架构（最核心设计）
所有绘图能力（画笔、思维导图节点、Mermaid 流程图、图片插入等）都以插件形式实现，并动态注册到核心系统中。
优势：
- 业务逻辑与框架核心完全解耦
- 支持动态加载、按需组合
- 便于开发者开发自定义工具/元素/功能插件
- 可适配不同 UI 框架与富文本引擎（当前主要基于 React + Slate）
3. 状态管理与数据流
- 基于React Hooks进行轻量状态管理
- 用户操作 → 插件处理 → 更新中央状态 → 驱动 UI 重渲染
- 支持自动保存到浏览器本地存储（IndexedDB/LocalStorage）
4. UI 组件设计
高度模块化，便于主题定制与复用：
- 基础组件：颜色选择器、尺寸滑块、图标选择等
- 工具栏：主工具栏、缩放栏、主题切换栏
- 对话框：Markdown 转思维导图、Mermaid 代码编辑等
三、核心功能速览
| 功能 | 主要特点 | 典型使用场景 |
|---|---|---|
| 思维导图 | Tab 添加子节点、Enter 添加同级、支持 Markdown 一键转换 | 知识管理、会议纪要、产品脑暴 |
| 流程图 | 基础形状 + 连接线、支持Mermaid语法实时渲染与编辑 | 系统架构图、算法流程、业务流程图 |
| 自由绘画 | 画笔、形状、文本、图片插入、无限画布、缩放/拖拽 | 草图速写、远程白板、界面原型 |
| 其他 | 撤销/重做、复制粘贴、多主题、导出 PNG/JSON(.drawnix) | 日常记录、团队分享、版本备份 |
四、快速上手与操作技巧
在线体验
直接访问 https://drawnix.com，无需注册即可开始创作，所有数据保存在浏览器中。思维导图基本操作
- 点击思维导图工具 → 点击画布创建根节点
- 选中节点按Tab→ 创建子节点
- 按Enter→ 创建同级节点
- 右键节点或工具栏可调整样式、颜色、图标
- 高级技巧：直接粘贴 Markdown 层级文本 → 使用转换对话框一键生成导图
流程图（Mermaid）
- 选择 Mermaid 工具 → 输入代码（如 flowchart、sequenceDiagram 等）
- 支持实时预览与后续拖拽调整布局
示例代码：
自由绘画
- 选择画笔工具 → 支持粗细/颜色/描边/填充
- 支持插入图片、文本框、箭头、矩形/圆形等基础形状
- 鼠标滚轮/触控缩放，无限画布自由移动
导出与备份
- 导出 PNG（适合分享/报告插入）
- 导出 .drawnix JSON（可重新导入继续编辑）
- 重要文件建议定期手动导出备份
五、部署方式
在线使用（推荐新手）
https://drawnix.com本地开发启动
gitclone https://github.com/plait-board/drawnix.gitcddrawnixnpminstallnpmstart访问 http://localhost:7200
Docker 私有部署（推荐团队/数据敏感场景）
社区提供多种镜像方式，例如：dockerrun-d--namedrawnix-p7200:80 pubuzhixing/drawnix:latest访问 http://你的服务器IP:7200
六、优势 · 局限 · 最佳实践
优势
- 完全免费 + 开源 + 可自托管，数据 100% 自主可控
- 三种核心场景一体化，切换成本极低
- Markdown / Mermaid 文本 → 图形的快速转换极大提升效率
- 插件架构未来扩展空间巨大
当前局限
- 相比 Miro / XMind 等商业工具，高级美化、模板、动画等功能较弱
- 元素极多（>500 个节点）时，低配设备可能出现卡顿
- 在线版依赖浏览器缓存，换设备/清缓存需提前导出
最佳实践建议
- 优先用 Markdown/Mermaid 快速搭骨架，再进行图形化调整
- 为不同类型节点建立颜色/图标规范，提高可读性
- 重要画板定期导出 .drawnix文件备份
- 团队使用时建议私有部署 + 内网穿透（如 frp、ngrok），兼顾安全与便利
七、总结
Drawnix 是一款轻量、全能、理念先进的开源白板工具，尤其适合追求高性价比、数据自主权的用户群体：
- 学生、教师 → 笔记整理、课程设计
- 产品/程序员 → 需求梳理、架构图、快速原型
- 小团队 → 远程头脑风暴、轻量协作
如果你需要一个简单好用、不被商业化绑架、同时又具备一定扩展能力的白板工具，Drawnix 值得一试。
项目仍在快速发展中，建议关注 GitHub 仓库获取最新功能与修复。
祝你在 Drawnix 上创作愉快，灵感如凤凰般不断重生！🔥
)
