Obsidian 里画架构图不用切窗口drawio-obsidian 插件完整上手路线【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian打开 Obsidian 想给笔记配一张流程图你得先切到在线绘图工具、画完导出、再拖回笔记里——来回折腾几分钟思路全断了。这个场景是不是很眼熟drawio-obsidian插件名 Diagrams就是来终结这种折腾的它把专业绘图软件 Draw.io 的完整编辑器直接搬进 Obsidian 的窗口里让你在笔记旁边就地画图、就地保存、就地引用。装上它流程图、架构图、UML 图从此和笔记长在一起。下面这份路线图会带你从零开始先搞清楚它怎么工作再花几分钟装好它然后用三条最快路径画出第一张图最后学会把编辑器调成顺手的样子。第一阶先搞明白它到底替你做了什么一句话人话版这个插件在 Obsidian 内部内置了一份精简版的 Draw.io 编辑器不需要联网不需要第三方账号。它的工作方式很有意思插件会开启一个内置的绘图视图把 Draw.io 的编辑器塞进 Obsidian 的分屏面板里。你左侧写笔记、右侧画图两边互不干扰。关键的是Draw.io 的所有资源脚本、样式、图形库都被打包进了插件内部断网也能正常画图这比打开网页版省心得多。既然能画图就得先认识两种文件格式它们各有分工格式特点适合场景SVG纯文本、体积小、可被 Git 友好追踪笔记嵌入后按矢量清晰缩放想纳入版本控制的长期图表.drawio保留完整编辑信息图层、样式、连接关系一个不丢需要反复迭代的复杂图表插件两种都支持新建图表默认生成 SVG 文件同时也能打开和编辑.drawio文件。我的建议很简单日常够用选 SVG重度编辑选 .drawio。第二阶60 秒装机附一份成功判断标准人话版三条命令 一次激活装不上还能立刻定位是哪一步出了问题。先把源码拿到本地。打开终端执行git clone https://gitcode.com/gh_mirrors/dr/drawio-obsidian这一步成功与否很好判断当前目录下会出现一个drawio-obsidian文件夹。接着进入项目并安装依赖cd drawio-obsidian npm installnpm install会把插件开发需要的依赖包下载到本地这一步需要网络。看到终端刷出大量内容并最终回到命令行提示符、没有红字报错就算成功。然后执行构建命令npm run build这一步把 TypeScript 源码编译打包输出到dist/目录——里面会有main.js、manifest.json、styles.css三个文件。看到dist目录出现说明编译成功。最后把插件放进 Obsidian打开 Obsidian 的设置 → 社区插件先确认安全模式已关闭用从文件夹安装选择dist目录或手动把dist里的三个文件放进库的.obsidian/plugins/drawio-obsidian/文件夹回到插件列表启用Diagrams插件判断装没装好有个绝招首次启用会弹出一个欢迎窗口同时文件导航栏顶部会多出一个新建图表图标。两样都出现了说明插件已经活过来了。第三阶三条路径30 秒画出第一张图人话版想从哪下手都行右键、编辑器、导航栏各有各的入口路径不同结果一样。图 1Obsidian 中创建新图表的三处入口导航栏按钮与右键菜单并用路径 A从文件夹右键创建。在左侧文件导航栏中对着任意文件夹点击右键选择New diagram一个全新的空白图表就会生成并自动打开编辑器。默认文件名叫Untitled Diagram.svg如果重名会自动变成Untitled Diagram 2.svg不用担心覆盖。路径 B从编辑器右键插入。正在写笔记时在编辑区空白处右键选择Insert new diagram。它会立刻创建图表文件自动在光标位置插入![[Untitled Diagram.svg]]的引用并分屏打开编辑器——写完即嵌入一气呵成。路径 C从导航栏按钮创建。点文件导航栏顶部的新建图表图标或通过命令面板执行 Create a new diagram同样能秒建一张图。第四阶把图嵌进笔记实现边看边画人话版图表和笔记共享一个窗口用![[文件名.svg]]一句话搞定嵌入。图表建好、在分屏编辑器里画完内容保存后切回笔记视图你会看到下面这个上下分屏的格局图 2上方是笔记正文下方是 Draw.io 编辑器两侧工具栏、中间画布一应俱全这种布局最大的好处是参照物就在眼前笔记里写着需求下面的画布同步画结构改一句、画一笔思路不会断。想在其他笔记里引用图表只需要写一行![[你的图表.svg]]保存后它会以预览形式显示在笔记中点击预览又能一键回到编辑状态。第五阶改图也快四种方式随时杀回编辑器人话版图是拿来改的插件把重新进入编辑的入口铺得到处都是。面对一张已有图表你可以在文件导航栏右键.svg或.drawio文件选择Edit diagram在笔记中点击已嵌入的图表预览打开图表文件本身它会直接以绘图视图呈现从链接上下文菜单触发自动在水平分屏中打开编辑器图 3右键图表文件即可进入编辑笔记中的嵌入预览也支持直接打开第六阶把编辑器调成你的样子人话版界面主题、明暗模式、手绘风格、自定义样式全在设置里一个不落。在插件的设置页设置 → 第三方插件 → Diagrams里有几个值得花 30 秒的开关Theme界面主题提供 Full、Compact、Sketch 三种布局。Sketch 是默认的手绘风线条有铅笔质感做白板风格的流程图很有味道想要更正经的商务风切到 Full 或 Compact。Dark暗色模式可选自动跟随 Obsidian 主题、强制暗色或强制亮色。在暗色主题下画图眼睛舒服不少。Sketch手绘风绘制单独控制形状和连线是否带手绘质感和上面的 Sketch 主题是两码事可以分开开关。CSS snippets资深玩家可以把自定义 CSS 文件路径填进去深度定制编辑器外观。避坑清单五个最容易栽的跟头人话版把常见翻车点提前摆出来你就不用踩一遍才知道疼。它只认桌面端。插件标注isDesktopOnly移动端 App 上装不了也别慌这是设计如此。Obsidian 版本不能太老。插件要求 0.9.12 及以上绝大多数新版本没问题如果右键菜单里死活不出现 New diagram先检查版本号。编辑器空白或加载慢先查网络。虽然绘图资源已内嵌但个别功能仍依赖网络广告拦截插件偶尔会误伤内嵌 iframe可以暂时关掉排查。保存失败先看三件事。文件是否有写入权限、路径里是否混入了特殊字符、文件是否被其他程序占用。换到库根目录再试一次往往就好了。想长期迭代的图建议配 Git。SVG 是纯文本diff 清晰提交历史里能看清每次改动.drawio文件则记得勤备份。下一步行动把它变成你的绘图默认选项看完这篇别急着关掉页面。给你一份 10 分钟的动手挑战清单完成安装并确认欢迎弹窗出现用右键文件夹的方式建一张图画 3 个框、2 条连线在另一篇笔记里用![[你的图表.svg]]嵌入它把主题切到 Sketch 和 Full 各看一次选一个顺眼的在暗色模式下画 5 分钟感受一下对比度几个随时会用到的命令存进收藏夹npm run build # 重新构建插件改完代码后执行 npm run automation # 运行自动化测试验证功能是否正常从今往后架构评审的草图、项目推进的流程图、知识整理的思维导图都可以在笔记旁边就地解决。画图不再打断写作写作也不再缺席画图——这才是知识管理该有的手感。【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Obsidian 里画架构图不用切窗口：drawio-obsidian 插件完整上手路线
Obsidian 里画架构图不用切窗口drawio-obsidian 插件完整上手路线【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian打开 Obsidian 想给笔记配一张流程图你得先切到在线绘图工具、画完导出、再拖回笔记里——来回折腾几分钟思路全断了。这个场景是不是很眼熟drawio-obsidian插件名 Diagrams就是来终结这种折腾的它把专业绘图软件 Draw.io 的完整编辑器直接搬进 Obsidian 的窗口里让你在笔记旁边就地画图、就地保存、就地引用。装上它流程图、架构图、UML 图从此和笔记长在一起。下面这份路线图会带你从零开始先搞清楚它怎么工作再花几分钟装好它然后用三条最快路径画出第一张图最后学会把编辑器调成顺手的样子。第一阶先搞明白它到底替你做了什么一句话人话版这个插件在 Obsidian 内部内置了一份精简版的 Draw.io 编辑器不需要联网不需要第三方账号。它的工作方式很有意思插件会开启一个内置的绘图视图把 Draw.io 的编辑器塞进 Obsidian 的分屏面板里。你左侧写笔记、右侧画图两边互不干扰。关键的是Draw.io 的所有资源脚本、样式、图形库都被打包进了插件内部断网也能正常画图这比打开网页版省心得多。既然能画图就得先认识两种文件格式它们各有分工格式特点适合场景SVG纯文本、体积小、可被 Git 友好追踪笔记嵌入后按矢量清晰缩放想纳入版本控制的长期图表.drawio保留完整编辑信息图层、样式、连接关系一个不丢需要反复迭代的复杂图表插件两种都支持新建图表默认生成 SVG 文件同时也能打开和编辑.drawio文件。我的建议很简单日常够用选 SVG重度编辑选 .drawio。第二阶60 秒装机附一份成功判断标准人话版三条命令 一次激活装不上还能立刻定位是哪一步出了问题。先把源码拿到本地。打开终端执行git clone https://gitcode.com/gh_mirrors/dr/drawio-obsidian这一步成功与否很好判断当前目录下会出现一个drawio-obsidian文件夹。接着进入项目并安装依赖cd drawio-obsidian npm installnpm install会把插件开发需要的依赖包下载到本地这一步需要网络。看到终端刷出大量内容并最终回到命令行提示符、没有红字报错就算成功。然后执行构建命令npm run build这一步把 TypeScript 源码编译打包输出到dist/目录——里面会有main.js、manifest.json、styles.css三个文件。看到dist目录出现说明编译成功。最后把插件放进 Obsidian打开 Obsidian 的设置 → 社区插件先确认安全模式已关闭用从文件夹安装选择dist目录或手动把dist里的三个文件放进库的.obsidian/plugins/drawio-obsidian/文件夹回到插件列表启用Diagrams插件判断装没装好有个绝招首次启用会弹出一个欢迎窗口同时文件导航栏顶部会多出一个新建图表图标。两样都出现了说明插件已经活过来了。第三阶三条路径30 秒画出第一张图人话版想从哪下手都行右键、编辑器、导航栏各有各的入口路径不同结果一样。图 1Obsidian 中创建新图表的三处入口导航栏按钮与右键菜单并用路径 A从文件夹右键创建。在左侧文件导航栏中对着任意文件夹点击右键选择New diagram一个全新的空白图表就会生成并自动打开编辑器。默认文件名叫Untitled Diagram.svg如果重名会自动变成Untitled Diagram 2.svg不用担心覆盖。路径 B从编辑器右键插入。正在写笔记时在编辑区空白处右键选择Insert new diagram。它会立刻创建图表文件自动在光标位置插入![[Untitled Diagram.svg]]的引用并分屏打开编辑器——写完即嵌入一气呵成。路径 C从导航栏按钮创建。点文件导航栏顶部的新建图表图标或通过命令面板执行 Create a new diagram同样能秒建一张图。第四阶把图嵌进笔记实现边看边画人话版图表和笔记共享一个窗口用![[文件名.svg]]一句话搞定嵌入。图表建好、在分屏编辑器里画完内容保存后切回笔记视图你会看到下面这个上下分屏的格局图 2上方是笔记正文下方是 Draw.io 编辑器两侧工具栏、中间画布一应俱全这种布局最大的好处是参照物就在眼前笔记里写着需求下面的画布同步画结构改一句、画一笔思路不会断。想在其他笔记里引用图表只需要写一行![[你的图表.svg]]保存后它会以预览形式显示在笔记中点击预览又能一键回到编辑状态。第五阶改图也快四种方式随时杀回编辑器人话版图是拿来改的插件把重新进入编辑的入口铺得到处都是。面对一张已有图表你可以在文件导航栏右键.svg或.drawio文件选择Edit diagram在笔记中点击已嵌入的图表预览打开图表文件本身它会直接以绘图视图呈现从链接上下文菜单触发自动在水平分屏中打开编辑器图 3右键图表文件即可进入编辑笔记中的嵌入预览也支持直接打开第六阶把编辑器调成你的样子人话版界面主题、明暗模式、手绘风格、自定义样式全在设置里一个不落。在插件的设置页设置 → 第三方插件 → Diagrams里有几个值得花 30 秒的开关Theme界面主题提供 Full、Compact、Sketch 三种布局。Sketch 是默认的手绘风线条有铅笔质感做白板风格的流程图很有味道想要更正经的商务风切到 Full 或 Compact。Dark暗色模式可选自动跟随 Obsidian 主题、强制暗色或强制亮色。在暗色主题下画图眼睛舒服不少。Sketch手绘风绘制单独控制形状和连线是否带手绘质感和上面的 Sketch 主题是两码事可以分开开关。CSS snippets资深玩家可以把自定义 CSS 文件路径填进去深度定制编辑器外观。避坑清单五个最容易栽的跟头人话版把常见翻车点提前摆出来你就不用踩一遍才知道疼。它只认桌面端。插件标注isDesktopOnly移动端 App 上装不了也别慌这是设计如此。Obsidian 版本不能太老。插件要求 0.9.12 及以上绝大多数新版本没问题如果右键菜单里死活不出现 New diagram先检查版本号。编辑器空白或加载慢先查网络。虽然绘图资源已内嵌但个别功能仍依赖网络广告拦截插件偶尔会误伤内嵌 iframe可以暂时关掉排查。保存失败先看三件事。文件是否有写入权限、路径里是否混入了特殊字符、文件是否被其他程序占用。换到库根目录再试一次往往就好了。想长期迭代的图建议配 Git。SVG 是纯文本diff 清晰提交历史里能看清每次改动.drawio文件则记得勤备份。下一步行动把它变成你的绘图默认选项看完这篇别急着关掉页面。给你一份 10 分钟的动手挑战清单完成安装并确认欢迎弹窗出现用右键文件夹的方式建一张图画 3 个框、2 条连线在另一篇笔记里用![[你的图表.svg]]嵌入它把主题切到 Sketch 和 Full 各看一次选一个顺眼的在暗色模式下画 5 分钟感受一下对比度几个随时会用到的命令存进收藏夹npm run build # 重新构建插件改完代码后执行 npm run automation # 运行自动化测试验证功能是否正常从今往后架构评审的草图、项目推进的流程图、知识整理的思维导图都可以在笔记旁边就地解决。画图不再打断写作写作也不再缺席画图——这才是知识管理该有的手感。【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考