GitHub + Diagrams.net (旧draw.io)で最高のアーキテクチャ図環境を作る

課題

システムアーキテクチャ図、AWS図みたいなものが更新されない。また、そのエクスポート結果をいろんなページに貼り付けており、それらが更新されないためにアーキテクチャ図がSingle Source of Truthになっていない。

2023/07/10追記

今、diagrams.netの編集画面へのリンクが機能しない状態になっており、以下の画像を開けばすぐに編集画面、というところが壊れています。
これが一時的なものなのか、それともdiagrams.netの恒久的な仕様変更なのかがはっきりしていません。
少なくともまだgoogle driveのファイルへの編集リンクは機能しているため、一時的なものである可能性はあります。

解決法

Diagrams.netの保存先をGitHubにして、かつ保存形式を xxxx.drawio.png にしましょう。

なにが良いか

利点1 エクスポートする必要がない

xxxx.drawio.png という形式で保存すると、それ自体が普通のpngになり、一番最初のシートのpng画像が保存されます。つまり、exportすることなくこの画像へ普通にimgタグを使ったり開くと最新の図を表示することができます。
xxxx.drawio.png の形式はpngファイルのメタ領域に図情報を保存しているため、画像と作図データを別々に管理する必要もありません。普通に diagrams.net で xxxx.drawio.png ファイルを開けば最後の編集状態から再び作業できます。

これが最も強力なのはREADMEより参照している場合です。

## アーキテクチャ図

[![](./アーキテクチャ図.drawio.png)](https://app.diagrams.net/#Hbigwheel%2Fdx-dwh%2Fmain%2F%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3%E5%9B%B3.drawio.png)
↑ 左クリックすれば編集画面へ入れます

のように書けば、

のように、変更がリアルタイムにREADMEへ反映され、かつ図をクリックすればだれでもすぐに図を修正できる最強のアーキテクチャ図プラットフォームができます。

利点2 バージョニング

保存先を　GitHubにすることで、まずバージョン管理ができます。これによりロールバックが可能になり、戻すことが難しいCAD作業を安心してすることができます。

利点3 PRレビュー

保存をGitHubにすると、PRを切ることによりレビューが可能になります。

この方法の欠点

diagrams.net 側で保存するため、Git側でコミットが発生するためコミットログが少々煩雑になります。

スポンサー

この記事はSpeeeでの業務中に15分で書きました。