在Obsidian中绘制流程图Draw.io Obsidian插件的完整上手指南【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian晚上十点你刚在笔记里理清了一个项目的来龙去脉却发现架构图还在另一个软件里躺着。画好图再截图、贴回笔记、同步到网盘——下次要改只能整张重画。这不是你效率低而是工具在割裂你的工作流。Draw.io Obsidian插件在Obsidian里显示为“Diagrams”把专业流程图编辑器整体搬进了笔记应用创建、编辑、嵌入都在同一个窗口完成流程图从此和文字住在同一个家。如果你正在寻找一款能在Obsidian中绘制流程图、架构图的插件这一篇就是为你准备的。这一页先解决你的5个真实痛点在动手之前先对照一下这些场景中了几个图与文割裂画图用一个软件记笔记用另一个思路在切换间流失截图不可编辑图表以图片形式贴进笔记改一个字都得重画专业工具劝退Visio、draw.io 桌面版功能虽全但学习成本让新手望而却步版本混乱图表文件格式五花八门想用 Git 管理却无能为力嵌入即终点很多插件的图表只能“显示”点开不能改下面你将要走完的这条实战路径会把上面5个痛点一次清空。3分钟完成安装激活三步命令加一次点击插件需要从源码构建好在全程只需要三行命令。打开终端逐条执行git clone https://gitcode.com/gh_mirrors/dr/drawio-obsidian cd drawio-obsidian npm install npm run buildgit clone把插件源码克隆到本地npm install安装构建所需的依赖包首次运行会花一两分钟npm run build编译 TypeScript 源码生成 Obsidian 认得的main.js构建完成后打开 Obsidian 的设置页 →“社区插件”→“从文件夹安装”选择drawio-obsidian这个目录然后启用名为Diagrams的插件即可。Obsidian 0.9.12 及以上版本都能运行。如何在Obsidian中创建第一个流程图插件启用后创建图表有三种入口任选其一在左侧文件管理器中右键任意文件夹选择“New diagram”在笔记编辑区右键空白处选择“Insert new diagram”点击顶部工具栏的新建图表图标图1右键菜单中的 New diagram / Insert new diagram是新建图表最顺手的入口选择保存位置后插件会生成一个.drawio或.svg文件并自动打开编辑器——你已经站在画布前了。在Obsidian中编辑Draw.io图表一套熟悉的专业界面编辑器界面是完整的 draw.io 工作台不是简化版左侧工具栏文本、矩形、椭圆、箭头等基础图形拖进画布即用中间画布区自由拖放、连线、对齐缩放毫无压力右侧格式面板调整颜色、线条样式、字体、布局等属性图2下方是 draw.io 编辑器画布上方笔记可同时查看一边写说明一边改图更妙的是你可以上下分屏上面是笔记正文下面是图表编辑器改图的同时对照文字思路不中断。把图表嵌入笔记的两种方法图表画好就该住进笔记里了。用 Obsidian 的嵌入语法在正文中输入![[你的图表.svg]]直接显示为可预览的图表![[你的图表.drawio]]保留完整编辑信息点击即可回编辑器嵌入后点击图表预览就能再次进入编辑界面所见即所得。对旧图表的修改会实时同步到笔记里不再有“截图已过时”的尴尬。编辑已有图表右键一步到位已经存在的.svg或.drawio文件无需重新打开编辑器。在文件管理器中右键该文件选择“Edit diagram”图表即刻进入编辑状态。图3对已存在的 .svg 图表文件右键Edit diagram 就是编辑入口这也意味着你完全可以用其他工具画图、再用本插件编辑文件格式天然互通。进阶玩法让图表和知识库一起生长掌握了基本操作后试试把这些技巧织进你的日常流程配合双链在笔记里用[[图表名]]引用图表Obsidian 会自动生成双向链接知识图谱里也能看到它统一归档建一个Diagrams文件夹集中存放图表配合描述性命名如“订单流程架构图.drawio”检索一目了然纳入版本控制SVG 本质是纯文本可直接纳入 Git每次修改都有记录团队协作不再担心覆盖关于两种格式一张表帮你决策对比项SVG.drawio体积小纯文本较大含完整编辑数据版本控制非常适合 Git 追踪可用但 diff 不友好编辑体验可编辑保留全部编辑信息适用场景协作、发布、预览长期维护的复杂图经验之谈需要多人协作的图用 SVG需要反复返工的复杂图用 .drawio两者可随时转换。新手最容易踩的坑5条血泪经验这些坑几乎每个新手都会踩提前知道能省下大把时间以为 build 失败是环境问题多半是没进项目目录就执行了npm install先cd再装包准在笔记里写[图表名]而非![[图表名]]少一个感叹号图表就只是链接不是预览混淆“嵌入”和“插入”插入是新建图表文件嵌入是把已有图表显示到笔记中方向别弄反用截图代替嵌入截图无法再编辑等于放弃了这个插件一半的价值忘记 SVg 和 svg 的文件后缀Obsidian 区分大小写写错后缀会识别失败保持统一即可现在画下你的第一张图不需要学完所有功能不需要背快捷键。打开笔记右键新建拖一个矩形连一条箭头——你的第一张流程图就这样诞生了它和你的文字笔记躺在一起随时可以修改随时可以分享。下一次灵感来袭时愿你能在同一扇窗里把想法一次画完。✨【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
在Obsidian中绘制流程图Draw.io Obsidian插件的完整上手指南【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian晚上十点你刚在笔记里理清了一个项目的来龙去脉却发现架构图还在另一个软件里躺着。画好图再截图、贴回笔记、同步到网盘——下次要改只能整张重画。这不是你效率低而是工具在割裂你的工作流。Draw.io Obsidian插件在Obsidian里显示为“Diagrams”把专业流程图编辑器整体搬进了笔记应用创建、编辑、嵌入都在同一个窗口完成流程图从此和文字住在同一个家。如果你正在寻找一款能在Obsidian中绘制流程图、架构图的插件这一篇就是为你准备的。这一页先解决你的5个真实痛点在动手之前先对照一下这些场景中了几个图与文割裂画图用一个软件记笔记用另一个思路在切换间流失截图不可编辑图表以图片形式贴进笔记改一个字都得重画专业工具劝退Visio、draw.io 桌面版功能虽全但学习成本让新手望而却步版本混乱图表文件格式五花八门想用 Git 管理却无能为力嵌入即终点很多插件的图表只能“显示”点开不能改下面你将要走完的这条实战路径会把上面5个痛点一次清空。3分钟完成安装激活三步命令加一次点击插件需要从源码构建好在全程只需要三行命令。打开终端逐条执行git clone https://gitcode.com/gh_mirrors/dr/drawio-obsidian cd drawio-obsidian npm install npm run buildgit clone把插件源码克隆到本地npm install安装构建所需的依赖包首次运行会花一两分钟npm run build编译 TypeScript 源码生成 Obsidian 认得的main.js构建完成后打开 Obsidian 的设置页 →“社区插件”→“从文件夹安装”选择drawio-obsidian这个目录然后启用名为Diagrams的插件即可。Obsidian 0.9.12 及以上版本都能运行。如何在Obsidian中创建第一个流程图插件启用后创建图表有三种入口任选其一在左侧文件管理器中右键任意文件夹选择“New diagram”在笔记编辑区右键空白处选择“Insert new diagram”点击顶部工具栏的新建图表图标图1右键菜单中的 New diagram / Insert new diagram是新建图表最顺手的入口选择保存位置后插件会生成一个.drawio或.svg文件并自动打开编辑器——你已经站在画布前了。在Obsidian中编辑Draw.io图表一套熟悉的专业界面编辑器界面是完整的 draw.io 工作台不是简化版左侧工具栏文本、矩形、椭圆、箭头等基础图形拖进画布即用中间画布区自由拖放、连线、对齐缩放毫无压力右侧格式面板调整颜色、线条样式、字体、布局等属性图2下方是 draw.io 编辑器画布上方笔记可同时查看一边写说明一边改图更妙的是你可以上下分屏上面是笔记正文下面是图表编辑器改图的同时对照文字思路不中断。把图表嵌入笔记的两种方法图表画好就该住进笔记里了。用 Obsidian 的嵌入语法在正文中输入![[你的图表.svg]]直接显示为可预览的图表![[你的图表.drawio]]保留完整编辑信息点击即可回编辑器嵌入后点击图表预览就能再次进入编辑界面所见即所得。对旧图表的修改会实时同步到笔记里不再有“截图已过时”的尴尬。编辑已有图表右键一步到位已经存在的.svg或.drawio文件无需重新打开编辑器。在文件管理器中右键该文件选择“Edit diagram”图表即刻进入编辑状态。图3对已存在的 .svg 图表文件右键Edit diagram 就是编辑入口这也意味着你完全可以用其他工具画图、再用本插件编辑文件格式天然互通。进阶玩法让图表和知识库一起生长掌握了基本操作后试试把这些技巧织进你的日常流程配合双链在笔记里用[[图表名]]引用图表Obsidian 会自动生成双向链接知识图谱里也能看到它统一归档建一个Diagrams文件夹集中存放图表配合描述性命名如“订单流程架构图.drawio”检索一目了然纳入版本控制SVG 本质是纯文本可直接纳入 Git每次修改都有记录团队协作不再担心覆盖关于两种格式一张表帮你决策对比项SVG.drawio体积小纯文本较大含完整编辑数据版本控制非常适合 Git 追踪可用但 diff 不友好编辑体验可编辑保留全部编辑信息适用场景协作、发布、预览长期维护的复杂图经验之谈需要多人协作的图用 SVG需要反复返工的复杂图用 .drawio两者可随时转换。新手最容易踩的坑5条血泪经验这些坑几乎每个新手都会踩提前知道能省下大把时间以为 build 失败是环境问题多半是没进项目目录就执行了npm install先cd再装包准在笔记里写[图表名]而非![[图表名]]少一个感叹号图表就只是链接不是预览混淆“嵌入”和“插入”插入是新建图表文件嵌入是把已有图表显示到笔记中方向别弄反用截图代替嵌入截图无法再编辑等于放弃了这个插件一半的价值忘记 SVg 和 svg 的文件后缀Obsidian 区分大小写写错后缀会识别失败保持统一即可现在画下你的第一张图不需要学完所有功能不需要背快捷键。打开笔记右键新建拖一个矩形连一条箭头——你的第一张流程图就这样诞生了它和你的文字笔记躺在一起随时可以修改随时可以分享。下一次灵感来袭时愿你能在同一扇窗里把想法一次画完。✨【免费下载链接】drawio-obsidianDraw.io plugin for obsidian.md项目地址: https://gitcode.com/gh_mirrors/dr/drawio-obsidian创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
