概要
- VScodeにてPlantUMLをプラグインし、シーケンス図を作成する方法を記載。
- 使用環境(2023/12/25現時点):Windows 11 Pro、JDK21、VScode
- JAVAのダウンロードはこちらから - ORACLE
環境変数とJAVA_HOME
JAVA_HOMEは、Javaの環境変数の1つです。
環境変数はOSが持つ情報を共有するための仕組みのことです。
環境変数JAVA_HOMEの確認と設定方法を現役エンジニアが解説【初心者向け】 - TechAcademyマガジン
JAVA_HOMEが設定されていないとPlantUMLのプレビューが表示されないため、設定していない場合は先に設定する。JAVA_HOMEの設定はPlantUML以外の場合においても使用する。
UML
UMLとはUnified Modeling Languageの略語です。日本語では「統一モデリング言語」と呼ばれています。
システムの振る舞いや構造をオブジェクト指向で分析したり設計したりする際、図を用いることで視覚的に把握できるようになり、効果的に表現できます。しかし、その図の描き方が人によって違っては困るので、標準規格として作られた図の記法(モデリング言語)がUMLです。
UMLとは?書き方とクラス図・シーケンス図など10種の図を解説 - Cacoo
PlantUML
PlantUMLは、迅速かつ簡単なダイアグラム作成を可能にする、多目的なコン ポーネントです。ユーザーは、シンプルで直感的な言語を使用して、様々なダイアグラムを作成することができます。
シーケンス図
シーケンス図とは現在OMG(Object Management Group)が管理している統一モデリング言語(UML英:Unified Modeling Language)にて定義されているインタラクションを表す図を指します。アクティビティ図が処理工程を順序立てる一方、処理主体となるオブジェクトやクラスがメッセージ(実装においてメソッドの呼び出し) のやり取りを記述しているものを指します。横軸に処理主体を置き縦軸に時間軸を設定し図で表現するのです。
基礎から入門!シーケンス図とは? - Wondershare EdrawMax
パスのコピー
環境変数の追加
PlantUMLをプラグイン
シーケンス図の作成
今回は以前作成した記事Spring bootでHelloWorldするまでの手順にて使用した「hello」「test api」を表示させる以下のコードをシーケンス図にする。
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にて以下のコードを貼り付ける。
@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のプレビューを表示。
環境設定が上手くされていなかった場合は、alt + D
を押すと赤い!でエラーが出たり、以下のようにプレビューが何も表示されない。