PlantUMLを用いた簡単なシーケンス図の作成方法

## 概要
* VScodeにてPlantUMLをプラグインし、シーケンス図を作成する方法を記載。
* 使用環境(2023/12/25現時点)：Windows 11 Pro、JDK21、VScode
* [JAVAのダウンロードはこちらから - ORACLE](https://www.oracle.com/jp/java/technologies/downloads/)

# 環境変数とJAVA_HOME
> JAVA_HOMEは、Javaの環境変数の1つです。
環境変数はOSが持つ情報を共有するための仕組みのことです。

[環境変数JAVA_HOMEの確認と設定方法を現役エンジニアが解説【初心者向け】 - TechAcademyマガジン](https://magazine.techacademy.jp/magazine/24230)

:::note
JAVA_HOMEが設定されていないとPlantUMLのプレビューが表示されないため、設定していない場合は先に設定する。JAVA_HOMEの設定はPlantUML以外の場合においても使用する。
:::

# UML
>UMLとはUnified Modeling Languageの略語です。日本語では「統一モデリング言語」と呼ばれています。
システムの振る舞いや構造をオブジェクト指向で分析したり設計したりする際、図を用いることで視覚的に把握できるようになり、効果的に表現できます。しかし、その図の描き方が人によって違っては困るので、標準規格として作られた図の記法（モデリング言語）がUMLです。

[UMLとは？書き方とクラス図・シーケンス図など10種の図を解説 - Cacoo](https://cacoo.com/ja/blog/what-is-uml/)

# PlantUML
> PlantUMLは、迅速かつ簡単なダイアグラム作成を可能にする、多目的なコン ポーネントです。ユーザーは、シンプルで直感的な言語を使用して、様々なダイアグラムを作成することができます。

[一目でわかるPlantUML](https://plantuml.com/ja/)

# シーケンス図
>シーケンス図とは現在OMG(Object Management Group)が管理している統一モデリング言語（UML英：Unified Modeling Language）にて定義されているインタラクションを表す図を指します。アクティビティ図が処理工程を順序立てる一方、処理主体となるオブジェクトやクラスがメッセージ(実装においてメソッドの呼び出し) のやり取りを記述しているものを指します。横軸に処理主体を置き縦軸に時間軸を設定し図で表現するのです。

[基礎から入門！シーケンス図とは？ - Wondershare EdrawMax](https://www.edrawsoft.com/jp/what-is-sequence.html)

# パスのコピー
* エクスプローラーを開き、JAVA_HOMEの設定に必要なJAVAが存在する場所のパスをコピーする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/8bfbd474-59ed-0859-1314-b371b9a6042a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/3bb2e342-d0d7-8f70-79ed-fb0d07cce5c7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/fc73039a-ee92-c09c-8c89-908ddeb8c5c6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/6f8c71d2-3942-e300-7bf2-c3db05181961.png)

# 環境変数の追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/11be8947-dd69-34b7-eff8-e2471bdeddfe.png)
* 環境変数(N)…を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/28aea7fd-7a6f-d3fc-35c5-0fe47f20b3fc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/98b826e2-972a-9acf-efcc-cfd31d6a3269.png)
* 新規(W)…を押すと変数名と変数値が入力できるため、変数名に「JAVA_HOME」、変数値にコピーしてきたパスを貼り付ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/d1c806f9-09fa-f843-4ad4-d3fbb06442b3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/e2973d82-4f74-6291-d076-eb8061620710.png)
* 追加されていることを確認し、OKを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/38d74d03-34ee-ff62-c88e-9b5e41f4befc.png)

:::note info
JAVA_HOMEの設定が反映されているか確認したい場合は、PowerShell等にて「java」と入力。以下のような表示がでると反映されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/48201ab0-7a72-73b0-27c0-d782040af1ca.png)
:::

# PlantUMLをプラグイン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/607aeac5-e287-1bc6-27d3-d9302868f1ce.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/5db36316-91b3-c3eb-4f8d-01b55ba0ac27.png)

# シーケンス図の作成
:::note info
今回は以前作成した記事[Spring bootでHelloWorldするまでの手順](https://qiita.com/momomo1998/items/37e48a3196b4761534c9)にて使用した「hello」「test api」を表示させる以下のコードをシーケンス図にする。
:::

``` java:
package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    @GetMapping("/")
    public String hello() {
        return "hello";
    }
    @GetMapping("/test")
    public String test() {
        return "test api";
    }
}
```
* VScodeにて以下のコードを貼り付ける。
:::note info
``` 
@startuml HelloWorld Diagram
title HelloWorld Diagram

participant Browser
participant Server

Browser -> Server: GET /
activate Server
Server --> Browser: "hello"
deactivate Server

Browser -> Server: GET /test
activate Server
Server --> Browser: "test api"
deactivate Server

@enduml
```
基本的に@startumlで始まり、@endumlで終わる。
participant(登場人物)、activate(処理の開始)、deactivate(処理の終了)

1：ブラウザ(Browser)がGET /のリクエストをサーバー(Server)に送信。
2：サーバーがHelloControllerクラスのhello()メソッドを呼び出し、"hello"という文字列を生成してブラウザに返す。
3：ブラウザは受け取ったレスポンスを表示し、GET /testのリクエストも処理され、"test api"という文字列が生成されてブラウザに返す。
:::
* コードにカーソルを合わせ、`alt + D`で右側にPlantUMLのプレビューを表示。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/425f59f7-a43a-cd88-ef56-61b48f67a94f.png)

:::note warn
環境設定が上手くされていなかった場合は、`alt + D`を押すと赤い！でエラーが出たり、以下のようにプレビューが何も表示されない。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624672/208c769e-932c-365a-fd90-2d773d58183e.png)

## 合わせて確認したいサイトまとめ
* [UMLとは ‐ IT用語辞典]( https://e-words.jp/w/UML.html)
* [3分でわかる！初心者が押さえておくべきのUML入門知識 - Wondershare EdrawMax](https://www.edrawsoft.com/jp/uml-introduction.html)
* [UML（統一モデリング言語） - 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word17654.html)
* [シーケンス図とは ‐ IT用語辞典](https://e-words.jp/w/%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B9%E5%9B%B3.html)
* [シーケンス図とは？書き方やツールを初心者でも分かるように紹介 - Cacoo](https://cacoo.com/ja/blog/what-is-sequence-diagram/)
* [PlantUML で UML お絵描き生活 - Qiita](https://qiita.com/qualitia_cdev/items/55644b15eaf7e8328ac1)
* [PlantUML シーケンス図で便利だと思った機能・使い方 - Qiita](https://qiita.com/yhornisse/items/b5ff87e63125828b52c1)