Drawnix：一款集成了思维导图和流程图的开源白板工具

Drawnix是一款功能强大的开源在线白板工具，它将思维导图、流程图和手绘功能集成在一个无限画布上，为用户提供了一个自由创作的空间。这款工具是免费的，并且可以直接在浏览器中使用，无需复杂的安装部署。Drawnix基于插件化架构开发，这使得它具有很强的扩展性，能够支持不同的前端框架和富文本编辑器。 该工具支持自动保存功能，可以将数据存储在浏览器缓存中，有效防止数据丢失。此外，它还支持将内容导出为多种格式，并能在桌面和移动设备上提供一致的良好体验。对于习惯使用代码生成图表的用户，Drawnix还支持通过Mermaid语法和Markdown文本直接转换成流程图和思维导图。

功能列表

• 免费开源: 用户可以免费使用所有功能，也可以根据自己的需求进行二次开发和私有化部署。
• 多功能集成: 支持思维导图、流程图、手绘图、形状绘制、线条和文字工具，满足多样化的绘图需求。
• 插件化架构: 底层基于Plait框架，支持集成多种UI框架（如Angular、React）和富文本框架。
• 无限画布: 提供无限的创作空间，用户可以随意缩放和滚动画布。
• 自动保存: 绘图内容会自动保存在浏览器缓存中，避免因意外情况导致数据丢失。
• 多种导出格式: 支持将作品导出为PNG、JPG等图片格式，或.drawnix的JSON文件。
• 主题模式: 内置多种主题，包括默认、缤纷、柔和、复古、暗夜和星空模式，用户可以根据喜好切换。
• 跨平台使用: 响应式设计确保在桌面和移动设备上都能获得良好的操作体验。
• 代码生成图表: 支持使用Mermaid语法将代码块转换为流程图，也支持将Markdown文本转换为思维导（新支持🔥🔥🔥）。
• 丰富的编辑功能: 提供撤销、重做、复制、粘贴等基础编辑功能。

使用帮助

Drawnix 旨在提供一种“开箱即用”的体验，用户可以直接访问其官方网站 https://drawnix.com 开始使用，无需下载或安装任何软件。

本地安装部署

对于希望进行二次开发或私有化部署的用户，可以按照以下步骤在本地环境中安装Drawnix。

环境要求:
在开始之前，请确保您的电脑已经安装了Node.js。

安装步骤:

1. 下载源码:
   访问Drawnix的GitHub仓库页面（https://github.com/plait-board/drawnix），点击页面上的“Code”按钮，然后选择“Download ZIP”将项目源码下载到本地。
2. 解压文件:
   将下载的ZIP文件解压到您选择的任意文件夹中。
3. 安装依赖:
   打开命令行工具（如Terminal或CMD），进入到解压后的项目根目录。运行以下命令来安装项目所需的依赖包：

npm install

这个过程可能需要一些时间，因为它会下载并安装所有必需的依赖项。

4. 启动项目:
   依赖安装完成后，继续在命令行中运行以下命令来启动Drawnix应用：

npm run start

命令成功执行后，您会在命令行中看到应用已经成功启动，并提示您可以在浏览器中访问http://localhost:4200（或指定的其他端口）。

5. 访问应用:
   打开您的浏览器，输入上述地址，即可开始在本地环境中使用Drawnix的全部功能。

核心功能操作指南

1. 思维导图

• 创建节点: 在画布的空白处双击鼠标，即可创建一个根节点。
• 添加子节点: 选中一个节点，您会看到节点周围出现一个“+”号图标，点击它即可在该节点下方创建一个子节点。
• 编辑文本: 双击任意节点，即可进入文本编辑模式，您可以修改节点中的文字内容。
• 拖拽移动: 按住鼠标左键拖动一个节点，可以改变其在思维导图中的位置。将其拖拽到另一个节点上可以改变其父子关系。

2. 流程图

• 创建图形: 从左侧的工具栏中选择您需要的流程图形状（如矩形、菱形、圆形等），然后在画布上拖拽以绘制。
• 连接线: 选中一个图形，将鼠标悬停在图形的边缘，会出现连接点。按住鼠标左键从一个图形的连接点拖拽到另一个图形的连接点，即可创建一条连接线。
• 添加箭头: 从一个图形的边缘拖拽出线条时，可以创建带方向的箭头，用于表示流程的方向。

3. 自由绘画与形状工具

• 画笔工具: 在左侧工具栏选择画笔工具，可以直接在画布上进行自由绘制，适合草图和快速标注。
• 形状工具: 工具栏提供了矩形、圆形、三角形等多种基础形状，选择后可在画布上直接绘制。
• 插入图片: 点击工具栏中的图片图标，您可以上传本地图片并将其插入到画布的任意位置。

4. Mermaid 和 Markdown 语法支持

• Markdown转思维导图: 在工具栏选择Markdown工具，粘贴编写好的Markdown文本，Drawnix会自动将其转换成结构化的思维导图。
• Mermaid转流程图: 同样地，选择Mermaid工具，粘贴Mermaid语法的代码，可以快速生成对应的流程图。

5. 画布操作

• 平移: 按住鼠标中键或按住空格键的同时按住鼠标左键，可以拖动画布进行平移。
• 缩放: 使用鼠标滚轮可以方便地对画布进行放大和缩小操作，实现无限画布的导航。

应用场景

1. 团队协作与头脑风暴
   在团队会议中，成员们可以使用Drawnix共同在一个无限画布上进行头脑风暴，实时记录想法、绘制思维导图，并将讨论结果整理成流程图，极大地提升了协作效率。
2. 项目规划与管理
   项目经理可以使用Drawnix来创建项目流程图、任务分解结构（WBS）的思维导图，清晰地展示项目各个阶段的关联和依赖关系，方便团队成员理解和执行。
3. 学习与知识整理
   学生和研究人员可以利用Drawnix来整理课堂笔记、构建知识体系的思维导图，或者绘制复杂的科学流程图，使抽象的知识变得直观易懂。
4. 软件设计与架构
   软件开发者和架构师可以使用Drawnix绘制系统架构图、UML图和数据流程图，帮助团队更好地理解软件设计和模块间的交互逻辑。

QA

1. Drawnix是完全免费的吗？
   是的，Drawnix是一款完全免费且开源的工具。您可以免费使用它的所有功能，也可以自由地进行二次开发或私有化部署。
2. 我的数据安全吗？
   Drawnix默认会将您的绘图数据自动保存在浏览器的本地缓存中。这意味着数据存储在您自己的设备上，不会上传到云端服务器，保证了数据的私密性。
3. Drawnix支持哪些导出格式？
   目前，您可以将画布上的内容导出为PNG、JPG等常见的图片格式，也可以导出为.drawnix格式的JSON文件，方便后续导入和编辑。
4. 我需要注册账号才能使用吗？
   不需要。Drawnix的设计理念是“开箱即用”，您只需要打开官方网站就可以立即开始创作，无需任何注册或登录流程。