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

「嵌入式系列」思源插件 QQ 交流群:1037356690
嵌入式系列插件的宗旨:仅作为思源笔记的辅助编辑插件,将所有信息嵌入思源笔记和 markdown 所支持的数据格式中,使得插件所创造的所有内容在脱离插件甚至脱离思源笔记(导出为 markdown/分享到第三方平台)后仍然可以正常显示。
秉承 「嵌入式系列」 的宗旨,新的 draw.io 插件以 SVG/PNG 图像的形式 存储 draw.io 数据,因此对于思源笔记和 markdown 以及其他第三方平台而言,文章中的 draw.io 图像真的就只是一张普通的 SVG/PNG 图片,在任何地方都可以正常显示、正常分享。甚至单独将图片转发给别人,别人如果将其导入思源并安装这个插件,也可以接着编辑,实现自由编辑、自由分享。
PC/网页端使用效果
编辑:

灯箱:

移动端使用效果

功能
- 无网络离线使用
- 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 网站或软件打开,因此不用担心将来的导出和迁移问题。


