PlantUMLを使ってみた。

# はじめに
PlantUMLはテキストベースでUML図を記述できるオープンソース。VSCodeの拡張機能もある。ツールの準備から、簡単な使い方まで、備忘録としてまとめる。
参考にしたサイト。

https://plantuml.com/ja/

https://qiita.com/couzie/items/9dedb834c5aff09ea7b2

https://qiita.com/opengl-8080/items/98c510b8ca060bdd2ea3


# 目次
+ [ツールのインストール](#ツールのインストール)
+ [Markdownでも表示できるようにする](#markdownでも表示できるようにする)
+ [使えるPlantUMLの種類](#使えるplantumlの種類)
+ [リンクや注釈の記述](#リンクや注釈の記述)

## ツールのインストール
VSCodeの拡張機能でPlantUMLを使用するには下記3点のインストールが必要。

### ① Java
PlantUMLはJavaで駆動する。OracleのJavaは商用ライセンスの制約もあるので、今回は、MicrosoftのOpenJDKをインストールする。

https://learn.microsoft.com/ja-jp/java/openjdk/download


### ② Graphviz
描画のために使うツール。ライセンスは Eclipse Public License。

https://graphviz.org/download/


### ③ VSCodeのPlantUML拡張
VSCodeをインストールし、拡張機能のPlantUMLをインストールする。

https://code.visualstudio.com/Download

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299802/d5eb8479-0180-a47f-d6ef-80ca1570ef0b.png)

[戻る](#目次)

## Markdownでも表示できるようにする
VSCodeの拡張機能のMarkdown Preview Enhancedを入れるとMarkdownの文中にPlantUMLを組み込むことができる。下記3点を実施する。

### ① plantuml.jarを入手する。
下記よりダウンロードする。ライセンス形態を選べるので都合のよいやつを選ぶ。BSDかMITかな？

https://plantuml.com/ja/download#google_vignette


### ② Markdown Preview Enhancedをインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299802/5127b90b-2f4b-b767-7492-dedb4e8ef1c2.png)


### ③ Markdown Preview Enhancedのパスに設定する。
VSCodeの ```[ファイル]->[ユーザ設定]->[設定]``` の ```[設定の検索]``` で```markdown-preview-enhanced.plantumlJarPath```と設定し、①でダウンロードしたjarファイルのパスを指定する。

[戻る](#目次)

## 使えるPlantUMLの種類
下記が対応している。

+ シーケンス図
+ ユースケース図
+ クラス図
+ オブジェクト図
+ アクティビティ図
+ コンポーネント図
+ 状態図
+ タイミング図

<details><summary><b>👈PlantUML記述例</summary><div>

```
'-----------------------
@startuml
title シーケンス図
A -> B : 要求
B -> A : 応答
@enduml
'-----------------------
@startuml
title ユースケース図
:ユーザ: --> (U)
"開始する" as (U)
@enduml
'-----------------------
@startuml
title クラス図
クラスA <|-- クラスB
@enduml
'-----------------------
@startuml
title オブジェクト図
object オブジェクト1
object オブジェクト2
オブジェクト1 <|--オブジェクト2
@enduml
'-----------------------
@startuml
title アクティビティ図
start
:処理①;
:処理②;
stop
@enduml
'-----------------------
@startuml
title コンポーネント図
[コンポーネントA] as Comp
@enduml
'-----------------------
@startuml
title 状態図
[*] --> 状態1	
状態1 --> [*]
状態1 -> 状態2
状態2 --> [*]
@enduml
'-----------------------
@startuml
title タイミング図
@startuml
robust "タイミング" as A
concise "ユーザ" as B
@0
A is アイドル
B is アイドル
@100
A is 処理中
B is 処理中
@200
A is 処理中
@enduml
```
</div></details>



```plantuml
@startuml
title シーケンス図
A -> B : 要求
B -> A : 応答
@enduml
```
```plantuml
@startuml
title ユースケース図
:ユーザ: --> (U)
"開始する" as (U)
@enduml
```
```plantuml
@startuml
title クラス図
クラスA <|-- クラスB
@enduml
```
```plantuml
@startuml
title オブジェクト図
object オブジェクト1
object オブジェクト2
オブジェクト1 <|--オブジェクト2
@enduml
```
```plantuml
@startuml
title アクティビティ図
start
:処理①;
:処理②;
stop
@enduml
```
```plantuml
@startuml
title コンポーネント図
[コンポーネントA] as Comp
@enduml
```
```plantuml
@startuml
title 状態図
[*] --> 状態1
状態1 --> [*]
状態1 -> 状態2
状態2 --> [*]
@enduml
```
```plantuml
@startuml
title タイミング図
@startuml
robust "タイミング" as A
concise "ユーザ" as B
@0
A is アイドル
B is アイドル
@100
A is 処理中
B is 処理中
@200
A is 処理中
@enduml
```
[戻る](#目次)

## リンクや注釈の記述
+ リンク
```[[リンク 表示文字列]]```
+ 注釈
```note right : 表示文字列``` ```note left : 表示文字列```

```plantuml
@startuml
title PlantUML [[https://plantuml.com/ja/ リンクはこちら]]
A -> B : 要求
note right : 右側に注釈
B -> A : 応答
note left : 右側に注釈
@enduml
```
```
@startuml
title PlantUML [[https://plantuml.com/ja/ リンクはこちら]]
A -> B : 要求
note right : 右側にコメント
B -> A : 応答
note left : 右側にコメント
@enduml
```
[戻る](#目次)

以上