Drawnix 新手入门完整教程：界面布局与核心操作一网打尽

Drawnix 新手入门完整教程：界面布局与核心操作一网打尽

【免费下载链接】drawnix开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.项目地址: https://gitcode.com/plait-board/drawnix

Drawnix 是一款免费开源的白板工具，主打"All in one"一体化创作体验，内置思维导图、流程图、自由画笔等丰富功能，无需注册、无需安装，打开网页就能用。本教程将带你零基础快速上手，从界面布局到核心操作一步步讲透，让你 10 分钟就能画出第一张属于自己的思维导图和流程图。

一、Drawnix 界面布局详解：三大区域一看就懂

Drawnix 的界面非常简洁，整个白板工具主要由三个区域组成，掌握了它们就等于掌握了 80% 的操作。

1. 顶部工具栏：应用菜单与快捷编辑

顶部左侧是应用工具栏，包含四个常用按钮：

• 菜单按钮：点击后可以打开、保存、另存为、导出图片（PNG/JPG/SVG）以及清除画布；
• 撤销 / 重做：误操作时一键回退，快捷键分别为Cmd/Ctrl+Z和Cmd/Ctrl+Shift+Z；
• 复制 / 删除：选中元素后才会出现，方便快速管理画布内容。

顶部中央是创建工具栏，这是最核心的部分，从手形工具到思维导图、文本、画笔、箭头、形状、图片、更多工具一应俱全，每个按钮都有对应的快捷键，鼠标悬停即可看到提示。

2. 无限画布：自由缩放与漫游

中间就是巨大的无限画布，你可以用滚轮缩放，按住空格或手形工具拖动画布漫游。画布默认带网格背景，帮助你对齐元素，创作时完全不受边界限制。

3. 右下角缩放控制条

右下角提供缩放控制：放大（Cmd/Ctrl++）、缩小（Cmd/Ctrl+-），点击百分比数字还可以一键自适应视图或缩放到 100%。

二、核心操作指南：五分钟学会四大功能

1. 如何快速创建思维导图

点击工具栏的思维导图按钮（快捷键M），然后在画布任意位置点击，就会生成一个中心主题节点：

• 选中节点后，按Tab键添加子主题，按Enter键添加同级主题；
• 双击节点文本即可编辑内容，支持富文本格式；
• 选中节点后，右上角会弹出浮动工具栏，可以快速调整填充颜色、字体颜色、字号和边框样式。

更惊艳的是，Drawnix 支持Markdown 一键转思维导图：点击工具栏的"更多工具"，选择"Markdown 到 Drawnix"，粘贴一段 Markdown 大纲，点击插入，一张结构清晰的思维导图就自动生成了，特别适合快速梳理知识体系。

2. 手把手绘制流程图

画流程图只需两步：画形状 + 连箭头。

• 画形状：点击形状按钮，从面板中选择长方形（R）、圆形（O）、三角形、菱形、平行四边形、圆角矩形、开始/结束等流程符号，在画布上拖拽即可；
• 连箭头：点击箭头按钮，支持直线、肘线、曲线三种样式，从一个形状的边缘拖到另一个形状，箭头会自动吸附连接；
• 美化细节：选中任意形状后，浮动工具栏支持修改填充颜色、边框颜色、边框线型（实线/虚线/点线）；选中箭头还可设置起点和终点的箭头标记样式。

另外，通过"更多工具 → Mermaid 到 Drawnix"，你可以直接粘贴 Mermaid 语法，自动生成流程图、序列图、类图，适合程序员的日常绘图需求。

3. 自由画笔与橡皮擦

点击画笔按钮（快捷键P）即可在画布上自由涂鸦，面板内置多款预设笔刷，支持调整笔触颜色和粗细；画错了按E切换到橡皮擦擦除。手绘草稿、标注批注都非常顺手。

4. 文本、图片与更多工具

• 文本：点击文本按钮（T）后点击画布即可输入文字，支持字号、颜色调整；
• 图片：快捷键Cmd/Ctrl+U或点击图片按钮，即可从本地插入图片到画布；
• 更多工具：聚合了 Markdown 转思维导图、Mermaid 转流程图等进阶功能，持续扩展中。

三、必收藏的快捷键清单

四、文件保存与导出：数据安全不用愁

Drawnix 内置了自动保存功能，所有数据默认存储在浏览器本地缓存中，关闭页面也不用担心丢失。想要更稳妥地管理文件，可以这样做：

• 另存为：通过菜单将画布保存为.drawnix（JSON 格式）文件，可随时"打开"恢复；
• 导出图片：菜单 → 导出图片，支持SVG、PNG、JPG三种格式，导出 PNG 时还可以勾选"透明背景"选项，方便直接嵌入到文档或演示文稿中。

五、个性化设置：主题与多语言

Drawnix 内置6 种主题配色：默认、缤纷、柔和、复古、暗夜、星空，一键切换，深色模式下绘图同样舒适。同时支持中文、English、Русский、العربية、Tiếng Việt等多种界面语言，在应用菜单中即可切换。

六、进阶：想自己部署或二次开发？

Drawnix 不仅是个好用的工具，还是一个插件化架构的开源项目。如果你对二次开发感兴趣，可以克隆仓库：

git clone https://gitcode.com/plait-board/drawnix

核心白板应用代码位于packages/drawnix，视图层基于packages/react-board，文本渲染基于packages/react-text。界面工具栏相关代码可以参考 app-toolbar.tsx、creation-toolbar.tsx，快捷键逻辑在 with-hotkey.ts，中英文文案定义在 zh.ts。安装依赖后运行npm install && npm run start即可启动本地开发环境。

写在最后

作为一款完全免费开源的白板工具，Drawnix 把思维导图、流程图、自由画、文本、图片等高频需求整合在一个清爽的界面里，学习成本极低。按照本文的步骤练习一遍，你很快就能用它完成知识整理、流程梳理和创意表达。现在就打开画布，开始你的第一次创作吧！

【免费下载链接】drawnix开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.项目地址: https://gitcode.com/plait-board/drawnix