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

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

image.png

「嵌入式系列」思源插件 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 网站或软件打开,因此不用担心将来的导出和迁移问题。

  • 思源笔记

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

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

    28446 引用 • 119783 回帖

相关帖子

优质回帖

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
  • 其他回帖
  • xqh042 1 评论

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

    image.png

    1 回复
    这个可以,今天就加上
    yuxinzhao 1
  • Achuan-2 1 1 评论

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

    可以可以哈哈,感谢
    yuxinzhao
  • Achuan-2 5 评论

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

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