别再让流程图搬家：Draw.io Obsidian 插件，从零到一画进你的笔记-平芜编程栈

别再让流程图搬家：Draw.io Obsidian 插件，从零到一画进你的笔记

【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian

写周报那晚，我对着 Obsidian 里空着的"系统架构说明"发呆——脑子里有张图，却得先去另一个软件画。朋友丢来一个叫 drawio-obsidian 的项目，这是 Obsidian 的 Draw.io 图表插件，装上后流程图直接长在笔记里，SVG 和 .drawio 两种格式都能用。试用一周，这篇把真实体验讲给你听。

🛠️ 花一杯咖啡的时间，给 Obsidian 添个随身工具箱

装这个插件的思路和装普通插件不太一样，得自己动手编译一次，但真不难。先把源码 clone 到本地：

git clone https://gitcode.com/gh_mirrors/dr/drawio-obsidian cd drawio-obsidian npm install npm run build

npm run build会生成一个main.js，这就是插件的"本体"。接着打开 Obsidian，进设置里的社区插件页，选"从文件夹安装"，指向刚才那个目录，启用名为Diagrams的插件就完事了。整个过程像给笔记本配了套随身工具箱——装好之后，画图再也不用离开当前窗口。想研究插件内部结构的话，源码都躺在src/目录里，配置信息看manifest.json就行。

🖱️ 三处右键，画出 Obsidian 里的第一张流程图

装好你会发现，开画的方式比想象中多。最常用的是在文件管理器里右键任意文件夹，菜单里会多出一项New diagram，点一下就在这个文件夹里新建一张空白图；在编辑器的空白处右键，选Insert new diagram，则直接插进当前笔记；嫌麻烦的话，顶部工具栏那个新建图标也能一步到位。三条路指向同一个出口：一张全新的 SVG 图表文件。

图1：新建图表的三处入口，右键文件夹或右键编辑器空白处都能触发

画布用起来，像一块顺手又专业的白板

新建的图会在内嵌的 Draw.io 编辑器里打开，界面你多半见过：左侧是一排基础图形工具，文本框、矩形、椭圆、箭头都在这儿；中间的大块画布随便拖，选中节点就能改文字、改颜色；右上角的格式面板可以微调线条和字体；底部还有缩放滑块，图大了就缩小看全局。这套操作和我以前用的在线画图工具几乎没有学习成本差，只是它现在安静地待在 Obsidian 里面。

用一对双括号，让第一张流程图嵌进笔记

图画完，真正让人上瘾的是嵌入这一步。在笔记里写一句[[你的流程图.svg]]，插件会自动把它渲染成预览，文字和图表共处一页，读起来像一篇自带插图的说明书。换成.drawio结尾的链接效果一样，插件都能识别。

图2：笔记上方嵌着图表预览，下方就是同文件的 Draw.io 编辑器，边写边改

想改图了？右键一下，编辑器原地出现

最让我惊喜的是改图的顺手程度。不管是文件管理里右键图表文件选Edit diagram，还是直接右键笔记里那张嵌入预览，编辑器都会立刻打开，改完保存，笔记里的预览同步更新。以前"改一版图 = 重新导出 + 重新贴图"的流程，现在压缩成了"右键、拖动、保存"三个动作。

图3：编辑已有图表的两条入口，右键图表文件或笔记中的嵌入预览都可以

SVG 还是 .drawio？按用途来挑

插件支持两种格式，选哪个取决于你怎么用这张图：

格式	最擅长的事	留个心眼
SVG	纯文本文件，丢进 Git 仓库 diff 一目了然，适合版本管理	部分编辑信息可能被简化
.drawio	完整保留图层、样式等编辑信息，长期反复改图更稳	记得定期备份，别只存一份

简单说，给团队协作或代码仓库配套的图，用 SVG；自己长期维护、来回调整的图，用 .drawio。