Drawnix：一款免费开源的白板工具，支持思维导图、流程图、类图和手绘图

目录

1.简介

2.功能特性

3.在线使用

3.1.画流程图

3.2.画类图

3.3.画思维导图

3.4.其它图

4.下载安装

5.总结

---

1.简介

        Drawnix 是一款基于 Plait 框架开发的免费开源白板工具，支持创建思维导图、流程图、类图、自由画等功能，旨在通过简洁的界面和强大的扩展性满足个人与团队的多样化绘图需求。特别适合个人创作、团队协作和技术文档可视化场景。

Drawnix 源代码托管在 GitHub：

https://github.com/plait-board/drawnix

2.功能特性

• • 💯 免费 + 开源，开箱即用，二次开发和私有化部署；

• • ⚒️ 支持思维导图、流程图；

• • 🖌 自由画笔，形状（矩形、圆形、三角形、菱形等）、线条、文字工具；

• • 😀 插入图片，Iconfont 表情；

• • 🚀 基于插件机制，支持多种 UI 框架（Angular、React），能够集成不同富文本框架（Slate）；

• • 🖼️ 📃 导出为图片（PNG、JPG）、JSON（.drawnix）；

• • 💾 自动保存：内容自动存储于浏览器缓存，避免数据丢失；

• • ⚡ 编辑特性：撤销、重做、复制、粘贴等；

• • 🌌 无限画布：可以自由缩放、滚动；

• • 🎨 主题模式：默认、缤纷、柔和、复古、暗夜、星空；

• • 📱 跨平台适配：兼容桌面和移动设备，响应式设计确保移动端操作体验；

• • 📈 支持 Mermaid 语法转换为流程图，简化结构化绘图流程；

• • ✨ 支持 Markdown 文本转换为思维导图。

3.在线使用

Drawnix 提供了一个在线应用，可以通过浏览器直接访问：

Drawnix - 开源白板工具

3.1.画流程图

Drawnix 完全支持流程图绘制，并且提供了两种灵活的绘制方式：「文本驱动生成」和「可视化拖拽编辑」，兼顾效率与灵活性，尤其适合技术流程图、业务流程梳理等场景。以下是具体功能和操作说明：

1.核心流程图功能与实现方式

1）Mermaid 语法生成（高效文本驱动）

Drawnix 深度集成了 Mermaid 流程图引擎，支持通过简单的文本描述快速生成标准化流程图。只需输入符合 Mermaid 语法的代码，即可自动渲染出包含节点、连接线、标签的流程图，且支持实时预览和修改。

示例代码（绘制一个简单的登录流程）：

代码：

graph TDA[用户访问登录页] --> B{输入账号密码}B -->|正确| C[验证通过]B -->|错误| D[提示重试]C --> E[跳转首页]D --> B

上述代码会生成包含判断逻辑、分支流程的可视化图表，节点形状（矩形、菱形等）和连接关系由语法自动定义。

2）可视化拖拽编辑（直观操作）

对于不熟悉语法的用户，Drawnix 提供「图形化工具库」，支持通过拖拽完成流程图绘制：

• 左侧工具栏包含基础流程图元素：开始 / 结束节点（椭圆形）、处理步骤（矩形）、判断条件（菱形）、输入 / 输出（平行四边形）等。
• 拖拽元素到画布后，可双击修改文本内容，通过「连接线工具」手动关联节点，支持自动吸附和路径优化（避免线条交叉）。

2.流程图编辑与扩展能力

1）样式自定义

生成的流程图支持精细化调整：

• 节点样式：修改填充色、边框粗细、字体大小（例如将关键节点设为红色高亮）。
• 连接线：调整线条类型（实线、虚线）、箭头样式，添加文本标签说明流程含义（如 “如果超时则”）。
• 布局调整：支持自动排版（横向 / 纵向）或手动拖拽节点位置，适合复杂流程图的布局优化。

2）与其他功能联动

• 可将流程图中的节点与思维导图关联（通过超链接），实现 “流程步骤→详细说明” 的跳转。
• 支持插入手绘批注（如用自由画笔标注流程中的风险点），兼顾结构化与灵活性。

3.操作步骤（以 Mermaid 方式为例）

1. 在 Drawnix 白板中，点击左侧工具栏「流程图」图标，选择「Mermaid 编辑器」。
2. 在弹出的编辑框中输入流程图代码（或直接粘贴现成的 Mermaid 代码），实时预览效果。
3. 点击「插入」将流程图添加到画布，如需修改，双击图表进入代码编辑模式，更新后自动刷新。
4. 如需调整样式，选中图表后通过右侧属性面板修改颜色、布局等参数。

示例如下：

更多画流程图相关的介绍，可参考：

Flowcharts Syntax | Mermaid

3.2.画类图

Drawnix 可以绘制类图，其核心实现方式是通过集成 Mermaid 语法解析器，支持直接输入 Mermaid 类图代码生成可视化图表，并允许在白板上对生成的类图进行二次编辑。

1.类图绘制的核心机制

1）Mermaid 语法支持

Drawnix 的流程图功能已深度集成 Mermaid 引擎，而 Mermaid 语法原生支持类图（Class Diagram）的定义。用户只需在白板的「Mermaid 输入框」中编写类图代码，即可一键生成结构化类图。例如：

代码：

