tom__bo’s Blog

情報系学生が筋トレしたり、筋トレしたり筋トレしたことを書くブログ。もはやダイアリー

最近気に入っているUML作図方法

これから作るものの構想を練ったり、システムの概要を共有したり相談したりするときに、UML(みたいな図)を使ってメモしていくやり方が気に入っている。
UMLといってもちゃんとUMLの記法に沿って仕様を完璧に書くことはあまりなくて、詳細まで書く必要があるところを除いて、大まかな方向性が確認できる程度に書く、といった感じ。

実際書いているのはクラス図かシーケンス図なことが多くて、もっと言うとAPIを複数叩くシステムでサーバ間のリクエストの流れをシーケンス図みたいな図で書いていることもある。

ドキュメントとして正確なUMLを書いている人には怒られてしまうかもしれないけれど、適当にでも書いておくとドキュメントを書く段階で何もないよりもはるかに楽だし、議論が簡単になってとても良い。

というわけで良くUMLをベースにした図を書くようになったので、作図関連の便利ツールを紹介する。 (でてくる図の内容には特に意味はありません)

方法1: 手書き

ツール?という感じだけど、とにかく書き始めるまでが最速なので、結局良く手書きする。 本当に一番最初の段階では書き捨てるつもりで手書きでババッと書く。

一人でやってるなら紙、複数人でやってるとホワイトボード。 どっちでやっても書き終わったらOffice Lensで撮っておく。

Office LensはMSが提供しているアプリで、無料で使えるし、斜めからとっても補正してくれるし、明るさがまばらでも均一にしてくれる便利なやつ。

Office Lens

Office Lens

f:id:tom__bo:20180221004558j:plain

方法2: コードから生成

コードがある程度あるなら自動で生成してくれれば良いだけ。 IntelliJのpluginだとSequenceDiagramを使っているけど、java以外の言語で使ったことないからどうなんだろう。

(↓githubのリンクを展開したらサムネイルのおっさんの顔がアップで辛かった)
SequenceDiagram by Vanco

f:id:tom__bo:20180221004626p:plain:w400

方法3: リモートで共同で書く

リモートで相談しながらでもシーケンス図みたいなものをかけると便利なのである。 最近試して気に入ったのはAtomTeletype, markdown-viewer-enhancedを使ってリアルタイムにコードを共有しながらPluntUMLを書く方法。

まだベータ版だけれど、Teletypeは問題なく使えたので、これでPluntUMLをマークダウンとして書きつつ、markdown-viewer-enhancedでリアルタイムに可視化する。

teletype.atom.io

atom.io

共有される側はviewerの画面までは共有されてこないので、自分のローカルで何とかすることになる。 ただ、図が常に見えてなければならないわけでもないし(pumlを書いている途中はどっちにしろ可視化できない)、画面共有でatomウィンドウを共有してもらって無理やり見る方法でも案外見れる。

f:id:tom__bo:20180221004819p:plain

リモートで共同で作図できるツールもある。 caccoとか見た目がきれいだし、昔google slideで協同で資料を作ったこともあるけれど、UMLみたいなものを書こうとすると結構面倒。 パワポの図くらいのものを共同で作るには良いのかもしれない。

感想

なんで同じようなシーケンス図を3つも書いたんだっけ??