作为一个工程师,我难免会在自己的博客 / Wiki 当中加入流程图、时序图之类的。因此,需要更加简单的绘图的方式。
过去往往是采用本地绘制好图片,然后再复制上传到 Wiki 当中。不过,随着 tldraw、draw.io 等一类在线绘图工具出现以后,大家开始习惯于在线绘制图片。
在使用飞书文档的时候,我觉得其中内嵌 Diagram.net 的服务体验很不错。
现在,在 Dokuwiki 当中你也可以实现类似的功能。安装 Dokuwiki 上的 drawio 插件,随后,在你们的编辑器当中就可以看到一个 Drawio 的图标,点击这个图片,就可以插入一个 Drawio 的图片引用
![在 Dokuwiki 当中接入 draw.io 的绘图 - 1 d2b5ca33bd970f64a6301fa75ae2eb22 17](https://postimg.aliavv.com/wp-content/uploads/2022/09/d2b5ca33bd970f64a6301fa75ae2eb22-17-1024x170.png!pic)
插入完成后,你可以在下方的输入框当中看到插入新的引用,此时你可以修改具体的文件名和对应的 namespace。
插入完成后,点击保存(也可以在预览中修改),保存成功后,你会看到一个 Start drawing by clicking here,点击这个图标,就可以在渲染出的新的 UI 当中绘制你想要的流程图。
![在 Dokuwiki 当中接入 draw.io 的绘图 - 2 d2b5ca33bd970f64a6301fa75ae2eb22 18](https://postimg.aliavv.com/wp-content/uploads/2022/09/d2b5ca33bd970f64a6301fa75ae2eb22-18-1024x352.png!pic)
绘制完成后,点击右上角的保存,即可保存你绘制的流程图。
![在 Dokuwiki 当中接入 draw.io 的绘图 - 3 d2b5ca33bd970f64a6301fa75ae2eb22 19](https://postimg.aliavv.com/wp-content/uploads/2022/09/d2b5ca33bd970f64a6301fa75ae2eb22-19.png!pic)
此时,你的流程图就绘制好了,其他人看的时候也是你画好的流程图。
后续如果你需要编辑这个流程图,只需要在登录的状态下,点击绘制好的图片,就会自动进入到编辑的模式,允许你修改你的流程图。
以下是一个简短的视频介绍: