図を描きながらコーディングしたい

開発をしている当初は別に図示しなくてもサクサク描いていけるんだけど、しばらく間が空いたりするとコードの流れを追うのが苦痛になり、「やっぱ開発文書を残しておけばよかった……」となる。

特に図。図が欲しい時は多いのだけれど、なかなか思い通りにさくっと描けるものがない。いくら高機能とはいえ、AdobeIllustratorで毎回描くのはしんどい。フローチャートに必要なコネクタ線みたいなものもないし。

draw.ioが最強、とは思いつつ、PlantUMLの手軽さも……とベストプラクティスを模索した結果をご紹介したい。

環境

とはいえ、draw.ioもVisualStudioCodeもMac版があるので、どちらでも同じような環境が作れるはず。最近はその辺がほんとにラクになった。たいていのツールは両方のOSで手に入る。

まずはPlantUMLを導入。私はVisualStudioCodeで描く。

VisualStudioCodeのExtensionでPlantUMLを導入。

VisualStudioCodeで描くことのメリットはこんな感じ。

といったところ。

ただ、プレビュー小さくて見づらいので、何かいいビューアーがないかと探してみた。

はたせるかな、Chrome extensionがある。

画面いっぱいに表示できて非常に快適。「拡張機能」の詳細設定から「ファイルのURLへのアクセスを許可する」をONにしてやれば、ローカルのpuファイルを開いて表示させることができる。

さらにさらに。draw.ioとの連携を調べたら、draw.ioはPlantUMLを読み込むことができるのだ。すごい。かゆいところに手が届く。

メニューの Arrange > Insert > PlantUML でちゃんと読み込まれる。

流石にこれを自由に編集する、というわけにはいかない一枚絵だが、ダブルクリックするとプラントUMLのソースが表示されるので、簡単な修正くらいならここでできる。

PlantUMLの上にdraw.ioで注釈を付けたりもできそう。

draw.ioでもうちょっと詳しい動作図を描く時にも、同じ画面内にシーケンス図を置いておけるので参照しやすい。もちろん、Chromeに切り替えて見てもいいし。

というわけで、こんなフローでしばらくやってみたい。