登录 注册

嵌入式系列插件第三弹：draw.io 插件

继上一篇 嵌入式系列插件第二弹：伪代码挂件升级为伪代码插件 之后，「嵌入式系列」的第三个插件 draw.io 插件也完成了。（注意是 siyuan-embed-drawio，名字里带「嵌入式系列」，好多朋友好像看着图标找安装错了 😅）

image.png

GitHub - YuxinZhaozyx/siyuan-embed-drawio: 思源笔记的draw.io插件 思源笔记的draw.io插件. Contribute to YuxinZhaozyx/siyuan-embed-drawio development by creating an account on GitHub. GitHub - github.com

「嵌入式系列」思源插件 QQ 交流群：1037356690

嵌入式系列插件的宗旨：仅作为思源笔记的辅助编辑插件，将所有信息嵌入思源笔记和 markdown 所支持的数据格式中，使得插件所创造的所有内容在脱离插件甚至脱离思源笔记（导出为 markdown/分享到第三方平台）后仍然可以正常显示。

秉承 「嵌入式系列」 的宗旨，新的 draw.io 插件以 SVG/PNG 图像的形式 存储 draw.io 数据，因此对于思源笔记和 markdown 以及其他第三方平台而言，文章中的 draw.io 图像真的就只是一张普通的 SVG/PNG 图片，在任何地方都可以正常显示、正常分享。甚至单独将图片转发给别人，别人如果将其导入思源并安装这个插件，也可以接着编辑，实现自由编辑、自由分享。

PC/网页端使用效果

编辑：

image.png

灯箱：

image.png

移动端使用效果

image.png

功能

  • 无网络离线使用
  • draw.io 图像以 SVG/PNG 格式存储
  • draw.io 图像可编辑
  • 支持移动端编辑
  • PDF 导出可显示 draw.io 图像
  • 灯箱预览

如有更多需求/建议欢迎在 GitHub 仓库中提 issue 或在本贴中回复

使用指南

创建 draw.io 图像： 在编辑器中输入 /drawio 命令即可创建新 draw.io 图像。

编辑 draw.io 图像： 点击图像右上角的菜单按钮，当图像被识别为合法的 draw.io 图像时，菜单中会显示 编辑draw.io 的选项，点击即可打开编辑窗口。注意： 编辑窗口是可以自由调整大小和拖动位置的，如果觉得窗口不够大可以拖一下。

从其他来源迁移：

方法 1：在任意 draw.io 平台导出 SVG/PNG 图像时勾选 包含绘图副本 选项，再把 SVG/PNG 图像拖入思源笔记中即可。

方法 2：在任意 draw.io 平台里 ctrl+A ctrl+C 复制所有内容，然后在思源笔记里输入 /drawio 创建一张新图像，把刚刚复制的内容 ctrl+V 粘贴即可。

draw.io 标签: draw.io 标签默认显示在 draw.io 图像块的右上角，只有当鼠标放置到块上时才会显示。可以在设置中调整 draw.io 标签的显示模式：不显示标签、始终显示、悬浮显示。

存储格式： 可在插件配置中设置新创建的 draw.io 图像是 svg 还是 png 格式。

备注：这个 SVG/PNG 是 draw.io 自己生成的格式，不是我自定义的，即便脱离思源笔记和我的插件也可以在 draw.io 网站或软件打开，因此不用担心将来的导出和迁移问题。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28442 引用 • 119750 回帖
3 引用
嵌入式系列插件第五弹：可交互 SVG • yuxinzhao
嵌入式系列插件第四弹：Excalidraw 插件 • yuxinzhao
嵌入式系列插件第一弹：TikZ 挂件升级为 TikZ 插件 • yuxinzhao
9 操作
yuxinzhao 在 2025-12-05 15:48:38 更新了该帖
yuxinzhao 在 2025-11-20 17:16:52 更新了该帖
yuxinzhao 在 2025-11-20 17:16:15 更新了该帖
yuxinzhao 在 2025-11-13 18:12:40 更新了该帖 yuxinzhao 在 2025-11-11 15:10:15 更新了该帖 yuxinzhao 在 2025-11-11 02:10:26 更新了该帖 yuxinzhao 在 2025-11-10 23:29:58 更新了该帖 yuxinzhao 在 2025-11-10 23:09:58 更新了该帖 yuxinzhao 在 2025-11-10 18:21:30 更新了该帖
揭阳 位置
11 感谢
2 收藏
1 赞同
3 引用
9 操作
33 回帖
4
3
2
2
2
539 366 2 7 164

