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. 整体架构

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. 绘图功能

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 框架的插件系统，核心特点：

2. 与 Plait 框架关系

Drawnix 是基于 Plait 框架的开箱即用产品，Plait 是底层画图框架，代表着公司在知识库产品（PingCode Wiki）上的技术沉淀。

两者关系：

• Drawnix：产品层，面向最终用户
• Plait：框架层，面向开发者

3. 本地优先（Local-first）

• 数据存储在浏览器缓存
• 自动保存功能
• 支持 JSON 格式导出备份

五、部署方案

1. 本地开发

npm install
npm run start

2. Docker 部署

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. 技术选型分析

3. 应用场景

• 个人知识管理
• 团队协作绘图
• 思维导图制作
• 流程图设计
• 自由绘画创作

八、发展方向

1. 短期规划

• Dawn（破晓）版本开发
• 高频迭代 drawnix.com

2. 技术演进

• 更多富文本框架集成
• 更多 UI 框架支持
• 插件生态建设

3. 产品定位

• 开箱即用的工具产品
• 与 Plait 框架形成产品与框架双轮驱动

参考资料

1. Drawnix GitHub 仓库
2. Plait 开源画图框架
3. Drawnix 在线应用
4. Slate 富文本编辑器框架