はじめに

VSCode + PlantUML で UML 図を作るまでの方法について整理した。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. PlantUML について
    2. PlantUML 拡張について
    3. セットアップ
    4. 使い方
    5. 構文
      1. シーケンス図
      2. ER図
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76

$ brew --version
Homebrew 2.2.3
Homebrew/homebrew-core (git revision ef00b5; last commit 2020-01-19)
Homebrew/homebrew-cask (git revision 330a8; last commit 2020-01-19)

$ brew info graphviz
graphviz: stable 2.42.2 (bottled), HEAD

詳細

PlantUML について

PlantUML 公式 より引用

PlantUML は「シーケンス図」「ユースケース図」などを素早く作成するためのコンポーネント。

PlantUML 拡張について

VSCode で PlantUML を作成できるようになる

PlantUML 拡張

セットアップ

VSCode で PlantUML 拡張 をインストール

その他必要なものは Requirements に記載。

Java と Graphviz が必要なので Homebrew でインストール

1
2
$ brew cask install java
$ brew install graphviz

使い方

@startuml, @enduml の間にような PlantUML の構文に従った情報を記述。

1
2
3
4
@startuml
title Some Diagram
Me -> You: Request!
@enduml

[Cmd] + [Shift] + [P] (もしくは [Ctrl] + [Shift] + [P]) でコマンドパレットを開いて、プレビューやエクスポートを選択。

プレビューにすると、以下のような画面が表示される。なお、マウスホバーすると 拡大/縮小 ボタンが表示される。

構文

シーケンス図

  • -> で実線
  • --> で点線
  • : xxxx で文章
1
2
3
4
5
@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml

ER図

クラス図 の拡張なので、クラス図で使える構文は ER図 でも使える。

  • as xx で別名を定義して、xx ||--|| yy のようにして従属関係を表現
  • skinparam linetype ortho は関係性を表す線は垂直、水平のみに限定
  • note <position> end note や note <position> of <target> end note で注釈を記載できる
    • クラス図 の「注釈とステレオタイプ」を参照
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@startuml

' hide the spot
hide circle

' avoid problems with angled crows feet
skinparam linetype ortho

entity "Entity01" as e01 {
  *e1_id : number <<generated>>
  --
  *name : text
  description : text
}

entity "Entity02" as e02 {
  *e2_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}

entity "Entity03" as e03 {
  *e3_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}
note bottom
  Note to bottom
end note

note top of e01
  note to e01
end note

e01 ||..o{ e02
e01 |o..o{ e03

@enduml

まとめ

その他・メモ

細かい構文例などは公式ページや、後述の参考文献群を参照。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list