シーケンス図をコードベースで管理する（PlantUML）

# はじめに
プログラミングをやっていると、設計する時や説明する時などに図解でプログラムの流れなどを説明したりすると思います。
よくあるやつだとdraw.ioやパワポなどを使ってシーケンス図等を使って記述してると思います。
しかしエンジニアたる物できるだけ全てをコードで管理したい！そんな需要に対して最適なのが**PlantUML**です！

# PlantUML
>PlantUMLはオープンソースのUMLダイアグラム作成用のテキストベースの言語である。PlantUMLの言語はドメイン固有言語の一例である[4]。ダイアグラムの表示にはGraphvizを使用している。（wikipedia参照）

具体的には以下のような図を作成することができます

- シーケンス図
- ユースケース図
- クラス図
- アクティビティ図
- コンポーネント図
- 状態遷移図（ステートマシン図）
- オブジェクト図
- 配置図 
- タイミング図

などなど、、、

とてもたくさんあるので全てを紹介することはできないので今回はその中でもシーケンス図の書き方を紹介したいと思います！

# セットアップ
1, vscodeのPlantUMLのプラグインをインストールする
「plant」と検索するとこのようなモジュールをインストールできるのでインストールしてください！
![スクリーンショット 2020-08-16 16.41.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/647ab12c-3aae-c040-1c55-d79b3c892c3f.png)

2, javaのインストール

```shell
# javaのインストール
$ brew cask install java
```

3, 描画の時に必要な`graphviz`をインストールする

```shell
# 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する

作成する図としてはこんな感じです
![スクリーンショット 2020-08-16 17.55.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/e99b05f3-c410-0276-6b4b-c9402918b730.png)

## ファイルを作成する
vscodeの場合ファイルの拡張子を
*`.wsd`、*`.pu`、*`.puml`、*`.plantuml`、`*.iuml`
上記のいずれかにすることでPlantUMLのファイルとして認識される

## 簡単に書いてみる

```github.puml
@startuml github 
hoge -> fuga: bazz
@enduml
```

上記をコピペして`option + d`とすると

![スクリーンショット 2020-08-16 18.20.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/3d997376-a42f-bdf7-422e-627d881770d2.png)

このような図が表示されると思います

簡単に上記の解説をすると、、、
１行目、３行目の`@startuml 名前` `@enduml`はhtmlの開始タグと終了タグのようなものだと思っていただければと思います

そして2行目のところは見ればなんとなくわかると思うのですが、、、
`発信元 -> 受け取り先: コメント`
というような構文となってます。
また`コメント`の部分はあってもなくても大丈夫です。

実はこれさえわかればほぼ完成に近づきます

```text:github.puml
@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
```
![スクリーンショット 2020-08-16 18.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/d647ddbc-25fd-6adf-d6e3-5dd3674728cb.png)
あと足りないのは↓の作業中という文字です。
![スクリーンショット 2020-08-16 18.32.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/930d990b-5087-bd6e-27f2-32a3eab74b95.png)

これは`==テキスト==`と書くことで表現することができます。

## 完成版

```text:github.puml
@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
```
はいこのような形でとても簡単に綺麗な図を作成することができます


# 様々な処理の記述方法
今回やったものでは本当に最低限の処理しか書きませんでしたが他にもいろんな処理を記述することができますので紹介します
詳細は[こちらのドキュメント](https://plantuml.com/ja/sequence-diagram)を参考にしてみてください！

## 矢印の種類
![スクリーンショット 2020-08-16 20.47.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/9ca00a3b-844d-8689-df35-abc36211575d.png)

```arrow.puml
@startuml uml
  hoge -> fuga
  hoge ->x buzz
  hoge ->o foo
  hoge <-> bar
@enduml
```

## アイコンの表示設定
![スクリーンショット 2020-08-16 18.52.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/816f6b88-22c8-151f-8de6-fcb219e51a1f.png)


```text:icon.puml
@startuml uml
actor 人のアイコン
database データベース
collections ファイル
collections "背景色を変更！" #99FF99

人のアイコン -> データベース
人のアイコン -> ファイル
人のアイコン -> "背景色を変更！"
@enduml
```

## グループ分け
![スクリーンショット 2020-08-16 20.37.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/8d4a6f96-ef63-e226-7499-e06bbc809e0e.png)

```group.puml
@startuml uml
hoge -> fuga:始まりの処理
group 1回目の処理
  hoge -> fuga: １回目処理、、、
  fuga -> hoge
end
group ２回目の処理
  hoge -> fuga: ２回目処理、、、
  fuga -> hoge
end
@enduml
```

## 条件分岐
![スクリーンショット 2020-08-16 20.39.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/4807ed12-9169-f9ac-7738-8ca77257ca76.png)


```conditions.puml
@startuml uml
alt 条件分岐
  hoge -> bar
  bar -> hoge
else elseの処理
  hoge -> fuga
  fuga -> hoge
end
@enduml
```

## 注釈をつける
![スクリーンショット 2020-08-16 20.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281558/fb06df10-2925-1a25-b5d7-135b8b185a61.png)


```annotate.puml
@startuml uml
  hoge -> fuga
  note left: 左側に注釈をつける
  fuga -> hoge
  note right: 右側に注釈をつける
@enduml
```

# おわりに
とてもシンプルな文法なのにも関わらずかなり複雑なシーケンス図もかなり簡単にかけると思うので、是非一度勉強してみるといいのではないでしょうか？
公式のドキュメントも全て日本語で書かれてるのでかなり読みやすいですのでぜひ！

# 参考文献
PlantUML公式ドキュメント（https://plantuml.com/ja/ ）