企业官网建设流程全解析

VS Code 里画 Draw.io 图表的 5 种姿势：vscode-drawio 核心功能完整指南

【免费下载链接】vscode-drawioThis unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-drawio

架构图在浏览器画完，一导出成图片就和代码脱节了；想改一个方框，得重新截一张图。vscode-drawio 把 Draw.io（diagrams.net）画板完整搬进 VS Code，让图表文件像代码一样可编辑、可对比、还能和源码互相跳转。

这个插件的本质是一层"文档同步"：Draw.io 图表本身就是 XML 文本，插件把画布的每次操作实时写回文件，于是图表就能享受 Git 对比、代码评审和搜索替换的全部待遇。

画板进编辑器：打开文件即开画

装好插件后，新建任意.drawio/.dio文件直接打开，就是一个完整的离线 Draw.io 画板，无需再开浏览器。

一个文件，两种编辑器

同一个文件可以在"画布编辑器"和"文本编辑器"之间切换（命令面板搜Reopen Editor With...）。

"workbench.editorAssociations": { "*.svg": "hediet.vscode-drawio-text" }

想连普通.svg也交给它，在 settings.json 加一行即可。适用场景：画布画不顺手时，直接用文本能力批量改图。

图片里藏着的可编辑图表

.drawio.svg/.drawio.png是合法的图片文件，图表数据嵌在文件元数据里，可直接放进 README，无需导出。在 VS Code 里编辑画布再保存，图片会实时更新。

适用场景：README 里的架构图。注意：若你在意 Git diff，请优先用.drawio，.drawio.png是二进制，对比不可读。

画布和 XML 并排编辑

同一文件开两个编辑器：画布 + XML，双向实时同步。画布里改方框，XML 跟着变；文本里搜索替换，画布跟着变。

适用场景：大图表批量重命名节点、精修样式属性。

图表住进 Markdown：文档里的活图

drawio 代码块

在 Markdown 里写一个 ```drawio 围栏代码块，把 mxfile 的 XML 放进去，块上方会出现 CodeLens 操作行：Edit、Inline Edit、Preview、Lock/Unlock。Markdown 预览里图表会直接渲染出来。

适用场景：设计文档内嵌架构图，评审时不用点开别处。

图片链接就地编辑

Markdown 中用图片语法引用本仓库的.drawio.svg/.drawio.png文件时，会被识别为可编辑图表，点一下就能就地打开画布修改，编辑结果仍写回原图文件。

适用场景：一张图被多篇文档复用，改一处全更新。

Mermaid 一键转 Draw.io

文档里已有的 Mermaid 流程图，用Draw.io: Convert Mermaid to Draw.io命令可直接转成可编辑的 draw.io 图，继续精修。适用场景：老文档里的 DSL 图升级为矢量可维护图。

图与代码互跳：Code Link 功能

这是最能体现"图表和代码同框"价值的部分，逻辑见 docs/code-link.md。

节点名加 # 号即成跳转入口

把节点或连线命名为#MyClass（# 后跟符号名），开启状态栏的 Code Link 开关后，双击该节点就跳到符号定义处。支持任何实现了 VS Code 工作区符号搜索的语言，TypeScript、C++、Go 都可用。

适用场景：视觉书签、基于图的代码导览（code tour）。

选中节点，反向建立链接

不必手写 # 名字：选中节点后按Shift+F3（Link Code with Selected Node），把当前代码位置写进节点；或在资源管理器对文件右键Link File With Selected Node。层级符号用点分隔，如MyClass.myMethod。

适用场景：先有图后补链接，或维护大型架构图。

截图也能挂回源码

把 React 组件截图直接粘贴进图表，再对截图节点执行链接命令，指向它的源码文件。看图即知来源，看源码即知界面。

组合拳：把功能叠起来

1. README 活架构图：.drawio.svg+ Markdown 图片引用 + Code Link。图进仓库可 diff，节点还能双击跳源码，新人 onboarding 材料一步到位。
2. 可评审的文档图：drawio代码块 + Lock 锁定。图表进入 Git diff 可评审，锁住后防止误改。
3. 大图表批量维护：画布/XML 并排 + VS Code 搜索替换，一次改几十处节点文字，画布实时跟着变。

新手避坑

1. Code Link 不跳转：先打开目标符号所在的至少一个代码文件。VS Code 只索引已打开文件所属工程，符号才搜得到（该文件本身不需要包含符号）。
2. 忘记打开开关：Code Link 默认关闭。打开图表后看状态栏的 "Code Link" 按钮，点一下才生效。
3. 选错文件格式：.drawio.png是二进制图片，Git 对比无效；需要 diff、搜索、合并的图表请用.drawio或.dio。

装好插件，新建一个.drawio文件，把下一张架构图直接画进 VS Code。仓库地址：https://gitcode.com/gh_mirrors/vs/vscode-drawio

【免费下载链接】vscode-drawioThis unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-drawio