相关帖子

优质回帖
33 回帖
嵌入式系列插件第三弹：draw.io 插件

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Achuan-2 •
    订阅者 先知

    👍 赞

  • Achuan-2 • • 1 • 1 评论
    订阅者 先知

    可以来知乎的这个问题宣传你的插件哈哈： 思源笔记有哪些好用的插件？ - 知乎

    可以可以哈哈，感谢
    yuxinzhao •
  • EmptyLight •
    付费者

    确实在导出 PDF 时候可以加载 drawio 图片了，可以把之前挂件的图转过来了 👍

  • tfbaby • • 1 赞同
    付费者

    右键编辑图片这个思路很好，我也加上了

  • yuxinzhao • • 1
    付费者 作者

    意外发现有个额外用途：思源目前的 mermaid 渲染出的图存在无法放大查看细节的问题，而刚好 draw.io 里面可以写 mermaid，于是借助这个插件编辑后得到的图像是可以用思源本身的图片查看器查看细节的

    3 引用
  • veryzhh •
    付费者 支持者 捐赠者

    这个好，这个的 Drawio 图，终于可以按原大小显示了。赞！

  • xqh042 • • 3 评论
    订阅者 付费者

    相当好用，能预览还能直接编辑。狠狠的拖了几个 .drawio 文件到 \data\storage\petal\siyuan-drawio-plugin 下 👍

    😅 这个插件是 siyuan-embed-drawio，不是 siyuan-drawio-plugin
    yuxinzhao •
    @yuxinzhao 不好意思搞错了 😂 也试了试 siyuan-embed-drawio ，刚觉得只能保存 svg 可能不方便后续导出文件，再看了看发现可以直接将存储的 svg 文件导回到 drawio 里。
    xqh042 •
    @xqh042 对，这个插件相当于就是用 svg 格式代替原本的 drawio 格式，反正两者都可以编辑，svg 还多个可以直接查看的功能。另外如果需要导出文件也可以右键编辑 draw.io，然后在文件导出里导出 png 或者复制 png，后面如果需要我也可以加快捷按钮
    yuxinzhao •
  • ringx • • 1 评论
    付费者 捐赠者

    很好用的插件，补全了思源不方便做图的短板了。

    话说，draw.io 支持 latex 么？思源内置的 mathjax 有些复杂图不太好画，要是 draw.io 支持，并且渲染到 svg 就好了。

    1 回复
    支持，打开数学排版模式，然后打开代码模式，输入两个 $$ 中间包含 latex 就行。下一个版本默认开启数学排版模式。另外你提到的需要删除 html tag 的情况其实是因为你直接输入了 $$，先打开代码模式再输入 latex 就没问题了。
    yuxinzhao •
  • xqh042 •
    订阅者 付费者

    貌似打开数学排版就可以用了 Use mathematical typesetting in diagrams

    image.png

    1 回复
  • ringx •
    付费者 捐赠者

    嗯。对的，不过好像有个坑，要切到代码模式把多余的 html tag 删掉才能正确渲染。

    不过 draw.io 用的好像也是 mathjax，那就没意义了。我找到这个作者另一个 tikz 的插件，可以用来画复杂图像。

  • xqh042 • • 2 评论
    订阅者 付费者

    请问能增加一个显示有几页的浮动栏吗？

    PixPin20251110213818.gif

    让 ai 看了看代码列了个思路（

    image.png

    1 回复
    比较建议第一页放想展示的内容，后面的页放一些草稿或者备选方案，需要时再进去切换到想展示的页再保存一次，毕竟频繁切换页的场景不多见，真的需要经常每一页都看的话还不如一页单独一张，一次性能够都看到。
    yuxinzhao • • 1
    如果实在需要查看每个页，我也可以在右键菜单里给你加个显示灯箱的功能，可以看到每一页的内容，不过图片还是打算只有手动切换才会变，看你有没有这个需求
    yuxinzhao •
  • xqh042 • • 1 评论
    订阅者 付费者

    @yuxinzhao 当前是手动切需要展示的页到第一页的，就是这样子时间久了可能容易忽略这个 svg 文件是一个 draw.io 文件（毕竟右键菜单都多了主动操作的一步），如果加一个 hover 时右上角显示的徽标或者像网络图片网络图片一样有个固定的标识可能会更好。至于显示页数其实用户手动加一个页数文本放到第一页也行 😄

    image.png

    1 回复
    这个可以，今天就加上
    yuxinzhao • • 1
  • PearlLin •
    订阅者 付费者

    我也下错了 😂 ，正好两个 draw.io 在相近的时间更新。

    给后来人提醒一下，这里的这个插件标题带「嵌入式系列」

  • zzxb • • 1 评论
    付费者

    开启灯箱效果后，怎么还原到编辑模式？有人知道吗？

    慎用此功能，开启灯箱后还没找到能还原到编辑模式的办法

    1 回复
    你也下错插件了 😂 我这个插件应该没有灯箱效果的选项。我把插件 logo 换成圆形的了，注意插件名称带 嵌入式系列
    yuxinzhao •
  • EmptyLight •
    付费者

    这个不是本插件功能。如果使用的是挂件（好像是较早那个），可以打开属性面板看看有没有 lightbox，把值删掉可还原，别的方法忘了。如果使用的是其它插件或挂件就不知道了

    1 回复
  • yuxinzhao • • 1
    付费者 作者

    0.2.0 版本会在图像块的右上角显示 draw.io 的标签，如果包含多页的话会显示有几页，你可以不用手动加页数文本：

    image.png

    1 操作
    yuxinzhao 在 2025-11-11 14:20:53 更新了该回帖
  • yuxinzhao • • 1 • 1 评论
    付费者 作者

    0.2.1 版本加入了灯箱功能，可以在右键菜单里打开，如果你要浏览每一页的话能用上

    感谢你的付出 ❤
    xqh042 •
  • zzxb •
    付费者

    这个方法确实可以，先用鼠标这个挂件画出来，然后右键属性-> 自定义，里面有个 lightbox，删掉就好了

  • hu7iang • • 1 赞同
    付费者

    这个确实好用，svg 和思源笔记无缝衔接，比之前的嵌入显示效果好很多，给作者点赞 👍

    1 回复
  • lkhyuiyu • • 1 评论
    订阅者 恶龙

    显示似乎有一点小问题，右下缺了一个角，图 2 是灯箱中正常显示的样子

    image.png

    image.png

    我测试了一下，没复现出你的这个问题，我猜是你这两条线没有对准在一点上，可以在编辑界面里面放大看看是不是没对准。如果还有疑问，可以把这张 svg 直接发上来，我看看是什么问题。
    yuxinzhao •
  • lkhyuiyu •
    订阅者 恶龙
    该回帖仅作者和楼主可见
    1 回复
  • JGF •
    付费者

    +1

  • yuxinzhao •
    付费者 作者

    image.png

    我把你的 svg 拖进思源里是正常的，会不会是你的主题或者 css 代码片段设置了图像圆角，我看那个位置刚好在角落。你可以创建只有以一个矩形的图像测试一下是不是这个原因。还可以创建一个新的工作空间把图像放进去看看是不是思源/系统本身问题。

    1 回复
  • lkhyuiyu •
    订阅者 恶龙

    排查出来了，确实是主题的圆角 😂 ，感谢耐心解答

  • J735591117 •
    付费者
    该回帖仅作者和楼主可见
    1 回复
  • yuxinzhao • • 2 赞同
    付费者 作者

    可以呀，刚好没啥插件点子了，那下一个就做 Excalidraw，嵌入式系列插件主要看社区反馈需要什么以及我自己用不用得上

    2 回复
  • J735591117 • • 1 评论
    付费者

    👍 👍 👍

    我还有个想法，就是把嵌入系列做个看板（悬浮 or 侧边栏），把以前的做过的东西呈现一下。最好有搜索。这样也好方便回顾。
    !比如：image.png

    这个意义可能不是很大，而且不是所有嵌入式系列都是嵌入到图片，比如伪代码插件就是嵌入到代码块的，看社区有没有这个需求吧
    yuxinzhao •
  • Achuan-2 • • 5 评论
    订阅者 先知

    那我再提一个，搞思维导图插件，这样可以在文档的某个部分插入思维导图，需要修改又可以直接修改doge

    可以的，不过需要讨论一下它的形式。如果是嵌入到图片的，那么需要考虑的就是大家普遍接受的思维导图软件是哪家？还得是开源的。另一种嵌入形式是嵌入到 markdown 列表中，这个社区已经有一个“列表视图”插件满足这个需求了，虽然显示目前还有点问题，但是是很有潜力的，因为列表视图理论上可以完成思维导图的所有功能
    yuxinzhao •
    @yuxinzhao simple mindmap 就行了. 列表转导图目前纯靠 css.太简略了.
    Achuan-2 •
    @yuxinzhao 列表转导图比较理想的是 effie 那样的交互
    Achuan-2 •
    @yuxinzhao 另外 drawnix 也是一个好选择.白板加思维导图.不过不确定支不支持 svg 编辑可以去发个 issue
    Achuan-2 •
    @Achuan-2 没事，它不支持 svg 编辑也没关系，我也自己做嵌入，这个在 TikZ 插件里已经实验过了。我可能在调研一下什么交互比较合适，打算要么同时支持嵌入到列表和图，要么分成两个思维导图插件
    yuxinzhao •
  • Achuan-2 •
    订阅者 先知

    发现 drawio 也能画思维导图，但是还是不如专业的思维导图方便

    image.png

  • Achuan-2 • • 5 评论
    订阅者 先知

    image.png
    我简单实现了 simple-mind-map 保存思维导图的效果 @yuxinzhao

    赞，这种思维导图似乎不只有简单的树状结构，可能还是只有嵌入到图片这一个方案，倒是也可以
    yuxinzhao •
    大佬打算自己开发这个思维导图插件吗，还需要我开发吗
    yuxinzhao •
    我都可以，我的话预估是得这周周末才有时间开发这个思维导图
    yuxinzhao •
    @yuxinzhao 你搞吧哈哈.我就玩玩最近没时间折腾插件.simplemindmap 封装的挺好的.建议直接用它..我是给块属性添加导出的 json.实现 svg/png 编辑功能
    Achuan-2 •
    @yuxinzhao 嵌入到图片就够了. 至于多级列表只需要改代码.支持多级列表的粘贴和导出就行
    Achuan-2 •
  • JGF • • 1 评论
    付费者

    请问，draw.io 图的预览，直接使用灯箱？下面的这种预览图感觉很奇怪

    image.png

    1 回复
    希望的是不要右键来进行灯箱预览，而是双击就用灯箱预览
    JGF •
  • yuxinzhao •
    付费者 作者

    如果你只是想要图片背景不透明的话可以使用以下 css 代码片段：

    .viewer-canvas img[src^="assets/drawio-"] {
    background-color: white;
}

    如果你想要图片查看器整个背景都不是透明的可以用：

    .viewer-canvas {
    background-color: white;
}

    灯箱主要是服务于 draw.io 具有多页的情况的，并不打算让它覆盖思源本身的图像查看器

    1 回复
  • JGF •
    付费者

    收到，谢大佬回复

请输入回帖内容 ...
yuxinzhao
揭阳
回帖
122
 帖子
28
 积分
1310