draw.io: Webエンジニアの作図ツールについて

概要

前職ではよく図を描いており、よく使うツールがコンフルのGliffyだった。退職後、個人でも使える作図ツールを探したところdraw.ioが見つかったのでまとめる。

draw.ioって？

これ
https://app.diagrams.net/
特徴としては

• Webで作成編集
• 操作感はGliffyに似ている（Griffyがdraw.ioに似ている？）
• アイコンはdraw.ioの方が多い
• Gliffyと違いドキュメンテーションと独立したツール

Zennに埋め込むテスト

画像の埋め込みについて

作画ツールで作った画像をZennなどのドキュメンテーションに貼り付けて文章の説明として利用したい。単純に考えるとdraw.ioで作った画像のスクリーンショットを撮ってZennに貼り付けることで可能だが、以下2点で不便。

1. 修正のたびに画像を差し替える必要がある
2. 画像と管理用ファイルが別になるため画像を貼り付けるたびに編集用URLを貼り付けることになり面倒

Gliffyではコンフル上に画像を埋め込み、それを編集保存ができた。同じことをdraw.ioでやろうとすると、git上にping形式で保存し、gitのシェア用のURLをZennに埋め込み、となる。（下図）

これだと上記1, 2はクリアされるが、代わりに画像作成時にgithubを開いて「新しいタブで画像を開く」してURLをコピーしないといけない！それに、ドキュメントとは別にgit側で画像管理用のリポジトリなどを考えなくてはいけない。だるい！ドキュメントと一緒だと楽なのに・・・。

例
draw.ioの編集URL
https://app.diagrams.net/#Hkesasaki%2Fapartment-life-plan%2Fmain%2Fdrawio_link_git.drawio.png

gitの管理URL
https://github.com/kesasaki/apartment-life-plan/blob/main/drawio_link_git.drawio.png

シェア用URL
https://raw.githubusercontent.com/kesasaki/apartment-life-plan/main/drawio_link_git.drawio.png

が、これが最善なら仕方ないなぁ
（Miroなど他のツールもいくつか検討したが、draw.ioが一番操作感が良かったので。）

誰かもっといい方法を知っていたら教えてください。

参考
https://zenn.dev/ncdc/articles/522797d7f6b4c1
https://riotz.works/articles/lopburny/2019/08/24/3-ways-to-use-draw-io/