3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PlantUML導入備忘録_2024年度版

Last updated at Posted at 2024-05-21

PlantUMLとは

PlantUMLは、様々なダイアグラムを迅速かつ簡単に作成できる、非常に多目的なツールです。1

 要は作図ソフトである。もう少し具体的に言うと

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

以上が描画可能だがこれは一旦置いておこう。
 IT界隈御用達らしく、見た目がシンプルかつプログラミングするように作図できるのだが、これが慣れない人にはちょっとハードルが高いのではないだろうか。
 独自言語を採用している上に公式リファレンスの日本語訳はちょっと読みづらいし、解説してるサイト等を探してみても古かったり……
 細かい関数等は使いながら調べるしかないが、せめて導入のハードルだけでも下がってほしいところ。というわけで自分用のメモ(とQiita記事を書く練習)を兼ねて、導入の手順を簡単にまとめ、残しておこう。

PlantUML導入手順

1.Javaのダウンロードとインストール

まずは下のURLから最新のJavaをダウンロード。
https://www.java.com/ja/download/
image.png
ダウンロードしたものを開いたら、画面に出る手順に沿ってインストールする。

2.VS Codeのインストール

MicrosoftStoreからVS Codeをインストールする。
image.png
みんな大好き無料のコードエディタ。
image.png
実際に起動してみる。

3.PlantUMLのインストール

VSCを開いて左のタブのExtensions(拡張機能)からPlantUMLをインストールする。
extensions.pngimage.png

一緒にJapaneseLunguagePackもインストールしておくのがオススメ

image.png
ここでは詳しく解説しないが、VS Codeを日本語化してくれるありがたいパック。切り替え方は使用法を参照してほしい。

4.作図の開始

さっそく作図を始めよう。まずはファイル>新しいファイル>言語>PlantUML から新しいファイルを作成する。
image.png
image.png
↑空のファイルを開いた状態

Alt+Dでプレビューを確認できる。
image.png

そしてコーディングが終わったらwsd形式で保存の後、Ctrl+Shift+Pでコマンドパレットを開き、PlantUML: Export Current Diagramと打ち込むとPNG等の形式でエクスポートできる。
image.pngimage.png
wsdファイルと同じフォルダに保存されているはずだ。

作図例

これでPlantUMLの導入は完了したのでこれ以降は読まなくても作図はできるのだが、せっかくなので例としてシーケンス図を書いてみよう。詳細は公式ガイドを参照だ。

@startuml sample

@enduml

まずは開始と終了の合図。@startumlのあとにスペースを空けて名前を付けることができる。この2行目から本文を記述していくことになる。

participant tukkomi
participant boke
database db as "daihon"

次に分類子の宣言。要は「誰が」とか「何が」とかだ。asの後に名前とは別に表示名を付けることもできる。

↑こんな感じになる

participant user1[
    =tukkomi
    ----
    combi
]

↑他にもこんな書き方をすることでサブタイトルみたいなのを付けられたりする。


次に->でメッセージを書き、二者間のつながりや流れを表す。

participant tukkomi
participant boke
tukkomi <- boke : boke
tukkomi -> boke : tukkomi

そしてにactivateでライフライン(今ここが生きてるよー)を宣言する。

activate db
boke -> db : generate 
activate db
tukkomi -> db : get
tukkomi <- db : set
deactivate db
deactivate db

↑入れ子構造にすることもできる。


基本はこんなところ。あとはgroupのグループ化やnoteでコメントを入れるのも使うかもしれないので覚えておくと良い。

group manzai
    tukkomi <- boke : boke
    tukkomi -> boke : tukkomi
    note left : nori-tukkomi
end

[]でラベルを貼れる。また、グループも入れ子構造可。


最初に例示した図もこれらを組み合わせることで作成できる。

image.png

以上。何かの参考になれば幸いだ。

  1. https://plantuml.com/ja/

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?