draw.io 是一个功能丰富的流程图绘制软件。此前写论文时我一直使用这个软件画图。在没有系统性的画图需要，转而变成了有时想要随手画矢量示意图后，这个软件启动交互流程步骤繁琐，我便极少使用它了。但在使用了 tldraw, excalidraw 后，又回到了 draw.io，才发现这个软件的可定制性其实非常强，完全能满足随手画图的需要。这里记录一下如何把 draw.io 变成一个更适合打开即用的、默认效果更加现代的白板应用。

（草……windows 截图这边缘的黑框好丑啊！）

为什么是 draw.io

先对比一下适合需求的竞品（不想看请跳转下一节）：

• visio: 收费，而且 mac 上没有。
• tldraw, excalidraw: 更适合作为 sdk 使用，作为成品有些过于简单，在易用的同时，想多做一点非流程图的东西又很复杂，中文字体也不契合其默认的手写设计。而且并没有打包为桌面 App，文件关联是个问题。
• processon: 要登录
• figma: 要用梯子登录
• powerpoint: ……我只是想偶尔画个示意图
• 飞书: 每30天要扫码登录 ……我只是想偶尔画个示意图
• adobe illustrator: 没有常用预制样式库，漫长的启动时间，对于没接触过的人学习成本很高。
• 无边记、goodnotes: 苹果移动端生态 only

draw.io 没有上述的问题，但它由于设计之初不是个草图应用，所以：

• 默认较为重型的 UI
• 启动先选择储存位置，太慢了
• 默认组件样式很丑，看起来只适合工控图
• 有时会感觉曲线箭头很难调，怎么都不流畅

我根据以上三点问题大致说一下如何改进。

更换UI布局

默认的 UI 较为传统的重型设计，熟悉这类UI是相当好用的，但按钮组过多会显得不够轻便。在 其它→主题→外观 中可以更换为其他的主题，有5套可用：经典、极简、简易、草图、atlas。

我个人用得比较多的是「简易」，并且关掉了左侧栏形状库的栏，改为用顶栏，右侧格式栏在顶部有快速按钮展开。

习惯 tldraw、excalidraw 的用户应该还是更适合「草图」主题，绑定了基础形状的快捷键。需要去手动调出格式栏。

更改启动流程

默认情况下，启动时会弹出选择保存位置的框。新建画布时，又会先看到一大串模板的选择题，还得去想命名。但很多时候，随便画图是不需要保存的。

在经典主题下，需要去「其它」→「显示开始画面」上取消勾选。在其它的主题下，则需要去菜单的「设置」→「配置」里取消勾选「显示开始画面」。

配置默认样式

要做到更改默认样式，需要写 JSON 配置。尽管可以在侧栏按「设置为默认样式」，但只能当前打开的窗口生效，刷新、新开文档都会导致默认样式回到最初的样子。

在经典主题下，需要通过 「其它」→「配置」打开，其它主题下，则是「设置」→「配置」。

我的配置已经上传到 gist。

JSON 写法参考了如下文档：

• Customise default shape libraries, templates and plugins in draw.io for Confluence Cloud - draw.io
• Configure the draw.io editor

draw.io 的图形分为 vertex（顶点图形） 和 edge（箭头、线段）两类，选中按 ctrl + e 即可查看当前图形应用的样式。

配色与样式设计

整体采用的粗线条粗体，比较契合现代简约又活泼的趋势。edge 采用黑色，与高饱和的 vertex 非常好搭配。

直接抄的无边记的颜色，有的有轻微的改动。不过无边记最印象化的水蓝色没有抄上去。

默认的配色改为了最后一个蓝色。以下配色均可以在右侧的「格式栏」中找到并应用。

关于圆角矩形

现代设计中圆角矩形用得更多。对于圆角的弧度，可以通过属性 Arc Size 去调整。可以点击设置为默认样式，也可以配置到 JSON 里。

如果你使用的「经典」主题，需要自己选择圆角矩形的图形。在「草图」主题下，按 D 就是默认配置好的圆角矩形，相当简单。「简易」主题下的位置如图：

关于曲线设置

曲线设置不对会变得很难调整，一张图说明大多数情况下的曲线操作与设置：

想更换为手写风格？

在不选中任何东西的情况下，把右侧格式栏的草图勾选上即可，就可以获得类似 excalidraw 的手写风格啦！

另外，如果没有自定义 JSON， 「草图」主题下的默认样式也是手写风格的。

关于默认字体（附网页用字号推荐）

JSON 中这几个字段设置默认字体。我默认英文是 Inter，中文是使用的系统黑体。文字大小我设置为了网页标准 16px。

{
  "customFonts": [
    "Inter",
    "pingfang sc"
  ],
  "defaultVertexStyle": {
    "fontSize": 16,
    "fontFamily": "Inter"
  },
  "defaultEdgeStyle": {
    "fontSize": 16,
    "fontFamily": "Inter"
  }
}

另外介绍一下常用网页文字大小的规范，现代的美术设计由于自己屏幕很大，或者对标准视距缩放大小没太多概念，非常容易把字给设置得很小（点名星穹铁道）

• 16px 为默认正文大小，但由于主要是考虑了希腊字母面积比较小，所以也有的中文网站会设置为 15px。
• 14px 偏次级小段落、不重要的文字，长时间阅读会累。
• 13px 为代码常用大小。
• 12px 已经非常小了，是正常视距下最小可视大小，适合做脚注、引用。

再小的字号不推荐作为内容性文本使用。

关于背景网格

在简易主题中默认关闭的，经典主题中可以通过配置 JSON 为默认关闭。关掉背景网格会显得比较现代化。

{
  "defaultGridEnabled": false,
  "defaultPageVisible": false
}

但还是有时可能需要开启网格，那就什么都不选中，右侧栏开启网格就可以了。

其他使用 Tips

导出设置

导出时注意一下缩放。网页标准大小字体为 16px，编辑时画布 100% 缩放下一切正常。但是当导出为位图（jpg, png）时，需要根据你的显示器缩放进行放大，否则文字一定会糊。

我的显示器为 150% 界面缩放，因此需要缩放到 150% 才能大概清晰，如果要让 4k 屏也看得无比清晰，最好导出 200% 缩放，且 dpi 尽量在 180 以上。

另外可以直接框选后右键复制，不一定要导出。

一个文件画多张图

经常会遇到多张同系列图的需求。为此，你可以选择都画在一页上，要用时框选特定范围，右键复制为 png 。这样很适合边聊天边画图发给别人，但也会失去缩放、加白底、加白边等设置。至少你得打个组，把 16px 的文字放大后再复制，以确保结果不会糊。

draw.io 也可以分页，建议是一页一个图，可批量导出。

从 Mermaid 生成图、嵌入 Notion

mermaid 是一种画流程图的代码，比较适合不想可视化排列对齐的强迫症。

draw.io 可以在菜单中的「高级」使用 mermaid 生成图，下面的图就是导入 mermaid 生成的。

由于 notion 无法画图，在 notion 我都是用的 mermaid，有点不好看但至少目的达到了。不过最近发现，draw.io 的导出可以选择直接嵌入notion，点开还能进行编辑……实现方式是图像数据全部存放在了链接里……不得不说 draw.io 自主兼容性做得很强，从接入了那么多网盘就可见一斑。

自定义CSS

如果还是觉得 UI 太丑了，在 Configure the draw.io editor 中可以找到自定义 CSS 的部分（但我觉得 UI 排列上还是不错的，这足够了）