概要

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

一目でわかるPlantUML

シーケンス図

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

基礎から入門！シーケンス図とは？ - Wondershare EdrawMax

パスのコピー

エクスプローラーを開き、JAVA_HOMEの設定に必要なJAVAが存在する場所のパスをコピーする。

環境変数の追加

環境変数(N)…を押す。
新規(W)…を押すと変数名と変数値が入力できるため、変数名に「JAVA_HOME」、変数値にコピーしてきたパスを貼り付ける。
追加されていることを確認し、OKを押す。

JAVA_HOMEの設定が反映されているか確認したい場合は、PowerShell等にて「java」と入力。以下のような表示がでると反映されている。

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を押すと赤い！でエラーが出たり、以下のようにプレビューが何も表示されない。

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

概要