【作図ツール】PlantUMLの概要とVSCodeでの環境構築

目次

PlantUML とは

PlantUML は、テキストベースで UML 図を描けるオープンソースツールです。
クラス図・シーケンス図・アクティビティ図・ステートマシン図など、主要な UML をコードのように記述するだけで生成できます。

PlantUML の特徴
  • テキストで図が書ける
    図形の配置をマウスで調整する必要がなく、コードを書くように UML を作れる
  • バージョン管理が容易
    テキストなので Git 管理と相性が良い
  • 自動生成と自動レイアウト
    シンプルな記法で複雑な図もある程度整理して描画できる
  • 豊富な対応図種類
    クラス図、シーケンス図、アクティビティ図、ER 図、ワイヤーフレームなども描ける

VSCodeでの環境構築

PlantUML をVSCodeで使用するまでの手順を以下にまとめます。

① Java環境の確認

PlantUMLの実行にはJavaがインストール済みである必要があります。

コマンドプロンプトで以下コマンドを実行し、Javaがインストールされているかを確認します。

java -version

未インストールの(バージョン出力が無い)場合は、JavaのダウンロードページなどからJavaをインストールします。
(MicroSoftのページからでも入手が可能です。:https://learn.microsoft.com/ja-jp/java/openjdk/download

➁ 拡張機能のインストール

VSCodeで、拡張機能「PlantUML」をインストールします。

③ 動作確認

拡張子 .pu で新規ファイルを作成し、PlantUMLの構文で任意のテキストを入力します。
(プレビューは Alt + D やエディタ右上のアイコンボタン: で表示できます。)

以下に、主要な図の簡単な記述例をまとめました。コピペして表示を確認する際にご利用ください。

例①:クラス図
@startuml class_test

class User {
    +name: String
    +email: String
    +login()
}

class Post {
    +title: String
    +content: String
}

User "1" --> "*" Post : creates

@enduml
例➁:シーケンス図
@startuml sequence_test

Aさん -> Bさん: Hello
Bさん --> Aさん: Hi!

@enduml
例③:アクティビティ図
@startuml activity_test

start
:ユーザー入力を受付;
if (有効なデータ?) then (yes)
  :処理を実行;
else (no)
  :エラー表示;
endif
stop

@enduml

PlantUMLの記述方法について

PlantUMLの詳しい記述方法については、公式で提供されている以下ドキュメントから確認できます。

PlantUML.com
PlantUML Language Reference Guide You can download freely the PlantUML Language Reference Guide in PDF format.

おすすめの本:

おすすめの本:


ここまでお読みいただき、ありがとうございます。
今回紹介した内容が、皆さんの開発のヒントになれば幸いです。

記事が役に立ったと感じていただけましたら、OFUSE にてご支援いただけますと今後の運営の励みになります。

OFUSEで応援を送る

今後もゲーム制作に関するさまざまな情報や、そこから得られた知見を共有していく予定ですので、引き続き当ブログをよろしくお願いいたします。

  • URLをコピーしました!
目次