当前位置 : 首页 » 文章分类 :  开发  »  DrawIO

DrawIO

画图工具 draw.io/diagrams.net 使用笔记


使用方式

在线使用

https://draw.io/
https://app.diagrams.net/
在线使用可选择 GitHub 存储,登录 GitHub 账号并授权后可选择存储图片文件的仓库,再选择图片文件,直接编辑,但网络不好的话比较慢。
可以使用 桌面版+GitHub仓库存储 svg/png/drawio 等可再编辑的图片文件,之后可继续在线编辑。

桌面版

桌面版(Win/Mac/Linux)离线使用,下载最新版 macOS - Universal
https://github.com/jgraph/drawio-desktop

VSCode 插件

VSCode 插件使用:
vscode 插件中搜索 draw.io 安装即可


保存文件格式

保存文件格式:

  • xx.drawio 格式,xml 文本格式,可再次编辑,但无法直接当做图片使用。
  • xx.png 图片格式,也可再次编辑,文件命名为 xx.drawio.png 时,安装了 draw.io 插件的 vscode 可直接打开进入编辑模式,否则打开为图片。
  • xx.svg 图片格式,也可再次编辑,可直接作为图片使用,文件命名为 xx.drawio.svg 时,安装了 draw.io 插件的 vscode 可直接打开进入编辑模式,否则打开为图片。

png 和 svg 格式对比:

  • 两种格式都支持再次编辑
  • Mac 空格预览保存的 png 格式背景图颜色有变化,看起来很难受,svg 没问题。
  • png 格式更通用,各种编辑器都可内嵌 png 图片,svg 有的编辑器无法识别为图片。

推荐保存为 xx.drawio.svg 格式,可 Mac 空格预览,可作图片使用,可编辑,可 VSCode 插件编辑


最佳实践

xx.draw.svg 格式保存 + GitHub 存储 + VSCode 插件 + 桌面版 + 网页版 结合使用,非常方便。
写 Markdown 文档时可直接引用 xx.drawio.svg 图片文件,然后 VSCode 中编辑 Markdown 时顺便还能直接编辑流程图。


绘图技巧

手绘风格/草图/sketch

手绘风格的流程图看起来很有意思,draw.io 可一键改为手绘风格,选中图形后右侧点击 “样式” - 勾选“草图/sketch” 即可。


draw.io手绘风格

漫画风格

选中图形,点“编辑样式”,输入 comic=1; 图形就会变为边框弯弯曲曲的漫画风格。


draw.io漫画风格

上一篇 MyBatisPlus

下一篇 Hibernate

阅读
评论
577
阅读预计2分钟
创建日期 2022-11-18
修改日期 2022-11-22
类别

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论