我用 diagrams.net 画图差不多有五年了，现在团队里做架构图、时序图、业务流程图，基本都靠它。很多人第一次看到 app.diagrams.net 这个网址，会以为它是个模仿 Visio 的“山寨版”工具，但实际上它就是 draw.io 的正式在线版，免费、不需要注册账号，文件直接存在你自己选的地方——本地磁盘、Google Drive、OneDrive 或者 GitHub 都可以。如果你是做软件、产品、运维，或者日常需要画方案图、流程图的同学，这篇文章就是我给你的一份实操经验总结，从最基础的操作习惯到能提升效率的小技巧，都会覆盖到。
有人说“画图工具还不简单，拖拖拽拽就行”，但真正能把图画得又快又好看、后续还好修改的人并不多。diagrams.net 的流畅度和可定制性比很多人想象中强得多，只是大部分教程只讲按钮功能，不讲实际操作中怎么用才顺。我这次把自己在项目里高频使用的技巧整理成一套流程，按“准备 → 画图 → 连接线 → 组织管理 → 导出交付”的顺序来，最后附上我踩过的坑和排查记录。
1. 为什么我日常画图，首选 diagrams.net 在线版
1.1 它解决了传统画图工具的哪些痛点
提到在线画图，很多人第一反应是 ProcessOn、腾讯文档、或者公司内部的绘图平台。我的痛点很明确：不想被账号体系绑架，不想把公司内部架构图放在第三方服务器上，更不想每个月为几个功能付费。diagrams.net 在线版最让我放心的一点，是它没有任何强制注册流程，打开就能画，文件保存目的地完全由你说了算。
数据隐私这块才是真正的刚需。画架构图、网络拓扑图经常涉及内部服务名、IP 段、数据库类型这些信息，我愿意用本地存储模式，画完的图直接存到电脑上，浏览器里不留任何同步记录。这一点很多在线工具做不到，它们默认把图存到自己的云端。所以从“文件怎么存”的角度讲，diagrams.net 几乎是目前唯一能满足“免费 + 隐私 + 可移植”的组合方案。
兼容性也是我长期用它的一大原因。它支持导入 Visio 的 vsdx 文件，也能导出 PDF、PNG、SVG、HTML 等格式。团队里如果有同事用 Visio 画的图，我可以直接转成 diagrams.net 格式继续编辑，不用重新照着画一遍。这个兼容能力在我处理客户交付文档时帮了非常大的忙。
1.2 在线版、桌面版、VS Code 插件怎么选
diagrams.net 实际有几种形态，很多新手不知道该怎么选：
| 形态 | 打开方式 | 适合场景 |
|---|---|---|
| 在线版 | 浏览器访问 app.diagrams.net | 快速画图、临时方案、低频率使用者 |
| 桌面版 | 下载 Electron 客户端，本地运行 | 大量离线画图、复杂大图、有隐私要求的项目 |
| VS Code 插件 | 安装 Draw.io Integration 扩展 | 开发者直接在代码仓库里维护架构图 |
我个人的建议是：如果只是偶尔画个流程图，用在线版就够了，它的文件格式和桌面版完全一致。如果你一周有三次以上要画图，或者经常要处理几 MB 的大图，桌面版流畅度会明显更好。做开发的同学请配合 VS Code 插件，直接右键新建 .drawio.svg 文件，图形修改后 commit 到 Git 里，图就跟着代码版本走了。
这里还有个容易踩坑的细节：在线版和桌面版虽然功能一致，但某些依赖浏览器能力的操作（比如直接拖拽本地文件进画布解析）表现略有不同。不要在两套环境之间换来换去，认准一个当主力，另一个当辅助。
2. 新手上路：图形库、画布和样式的 3 个高频操作
2.1 自定义图形库，把常用组件固定到侧边栏
打开 app.diagrams.net 后，左侧会显示一堆图形分类。默认状态下的图形库是常用基础形状，但你画架构图必然需要用云服务、网络设备、UML 等专用图标。点击左下方的“更多形状”按钮，会弹出一个大弹窗，里面按类别列出了所有可用图形库。
我强烈建议你花两分钟做一次“瘦身”：只勾选与自己业务相关的库。比如我画系统架构图，通常只勾选“一般”、“网络”、“云”、“AWS / Azure / GCP”中的一两种，其他全部取消。图形库开得太多，侧边栏到后面会卡，而且找图形的时候眼睛花。某个库这次没用到，也别取消，它不会影响任何东西。
如果你发现自己常用的是一套私有组件，比如公司规定的统一 logo、数据库图标、消息队列图标，可以把它们画好之后，全选拖到左侧空白处。diagrams.net 会让你输入库名称，保存后就会创建一个自定义形状库，下次打开在线版它还在。这个功能等于你有了一套自己的“私人图章”。
2.2 网格、吸附和容器，画布就是你的白板
新画布默认开了网格，这条线就是对齐生命线。绘制图形时，图形会自动吸附到网格交叉点上，拖动的过程中如果有轻微偏差，松手后也会被“吸”回网格。这个特性看似基础，实际决定了整张图的整齐度。我喜欢在动手前先按需调整网格间距，做架构图时设成 10 或 20 像素，足够精细又不会让人崩溃。
对齐的另一个大杀器是辅助参考线。拖一个图形靠近另一个图形的中间或者边缘时，屏幕上会出现一条紫色的对齐线，表示“现在俩图形中线是对齐状态”。多人协作、交付给客户的图，最怕的就是所有模块东歪西扭，利用参考线把同一行的图形高度统一、间距统一，专业感立刻翻倍。
容器功能是新手的盲区，但它真的非常有用。把一个图形拖进另一个图形的内部区域，外侧图形会自动变成一个“父容器”，内部图形成为子元素。移动父容器时子元素跟着走；如果把子元素挪出边界，它就和父容器脱离关系。我画网络拓扑时，常常用一个大矩形当作 VPC 或私有网络的边界，再将一堆云资源图标放进里面，这样逻辑归属一眼就能看明白。
2.3 统一默认样式，建立自己和团队的可视化规范
很多人画出来的图显得“菜”，问题不在内容，在样式。字体大小不统一、边框颜色混乱、线条粗细随缘，这些都会拉低整张图的质感。diagrams.net 允许你修改默认样式，设置一次，以后每次新建图形的时候自动套用。
具体操作：随便拖一个图形出来，把它调成最满意的效果，比如蓝色边框、白色填充、微软雅黑 12 号字，然后右键选择“设为默认样式”。之后每添加一个新图形，都会默认继承这套样式。如果你想全局改一批已有图形的样式，选中其中一个改好后，用编辑菜单里的“选择相同”功能，按填充颜色或边框颜色选中所有同类图形，最后打开格式面板统一设置。
样式这东西，越早定越好。我现在的做法是给团队定了一套基础规范：主色一种，强调色一种，警告色一种，字体统一微软雅黑。凡是画架构图，一律按这个谱系走。这样交付出去的图，不署名字也能看出来是同一个团队出的。
3. 连接线处理得好不好，决定了这张图专不专业
3.1 两种连线方式，以及什么时候用哪一种
在 diagrams.net 里拖出一根线时，你要注意鼠标落点的位置。如果把鼠标放到图形边缘的绿色小箭头上再拖，生成的是一个“边缘连接点”，也就是线绑在图形边框上，图形移动时线自动跟着伸缩，不会断。这是画的图还能继续修改的基础。
那什么时候需要用另一种连法呢？当图形本身内部结构很重要，比如一个组件有两个接口，分别对接上下游，你会希望线的端点在固定的锚点上，而不是在外边界上乱滑。这时按住 Alt 键再拖拽连线，线的端点就会变成硬锚点，识别到一个精确的“+”号位置，松手后端点固定死，除非你手动移动，否则它不会被吸附逻辑带跑。
我的实践经验是：流程图、时序图用边缘连接点，因为图形大、逻辑简单，跟着边缘走很舒服；架构图、接口图用固定锚点，因为接口位置是语义的一部分。两种连线方式没有谁优谁劣，关键是同一条图里别混用太厉害，否则线头一会儿在边上、一会儿在接口上，看着非常乱。
3.2 给连接线加标签和线型样式的细节
画好的连接线默认是光秃秃的，但业务流程图里“是 / 否”、“成功 / 失败”、“发送请求”这些语义必须通过线标签表达。双击线中间，会出现一个输入框，按需填写即可。标签默认出现在线的几何中心，你也可以拖动它到线的任意位置，比如靠近起点还是靠近终点。
如果你觉得线总是盖在图形上很碍眼，可以调整线的属性：右键线，选择“样式”，在弹出的右侧面板里可以把线的颜色改成浅灰、虚线、更细的 1px。我做架构图时非常喜欢 1px 的灰色虚线连接线，因为实线粗线会抢掉图形本身的注意力，而虚线能很好地保持“信息有连接但主次清晰”的视觉效果。
还有个小细节我要专门说一下：连接线的转角样式。diagrams.net 支持直线、正交折线、曲线三种。大多数架构图用正交折线最专业，因为它干净利落，能表达“从这边到那边”的走向；涉及数据流的图可以尝试曲线，视觉更柔顺。不要全图都用平滑曲线，那会让整张图显得油腻。
3.3 连线自动避让与一键重新路由
连接线一多，交叉就难以避免，这是所有画图工具的通用烦恼。diagrams.net 有一个“重新路由线条”的隐藏功能：选中所有连接线（快捷键 Ctrl+A 容易把图形也全选进去，建议用框选，只拖到线所在区域），然后在菜单“形状”里点击“重新路由线条”，软件会自动整理线的路径，尽可能减少交叉和绕路。
如果你觉得自己的图在多线交汇时怎么手动调都别扭，也可以直接使用“工具 → 布局”里的自动布局。diagrams.net 内置了垂直树、水平树、环形布局等算法，选中所有节点和线后，一键重新排列。自动算法不一定完美，但往往比手动排列要更平衡，跑完以后我再花一分钟做局部微调就收工了。
这条经验特别适用于从零开始画的脑图或组织架构图。先不考虑美观，直接铺开所有图形，拉好连接关系，最后跑一次布局算法，大多数时候效果比纯手工一张张摆要好得多，至少线条和间距会均匀很多。
3.4 泳道图的快速操作与对齐技巧
画跨部门流程图时，泳道图几乎是绕不开的形式。diagrams.net 左侧图形库的“更多形状”里找到“BPMN”或直接搜“swimlane”就能找到泳道。拖一个泳道形状到画布上，它就是横向的通道。右键泳道区域，选择“插入泳道”可以快速新增一个赛道，不用手动再画。
泳道的拖拽有个规律：拖动左边界整体的宽窄，拖动上下边界改单个泳道的高度。画好后要同时对齐多条泳道，常规的选中后右键“对齐”就行。我习惯把泳道所有外边框设置为同一种颜色，内部文字居左或居中，看板效果会很干净。
泳道图最常见的问题是“图形放进了错误的泳道”。如果图已经画到一半，想把某个节点从 A 泳道挪到 B 泳道，直接拖动它到目标泳道即可，连接线会跟着重新布线。但如果你的连接线出现了奇怪的绕路，多半是图形和泳道的父子关系乱了，检查一下左侧的层叠面板就能发现问题。
4. 图层、模板和批量修改：大图不乱的秘密武器
4.1 图层：把不同维度内容拆开，互不干扰
图层是 diagrams.net 里被低估得最严重的功能，其实它就是绘图界的 PS。画一张大架构图时，我习惯做三个图层：第一个放基础设施（服务器、数据库、网络设备），第二个放应用层（服务、模块、API），第三个放标注层（说明文字、箭头解释、版本号）。操作方法是点击菜单“视图 → 图层”，打开图层面板后，先把当前图形选中，然后在图层面板里点“分配图层”。
图层能带来什么实际好处呢？最直接的场景是给不同角色的观众做演示。给运维看时，关闭应用层，只留基础设施层；给研发看时，反过来显示应用层。你不用为了两种观众各维护一份全量图，只维护一张图，用图层控制显示范围就行。
一个容易踩的坑是：从旧版本软件导入的图，可能没有图层概念，所有元素都在默认图层里。此时给这些元素分配图层，要留意原来的组合关系。组合图形里的子元素会继承父元素的图层设置，如果发现某个图层不听使唤，先检查元素是否被组合了。
4.2 模板和个人形状库，把重复劳动减到最低
我自己维护了大约十几个模板，覆盖系统架构、时序图、用例图、网络拓扑、会议记录图这几类。新建图的时候，我从来不用空白模板起步，而是从“文件 → 从模板新建”里挑一个接近需求的原型，在这个基础上改内容，这样既能复用样式，又不用每次从零调整画布范围。
如果你发现自己偶尔会把同类图画很多次，比如每次方案评审都要出一张“系统现状图”，那我建议把这张图的核心组件拖到自定义形状库里保存下来。下次用的时候，直接拖出来改文字，三分钟就能出一张新图。真正的高手画图不是一点点画出来的，而是“拼出来”的。
4.3 按属性批量查找和修改图形
图形多了以后，靠肉眼找一个元素是很痛苦的事。diagrams.net 的“编辑 → 查找 / 替换”功能，可以按文本内容搜索整个文档，找到后就自动定位。替换功能还能批量修改文本，比如把图里所有“生产环境”改成“正式环境”，一键完成。
还有一个比查找更常用的技巧：颜色筛选。如果在格式面板里想统一改所有红色填充的方块，先选中任意一个红色方块，右键“选择相同 → 填充颜色”，所有同填充色的图形就全被选上了。同理也可以按边框色、线型、字体等属性批量选中。这比手动在画布上一个个点要高效太多，面对几十个节点的大图时，几乎是救命功能。
批量操作后一定要重新走一遍自己的眼睛检查流程。自动选择偶尔会把一些“虽然颜色相同但语义不同”的图形误选进来，改完之后交代不清，反而出事。所以我一般会先按属性选择，再瞄一眼画布的闪烁选区，确认合规再继续操作。
5. 保存、导出与集成：让图画完就能用
5.1 文件存储方案怎么选，格式后缀代表什么
在线版新建图后，第一次保存时，diagrams.net 会弹出存储选择界面，让你选设备、Google Drive、OneDrive 或 GitHub 中的一个。我建议你三思再选，因为这个选择会影响后面所有的操作习惯。我的原则很简单：个人项目存本地设备；团队协作存在公司用的云盘或者 Git 仓库里。
关于格式后缀，这里有个很关键的认知：
- .drawio 是标准的原生格式，本质是压缩过的 XML，里面包含图形的全部数据和样式信息；
- .drawio.svg 是“带 SVG 外壳的 drawio 文件”，既能当普通图片在浏览器中查看，也能直接用编辑器打开修改，这是最推荐的文件格式；
- .xml 和 .drawio 基本等价，只是压缩方式略不同；
- .html 是自带交互查看器的单页文件，发给别人很方便，打开就能看图。
我个人的推荐是：开发项目用 .drawio.svg，日常方案文档用 .drawio，发给外部非技术同事看时用 PDF 或 HTML。千万别只存一个 .png，图片没法二次编辑，后面改方案就彻底被动了。
5.2 导出 PNG、PDF、SVG 时的清晰度控制
导出图片最常翻车的点是“导出后模糊”。如果你直接 Ctrl+E 导出 PNG 后用微信发出去，到了对方手机上可能像打了马赛克。根本原因在于导出面板里的缩放比例默认是 100%。对于展示型图片，我会把缩放比例调到 150% 或 200%，这样同样的图片分辨率会增加，但是视觉效果不会变。
如果你要导出 PDF，注意左下角有个“页面视图”概念，画布上所有元素会按页面边界切割成多页 PDF。默认只有一页，如果图超出页面范围，导出的 PDF 会把多余的图形切掉。这时候点击画布左下角的加号新增页面，或者用“调整页面到图形大小”功能，让 PDF 的每一页完整容纳对应的内容。
SVG 是所有格式里最灵活的，导出后依然是矢量图形，放大任意倍数都不会糊。有些导入场景（比如直接贴到支持 SVG 的文档系统里）非常好用，但如果对方只是拿去看一眼，SVG 反而没有 PNG 方便，因为他们得打开文件才能看，没法在聊天窗口直接预览。
5.3 把图嵌入到博客、GitHub 和文档工具
diagrams.net 的图在博客里的通用做法是导出 PNG 或 SVG，然后插入到文章正文中。如果你是技术博主，想在博客里展示带交互能力的 drawio 图，可以导出 HTML 或者用 iframe 嵌入；但我的建议是：博客里放静态图片就够了，交互画图对读者没有太大增量价值。
GitHub 用户这里要重点说：在代码仓库里维护 .drawio.svg 文件，实测下来是最顺滑的方案。文件可以直接被 GitHub 渲染预览，也能用 VS Code 插件打开编辑，二合一的体验让架构图的维护成本低到令人舒服。你甚至可以把这个文件当成文档的一部分提交。
Notion、飞书这类文档工具，一般可以直接粘贴图片内容。我通常先导出 SVG，打开后全选复制，再在文档里粘贴，很多工具会自动转成清晰图片。如果粘出来是乱码，就退一步用 2 倍分辨率的 PNG 导入，效果也不差。
5.4 多人协作与 Git 仓库中的工作方式
在线版没有实时多人协作功能，这是它和 Figma 类产品的本质区别，但换个角度看也不是坏处。每次保存后只让文件在自己手里流转，反而避免了几个人同时改一张图导致版本混乱。如果确实要多人分工，最好的方案是拆图：不同模块放到不同画布页面或不同文件里，最后汇总到一个总图。
在 Git 仓库里维护 .drawio 文件时，最痛苦的是冲突合并。官方格式本质是一个大的 XML 文件，任何人同时改同一个文件，Git 都会报冲突。团队实践里，我坚持两条规则：第一，同一时间只允许一个人编辑某一个图文件，避免并行改；第二，每次改完尽量只改增量，不要把整个文件到处调格式。这两条说起来容易，执行起来需要团队默契。
配合 VS Code 插件，可以直接在代码编辑器里打开 .drawio.svg 文件，改完保存，Git 变更记录里能看出你改了哪个文件。有分支策略的话，架构图的维护就能纳入正常代码评审流程，这对团队规范化是非常大的提升。
6. 在线画图常见问题与排查技巧实录
6.1 界面空白、加载不出来时怎么救
在线版偶尔会遇到打开后一片空白的情况。最先排除的是网络环境：浏览器访问不了 app.diagrams.net 的资源时，页面就会白屏。换个网络（比如手机热点）先试试，能打开就说明是本地网络问题。不推荐用可靠性差的代理工具来处理，正常网络环境下不应该出这个问题。
浏览器自身的缓存也可能导致白屏。我的习惯是用无痕模式打开一次，无痕能跑通，说明主流缓存有冲突。或者打开浏览器开发者工具，在 Network 面板里刷新看资源加载情况，如果发现有资源卡住或报错，清掉该域名缓存后重试。这些操作不需要多高深的技能，按顺序排查，基本都能解决。
6.2 图越来越卡，如何给大图瘦身
图一复杂，在线版就会开始卡顿。我遇到的严重情况是一张图里有上千个元素，每次拖动都要等两秒。先别急着换桌面版，试试这几步：把不需要的图片素材删除；图形阴影全部关掉；停用图形库中不用的分类；最后检查是否有很多“零碎”的线重叠在一个点上。
还有一个很容易被忽略的优化项：清理未使用的样式。在“文件 → 属性”或图形右键菜单里，找“删除未使用的样式”，可以把文档里残留的样式定义清掉。这个方法能真正减掉 XML 的体积，卡顿时立竿见影。
如果瘦身后仍然卡，那就是硬件或浏览器性能问题。换成桌面版应用，性能会有一个数量级的提升，毕竟浏览器渲染和本地应用渲染的机制差别很大。画大型网络拓扑图、复杂流程图的同学，直接上桌面版是我的强烈建议。
6.3 保存的文件打不开或样式丢失
文件打不开，最常见的版本兼容问题。新版 diagrams.net 保存的文件，旧版打不开；但旧版的文件用新版打开基本没有问题。如果你需要和同事交换文件，确认双方版本都升级到最新，能少很多麻烦。如果文件损坏，可以尝试把扩展名改为 .zip 解压查看，drawio 文件内部就是一个 XML 结构，没准能救回一部分内容。
样式丢失通常发生在跨工具迁移时，比如从 Visio 导入 vsdx 文件。导入后会出现文字偏移、颜色不对、图形大小不一致的情况，这不是 diagramms.net 的问题，而是 Visio 自己的形状模型和 drawing.io 并不能完全映射。遇到这种情况，我现在的做法是认命：把 Visio 文件当作参考底图，用 diagrams.net 重绘一遍。重绘一次通常半小时，但之后的文件可编辑性远高于导入产物，长期来看是划算的。
还有一种“样式丢失”是显示层面的：打开图时提示缺少某些形状库。这往往是因为原图使用了自定义库，但你的环境里没有加载。在“更多形状”里找到对应库，勾选上，图形就恢复正常显示。
6.4 中文字体和快捷键的问题
中文字体这块，只要在格式面板里设置好中文字体，比如微软雅黑、思源黑体，表格和文本的渲染都会正常。出问题的时候大多是在 Linux 或 Mac 环境下，某些 Windows 字体不存在，于是显示乱码或直接回退成默认字体。解决办法是统一使用跨平台字体，或导出之前先确认目标设备是否有对应字体。
快捷键“失灵”大概率是这样的情况：焦点还在文本输入框里，快捷键被输入框吃掉了。先单击画布空白处，再按快捷键。另外中文输入法在中文全角状态下，很多快捷键也会失效或者变成全角字符，记得先切到英文输入模式。我列几个最常用的快捷键，记牢这几个就能很大程度提升速度：
- Ctrl+D：快速复制图形
- Ctrl+G / Ctrl+Shift+G：组合 / 取消组合
- Ctrl+Shift+C / Ctrl+Shift+V：复制样式 / 粘贴样式
- Ctrl+Shift+Z：重做
完整的快捷键表可以在帮助菜单中找到，按 Ctrl+Shift+/ 也可以调出来。
6.5 导出模糊、布局错位的修复思路
导出模糊的修复思路前面已经讲过，调导出缩放比例，但有一个隐藏细节：如果你的图形里有外嵌图片，输入高分辨率图片再导出确实会更清晰，但如果你插入的是低分辨率截图，导出时不管 scale 调到多少，图片本身不会变清楚。这类图片只能回到原始素材重新截取。
布局错位大多发生在导出 PDF 时，原因是页面边界和画布边界不一致。先看看左下角页面缩略图，把页面拖到画布内容正中央，或者使用“调整页面到图形大小”这个功能，保证内容完整。导出前用预览窗口看一遍，确认没有元素被切断，再点导出也不迟。
多页导出的时候，每页内容是否对齐也需要留意。如果几个页面内容高低不齐，导出的 PDF 翻页时视觉跳动非常明显。我习惯在每页的相同坐标放一个参照点，画完后再删掉，但如果你想追求效率，也可以在页面设置的边距里填统一数值，页面之间的视觉一致性就会好很多。
用到现在，我最大的体会是：画图工具不在于功能多，而在于你能不能把想法快速准确地可视化。diagrams.net 最打动我的就是没有账户体系、文件自己做主，还有那一套可以无限折腾的自定义能力。没基础的人拖出一个方块就开始画，有经验的人配合图层、模板和查找替换把绘图时间压缩到分钟级。因为软件本身的复杂性不高，提升效率的重点完全落在操作习惯上。希望这篇东西能帮你少走一点弯路，下次手痒想看更花哨的玩法时，建议从自定义形状和自动布局开始折腾，那才是真正拉开效率差距的地方。
