跨平台命令行渲染 draw.io 方法

文章简介：本文介绍了一种跨平台（支持 Mac，Linux，Windows）的命令行渲染 draw.io 图表文件为图片的方法.

draw.io 是一款比较简单的画流程图、架构图的开源免费软件。具体介绍可以看下 wikipedia 介绍。一般我们使用他的网页版画图，下载原文件及渲染的 PNG 文件用于文档中. 但如果希望修改一下图内容，需要浏览器打开 draw.io，上传源文件，修改，下载，修改文档中使用到这个图的链接。是否有一种方法在本地 CLI 渲染成固定文件名字的文件，本地修改后一键修改呢？

首先 vscode 有 draw.io 的插件，可以直接 GUI 方式修改图，保存到 draw.io 源文件。使用如下命令行工具可以将当前目录下的 *.drawio 渲染成 *.draio.png. 直接将生成的 png 文件在 markdown 中引用。修改图的工作流变成 vscode draw.io 插件修改图后保存，后直接执行脚本即可。

使用脚本 render.sh 如下. 首先下载安装 drawio-desktop, 并根据平台修改脚本 draw_io 部分。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

#!/usr/bin/env bash

set -o errtrace
set -o errexit
set -o nounset
set -o pipefail
set -o xtrace

cd "$(dirname "$0")"

draw_io='/Applications/draw.io.app/Contents/MacOS/draw.io'

for drawio_file in $(ls *.drawio); do
	echo "$drawio_file"
	${draw_io} -x --format png -o "$drawio_file.png" "$drawio_file"
done

⚠️ 注意：本人只测试过 Mac，其他平台可能会少量修改脚本内容