PlantUML導入備忘録_2024年度版

```plantuml
@startuml sample
title manzai
participant user1[
    =tukkomi
    ----
    combi
]
participant user2[
    =boke
    ----
    combi
]
database db as "daihon"

activate db
user2 -> db : generate　
user1 -> db : get
user1 <- db : set
deactivate db

group live
    user1 <- user2 : there is interest
    user1 -> user2 : listen

    loop some times
    user1 <- user2 : bokeru
    user1 -> user2 : tukkomu
    end

    group ochi
        user1 <- user2 : bokemakuru
        user1 -> user2 : moueewa
    end
    
    rnote over user1, user2
    doumo-arigatou
    gozaimashita
    end note
end

activate db
user2 -> db : feedback
deactivate db
@enduml
```

PlantUMLとは
=

> PlantUMLは、様々なダイアグラムを迅速かつ簡単に作成できる、非常に多目的なツールです。[^1]
[^1]:https://plantuml.com/ja/

　要は作図ソフトである。もう少し具体的に言うと
 
- シーケンス図
- ユースケース図
- クラス図
- オブジェクト図
- アクティビティ図
- コンポーネント図
- 配置図
- 状態図
- タイミング図

以上が描画可能だがこれは一旦置いておこう。
　IT界隈御用達らしく、見た目がシンプルかつプログラミングするように作図できるのだが、これが慣れない人にはちょっとハードルが高いのではないだろうか。
　独自言語を採用している上に公式リファレンスの日本語訳はちょっと読みづらいし、解説してるサイト等を探してみても古かったり……
　細かい関数等は使いながら調べるしかないが、せめて導入のハードルだけでも下がってほしいところ。というわけで自分用のメモ（とQiita記事を書く練習）を兼ねて、導入の手順を簡単にまとめ、残しておこう。

PlantUML導入手順
=
### 1.Javaのダウンロードとインストール
まずは下のURLから最新のJavaをダウンロード。
https://www.java.com/ja/download/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/d167991e-2f8c-ef4b-9141-c8ed01b5a877.png)
ダウンロードしたものを開いたら、画面に出る手順に沿ってインストールする。

### 2.VS Codeのインストール
MicrosoftStoreからVS Codeをインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/20d22fe3-3777-22c8-8cec-76ebac37af67.png)
みんな大好き無料のコードエディタ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/21cf8565-d606-0cd5-4a43-09f373042dac.png)
実際に起動してみる。

### 3.PlantUMLのインストール
VSCを開いて左のタブのExtensions（拡張機能）からPlantUMLをインストールする。
![extensions.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/8ab3aa60-9642-aa25-f7fb-48f7e423d471.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/923d07f6-49a6-c939-a28d-925d099a0291.png)

:::note info
一緒にJapaneseLunguagePackもインストールしておくのがオススメ
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/82b7ffcb-bd9d-a534-f031-2b44f65754c4.png)
ここでは詳しく解説しないが、VS Codeを日本語化してくれるありがたいパック。切り替え方は使用法を参照してほしい。

### 4.作図の開始
さっそく作図を始めよう。まずはファイル>新しいファイル>言語>PlantUML から新しいファイルを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/d04a180c-57e4-15c8-60ab-8be454d05ae2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/bd9dfe81-c16f-5f93-b26a-c31711ded598.png)
↑空のファイルを開いた状態

Alt+Dでプレビューを確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/3123491c-aae9-a4d2-ed86-eec4d92c806c.png)

そしてコーディングが終わったらwsd形式で保存の後、Ctrl+Shift+Pでコマンドパレットを開き、`PlantUML: Export Current Diagram`と打ち込むとPNG等の形式でエクスポートできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/f0a9e812-83d2-8c19-5091-333d21fac495.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/732ce511-d77c-e8b9-b4d2-c8cd171d940b.png)
wsdファイルと同じフォルダに保存されているはずだ。

作図例
=
これでPlantUMLの導入は完了したのでこれ以降は読まなくても作図はできるのだが、せっかくなので例としてシーケンス図を書いてみよう。詳細は[公式ガイド](https://plantuml.com/ja/)を参照だ。

```sample
@startuml sample

@enduml
```
まずは開始と終了の合図。`@startuml`のあとにスペースを空けて名前を付けることができる。この2行目から本文を記述していくことになる。
```
participant tukkomi
participant boke
database db as "daihon"
```
次に分類子の宣言。要は「誰が」とか「何が」とかだ。`as`の後に名前とは別に表示名を付けることもできる。
```plantuml
participant tukkomi
participant boke
database db as "daihon"
```
↑こんな感じになる
```
participant user1[
    =tukkomi
    ----
    combi
]
```
```plantuml
participant user1[
    =tukkomi
    ----
    combi
]
```
↑他にもこんな書き方をすることでサブタイトルみたいなのを付けられたりする。

---

次に`->`でメッセージを書き、二者間のつながりや流れを表す。
```
participant tukkomi
participant boke
tukkomi <- boke : boke
tukkomi -> boke : tukkomi
```
```plantuml
participant tukkomi
participant boke
tukkomi <- boke : boke
tukkomi -> boke : tukkomi
```

そしてに`activate`でライフライン（今ここが生きてるよー）を宣言する。
```
activate db
boke -> db : generate　
activate db
tukkomi -> db : get
tukkomi <- db : set
deactivate db
deactivate db
```
```plantuml
participant tukkomi
participant boke
database db as "daihon"

activate db
boke -> db : generate　
activate db
tukkomi -> db : get
tukkomi <- db : set
deactivate db
deactivate db
```

↑入れ子構造にすることもできる。

---

基本はこんなところ。あとは`group`のグループ化や`note`でコメントを入れるのも使うかもしれないので覚えておくと良い。

```
group manzai
    tukkomi <- boke : boke
    tukkomi -> boke : tukkomi
    note left : nori-tukkomi
end
```
```plantuml
participant tukkomi
participant boke

group manzai [kihon]
    tukkomi <- boke : boke
    tukkomi -> boke : tukkomi
    note left : nori-tukkomi
end
```
↑`[]`でラベルを貼れる。また、グループも入れ子構造可。

---

最初に例示した図もこれらを組み合わせることで作成できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794351/330a7805-4cee-f207-bf75-3884b3e54c63.png)

以上。何かの参考になれば幸いだ。