别再让流程图搬家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 buildnpm 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。让图表仓库不乱的两个小习惯用了一周我攒下两个习惯在库根目录建一个专门的Diagrams文件夹所有图集中存放找起来不迷路再给文件起个能看懂的名字比如订单流程.drawio而不是新图表 3。配上 SVG 天然适合 Git 版本控制这点整个图库像代码一样有迹可循。今晚就能做的小实验如果你也在 Obsidian 里记笔记、画图不妨今晚就试建一个 Diagrams 文件夹右键新建一张图画一张今晚到家后的流程图——买菜、做饭、追剧、睡觉。从第一张图开始你会慢慢发现专业画图和记笔记本来就该待在同一个地方。画完记得回来聊聊你的第一张图画了什么【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考