classDiagramclass Animal {- String name+ void eat()+ void sleep()}class Dog {+ String breed+ void bark()}class HotDog{- int  temperature+ void bark()}Animal <|-- DogDog<|-- HotDog

类图：

这段代码会生成包含 Animal 和 Dog 类的继承关系图，其中属性（如 name）和方法（如 eat()）的可见性（- 表示私有，+ 表示公有）会被清晰标注。

2）可视化编辑与交互

生成的类图可在白板上自由拖拽、调整位置，节点和连接线支持选中后修改样式（如颜色、粗细）。若需调整类的属性或关系，只需双击图形元素即可进入文本编辑模式，修改后实时刷新图表。

2.操作步骤与使用示例

进入 Mermaid 类图模式

• 在 Drawnix 白板中点击左侧工具栏的「流程图」图标，选择「Mermaid 输入」选项。
• 在弹出的输入框中直接编写类图代码，或粘贴从 AI 工具（如 DeepSeek、Monica）生成的 Mermaid 类图文本。
• 点击「插入」按钮，类图将自动渲染到画布上。

使用示例如下：

代码：

---
title: Animal example
---
classDiagramnote "From Duck till Zebra"Animal <|-- Ducknote for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"Animal <|-- FishAnimal <|-- ZebraAnimal : +int ageAnimal : +String genderAnimal: +isMammal()Animal: +mate()class Duck{+String beakColor+swim()+quack()}class Fish{-int sizeInFeet-canEat()}class Zebra{+bool is_wild+run()}

类图：

更多类图相关的画，可参考：

Class diagrams | Mermaid

3.3.画思维导图

Drawnix 完全支持思维导图绘制，并且提供了「结构化文本生成」和「自由拖拽编辑」两种模式，兼顾高效创作与灵活调整，适合知识梳理、头脑风暴、项目规划等场景。

1.思维导图的核心实现方式

1）Markdown 文本驱动生成（高效结构化）

Drawnix 支持通过 Markdown 层级语法快速生成思维导图，无需手动调整节点关系。只需按照标题层级（# 表示一级节点，## 表示二级节点，以此类推）输入内容，即可自动生成树形结构。

示例代码（生成一个产品规划思维导图）：

# 新产品规划
## 核心功能
- 用户管理
- 数据可视化
## 技术选型
- 前端：React
- 后端：Go
## 时间节点
- Q1：需求调研
- Q2：开发测试

输入后会自动生成以 “新产品规划” 为根节点，包含 “核心功能”“技术选型”“时间节点” 三个分支的思维导图，层级关系清晰。

2）可视化拖拽编辑（灵活调整）

对于偏好手动操作的用户，Drawnix 提供直观的拖拽界面：

• 从左侧工具栏选择「思维导图」工具，点击画布创建根节点，输入核心主题（如 “市场分析”）。
• 选中节点后，通过「添加子节点」「添加同级节点」按钮扩展分支，或直接拖拽节点调整位置和层级。
• 支持自由调整节点间距、连接线样式（直线 / 曲线），避免分支拥挤。

2.思维导图的编辑与扩展能力

1）节点操作与样式定制

• 节点内容：支持富文本编辑（加粗、斜体、链接），可插入图标或图片（如用📊表示数据相关节点）。
• 样式调整：修改节点颜色（如用蓝色表示已完成，橙色表示进行中）、边框形状（圆角矩形、圆形），以及连接线的粗细和颜色。
• 批量操作：支持框选多个节点统一调整样式，或通过「折叠 / 展开」功能简化复杂思维导图的显示。

2）布局与结构优化

• 自动布局：提供「水平树状」「垂直树状」「辐射状」等预设布局，一键调整整体结构。
• 手动优化：拖拽节点时，连接线会自动适配路径，避免交叉；支持锁定重要节点位置，防止误操作。

3）与其他功能的联动

• 可将思维导图节点与流程图、手绘图关联（通过超链接），例如点击 “用户注册流程” 节点跳转到对应的流程图细节。
• 支持导出为图片或 .drawnix 格式，方便嵌入文档或二次编辑。

3.操作步骤（以 Markdown 方式为例）

1. 在 Drawnix 白板中，点击左侧工具栏「思维导图」图标，选择「Markdown 导入」。
2. 在输入框中按层级输入 Markdown 文本（或粘贴现有文档），实时预览生成的思维导图结构。
3. 点击「插入」添加到画布，如需修改内容，双击节点进入编辑模式；如需调整样式，选中节点后通过右侧面板修改颜色、布局等。
4. 完成后，可通过「导出」功能保存为 PNG 或原生格式。

示例如下：

更多画思维导图的介绍，可参考：

Mindmap | Mermaid

3.4.其它图

如果是画其它类型的图，可参考：

About Mermaid | Mermaid

4.下载安装

Drawnix 支持本地安装，使用 Docker 进行部署的命令如下：

docker pull pubuzhixing/drawnix:latestdocker run -d \--restart always  \--name drawnix \-p 7200:80 \pubuzhixing/drawnix

运行服务之后，在浏览器中输入以下地址进行访问：

http://127.0.0.1:7200/

5.总结

        Drawnix 提供了「文本生成 + 可视化编辑」的双重流程图解决方案，既满足高效生成（适合技术人员），又支持直观操作（适合非技术用户），且能与其他绘图模式（如思维导图）无缝结合，非常适合团队协作中的流程梳理、方案演示等场景。