一个 iframe 把 draw.io 无缝集成进自己的网站了

陪她去流浪 桃子 阅读次数:54

直接用 <iframe> 把它嵌入到编辑器页面后通过 window.postMessage 即可交换 JSON 数据。协议:Draw.IO Embed mode。“postMessage”居然存在快 20 年了啊,我刚刚才知道这个东西。

初始化以及保存直接和博客文件管理 API 交互,直接读、写文件,非常丝滑。总代码不到 100 行。
想起以前很多次想创建流程图但是又不喜欢打开一个新网站编辑、保存、上传这样循环操作了,现在终于不用难受了。

得亏前几天统一了 Markdown 内各种资源的插入方法1,现在,即便是插入像 draw.io 这样的绘图,也可以直接用下面的简洁语法:

1
![](diagram.drawio)

保存绘图的时候,会同时保存“文档.drawio”和“渲染结果.svg”两个文件,虽然插入的是“.drawio”,但是后台渲染的时候直接替换渲染成“.svg”。

参考实现:integrate drawio · movsb/taoblog@cc6f571