drawio画图新体验

还记得在之前的一篇文章中提到过drawio这个工具,drawio这玩意已经改名成https://app.diagrams.net/了,而且功能也变得十分的完善(支持的图套件变多了,左下角的“+ More Shapes…”里头多了很多的套件,支持了更多的导出和导入模式),最近深入使用了这个工具,发现比EDraw亿图还好用,EDraw的优点是有很多可以参考的案例,但是大多数案例我其实都用不到,而画图功能本身还是有许多做的不够好的槽点,比如EDraw在画时序图的时候,如果想延长一下对象的生命线,所有的连接线都会错位…另外,drawio不需要付费也没有任何广告,现在还出了Desktop版,其实Desktop版是Electron包装的网页代码,本质还是浏览器核心负责的渲染呈现和逻辑处理。(还有一个很重要的一点,drawio居然是完全开源的:https://github.com/jgraph/drawio

有了drawio我几乎放弃了其他的工具,后面也打算把它作为博客中的主力画图工具。

目前drawio还支持导出可以嵌入网页的一段代码,可以直接嵌入到博客中:

使用方法:
依次选择菜单栏 File -> Embed -> HTML…
配置好后(默认也可以)点Create即生成了网页代码,直接Ctrl+C and Ctrl+V嵌到博客编辑页中,enjoy it~


2021.08.16更新:

今天发现draw.io还被社区开发者集成进了Visual Studio Code中,可以直接在Visual Studio Code中打开并可视化编辑.drawio文件,赞,这样也不需要下载Desktop版了,直接在VSCode中的插件市场里装上draw.io插件,即可直接在VSCode中享用它~


2021.08.21更新:

之前的嵌入一段HTML会导致网页加载卡顿,页面会卡在drawio的图上,不能往下滑动看文章的其他内容,非常影响网页浏览体验。

最近发现一个新方法:嵌入的时候不用纯HTML,而改为使用iframe,依次选择菜单栏 File -> Embed -> iframe…

这样导出的代码是iframe样式的,形如<iframe 其他内容>其他内容</iframe>,我们使用iframe的懒加载属性,将导出的iframe代码加上<iframe loading=lazy 其他内容>其他内容</iframe>,这样drawio的图在加载时就不会影响文章的其他内容展示了。


本文为原创内容,遵循CC BY-ND 4.0协议,署名-禁止演绎。
转载请注明出处:https://tis.ac.cn/blog/kongdeyou/new_experience_of_drawing_with_drawio/

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注