Help us understand the problem. What is going on with this article?

draw.ioの全てのタブを一括で画像出力する

thumbnail

はじめに

最近、draw.ioという無料で使える強力な描画ツールを使ってフローチャートばかり書いている筆者です。

draw.ioで規模の大きいグラフを描いていると複数のタブに分ける場合があります。現時点(2019/10/30)では、全てのタブの図形を一発で画像出力する機能はdraw.ioには用意されていません。そこで今回はできるだけ自動で楽に画像出力できるよう、少し工夫してみたのでまとめます。

問題点

上でも述べたように、 draw.ioでは全てのタブをまとめて画像出力する機能がありません。各タブに対して、画像エクスポートの処理をする必要があります。

自分の場合、担当するシステムの処理をフローチャートに起こしていたらいつの間にかタブが40個を超えました。

 2019-10-30 15.24.29_filtered.jpg
 2019-10-30 15.24.39_filtered.jpg

1つ1つのタブに対して画像エクスポートをやっていたら非常に手間です。出力フォーマットがPDFの場合のみ全てのタブを1つのPDFに出力できますが、図が1ページのサイズを超える場合は問答無用で分割されてしまいます。

そもそも「1つのタブの中で図を描画すればいいのでは?」という意見もあるかともいます。ただしそれだと図の規模が大きくなるにつれ、見にくかったり、編集がしずらくなるデメリットがありました。あとdraw.ioにはリンク機能があり、ブロックとタブを紐付けてジャンプすることが可能です。そのため処理を大まかにタブで分けても、処理フローをジャンプしながら追うことができます。

解決策

Mac版のdraw.ioデスクトップアプリに含まれるコマンドラインツールとシェルスクリプトを組み合わせました

コマンドラインツールの使い方は以下のドキュメントにまとめられています。
https://j2r2b.github.io/2019/08/06/drawio-cli.html

複数のdrawioファイルに対してエクスポート処理できる機能や、出力先やレイアウトのオプションも用意されています。

あとはこのコマンドラインツールを使い、シェルスクリプトで全てのタブに対して画像エクスポートする繰り返し処理を実装しました。以下のコードは即席で作ったものなのであくまでも参考程度に。

export-all-tabs.sh
#!/bin/bash
# 
# 2019/10/30
# Haruyuki Ichino <mail@icchi.me>
# Version 0.0.1
#
# Description:
# Export all tabs for draw.io
#
# Usage:
#   $ export-all-tabs.sh <draw.io file>
#   Example) $ export-all-tabs.sh ./example.drawio
#
# Ref:
# https://j2r2b.github.io/2019/08/06/drawio-cli.html


############################################################
# consts
############################################################
# files
DRAWIO_BIN="/Applications/draw.io.app/Contents/MacOS/draw.io"
DRAWIO_FILE=$1
OUTPUT_DIR="./output"
# options
FORMAT="png"
MARGIN=32
IDX_START=0
IDX_END=40

############################################################
# main
############################################################
# check input/output
if [ ! -e $OUTPUT_DIR ]; then
    mkdir $OUTPUT_DIR
    echo "Created output directory"
fi

# input filename
INPUT_FILENAME=$(basename $DRAWIO_FILE)
INPUT_FILENAME=${INPUT_FILENAME%.*} # remove ext

for ((i=$IDX_START; i <= $IDX_END; i++)); do
  # echo $INPUT_FILENAME
  OUTPUT=$OUTPUT_DIR"/"$INPUT_FILENAME"_tab"$i"."$FORMAT
  echo $OUTPUT

  # export command
  $DRAWIO_BIN -x -f $FORMAT -o $OUTPUT -p $i -b $MARGIN $DRAWIO_FILE
done

出力するタブのインデックス(または個数)を指定し以下のような感じでスクリプトを実行すると、出力ディレクトリに各タブのpng画像が出力されます。

$ bash ./export-all-tabs.sh <draw.io file>

まとめ

  • 現時点では、drawioファイルに含まれる全てのタブの図を一括で画像にエクスポートできない
  • Macのdraw.ioのクライアントアプリにはコマンドラインツールが内包されている
  • それとシェルスクリプトを使って、drawioファイルに含まれる全てのタブを画像に一括エクスポートできた draw.ioは神
icchi_h
都内のメディア企業で働く高専出身エンジニア
https://icchi.me
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした