はじめに
プログラミングをやっていると、設計する時や説明する時などに図解でプログラムの流れなどを説明したりすると思います。
よくあるやつだとdraw.ioやパワポなどを使ってシーケンス図等を使って記述してると思います。
しかしエンジニアたる物できるだけ全てをコードで管理したい！そんな需要に対して最適なのがPlantUMLです！
PlantUML
PlantUMLはオープンソースのUMLダイアグラム作成用のテキストベースの言語である。PlantUMLの言語はドメイン固有言語の一例である[4]。ダイアグラムの表示にはGraphvizを使用している。（wikipedia参照）
具体的には以下のような図を作成することができます
- シーケンス図
- ユースケース図
- クラス図
- アクティビティ図
- コンポーネント図
- 状態遷移図（ステートマシン図）
- オブジェクト図
- 配置図
- タイミング図
などなど、、、
とてもたくさんあるので全てを紹介することはできないので今回はその中でもシーケンス図の書き方を紹介したいと思います！
セットアップ
1, vscodeのPlantUMLのプラグインをインストールする
「plant」と検索するとこのようなモジュールをインストールできるのでインストールしてください！
2, javaのインストール
# javaのインストール
$ brew cask install java
3, 描画の時に必要なgraphvizをインストールする
# graphvizのインストール
$ brew install graphviz
$ echo 'export PATH="/usr/local/opt/gnu-getopt/bin:$PATH"' >> ~/.zshrc
今回のゴール
今回は簡単にGitで作業する過程をPlantUMLを使って書いていきたいと思います！
作成するGitのワークフロー
1, ローカルのmasterブランチにリモートのmasterブランチをpullする
2, ローカルのmasterブランチからfeature/hogeブランチを作成する
3, 作業する
4, 変更をadd（ステージングにあげる）する
5, 'fuga'というコミットメッセージでコミットする
6, feature/hogeブランチをリモートにpushする
作成する図としてはこんな感じです
ファイルを作成する
vscodeの場合ファイルの拡張子を
.wsd、.pu、.puml、.plantuml、*.iuml
上記のいずれかにすることでPlantUMLのファイルとして認識される
簡単に書いてみる
@startuml github
hoge -> fuga: bazz
@enduml
上記をコピペしてoption + dとすると
このような図が表示されると思います
簡単に上記の解説をすると、、、
１行目、３行目の@startuml 名前 @endumlはhtmlの開始タグと終了タグのようなものだと思っていただければと思います
そして2行目のところは見ればなんとなくわかると思うのですが、、、
発信元 -> 受け取り先: コメント
というような構文となってます。
またコメントの部分はあってもなくても大丈夫です。
実はこれさえわかればほぼ完成に近づきます
@startuml github
Github -> ローカルmaster: git pull origin master
ローカルmaster -> "feature/hoge": git chechout -b feature/hoge
"feature/hoge" -> ステージング: git add .
ステージング -> ステージング: git commit -m 'fuga'
ステージング -> Github: git push origin "feature/hoge"
@enduml
あと足りないのは↓の作業中という文字です。
これは==テキスト==と書くことで表現することができます。
完成版
@startuml github
Github -> ローカルmaster: git pull origin master
ローカルmaster -> "feature/hoge": git chechout -b feature/hoge
==作業中...==
"feature/hoge" -> ステージング: git add .
ステージング -> ステージング: git commit -m 'fuga'
ステージング -> Github: git push origin "feature/hoge"
@enduml
はいこのような形でとても簡単に綺麗な図を作成することができます
様々な処理の記述方法
今回やったものでは本当に最低限の処理しか書きませんでしたが他にもいろんな処理を記述することができますので紹介します
詳細はこちらのドキュメントを参考にしてみてください！
矢印の種類
@startuml uml
hoge -> fuga
hoge ->x buzz
hoge ->o foo
hoge <-> bar
@enduml
アイコンの表示設定
@startuml uml
actor 人のアイコン
database データベース
collections ファイル
collections "背景色を変更！" #99FF99
人のアイコン -> データベース
人のアイコン -> ファイル
人のアイコン -> "背景色を変更！"
@enduml
グループ分け
@startuml uml
hoge -> fuga:始まりの処理
group 1回目の処理
hoge -> fuga: １回目処理、、、
fuga -> hoge
end
group ２回目の処理
hoge -> fuga: ２回目処理、、、
fuga -> hoge
end
@enduml
条件分岐
@startuml uml
alt 条件分岐
hoge -> bar
bar -> hoge
else elseの処理
hoge -> fuga
fuga -> hoge
end
@enduml
注釈をつける
@startuml uml
hoge -> fuga
note left: 左側に注釈をつける
fuga -> hoge
note right: 右側に注釈をつける
@enduml
おわりに
とてもシンプルな文法なのにも関わらずかなり複雑なシーケンス図もかなり簡単にかけると思うので、是非一度勉強してみるといいのではないでしょうか？
公式のドキュメントも全て日本語で書かれてるのでかなり読みやすいですのでぜひ！
参考文献
PlantUML公式ドキュメント（https://plantuml.com/ja/ ）