PlantUML Cheat Sheet

[PlantUML](http://plantuml.com/) は DSL(ドメイン特化言語) で UML の図を描きます。
テキストで記述するので Git で差分を確認したり Git Flow で関係者とコラボレーションをして図が描けるので便利です。

PlantUML は多くの UML に対応していますが、よく使うものを **チートシート** にまとめました。

# Diagram

UML は大きく **振る舞い図** と **構造図** に分類されます。

## Behavior

振る舞い図は、振る舞いに関する機能を表現します。

| Diagram            | PlantUML | 説明 |
|:-------------------|:---------|:-----|
| ユースケース図     | [Use Case](http://plantuml.com/usecase.html) | 要求される機能を表現 |
| アクティビティ図   | [Activity](http://plantuml.com/activity.html) | プロセスの状態を表現 |
| ステートチャート図 | [State](http://plantuml.com/state.html) | オブジェクトの状態を表現 |
| シーケンス図       | [Sequence](http://plantuml.com/sequence.html) | やり取りするメッセージと順序を表現 |


## Structure

構造図は、システムの静的な構造や実装の物理的な要素を表現します。

| Diagram        | PlantUML | 説明 |
|:---------------|:---------|:-----|
| クラス図       | [Class](http://plantuml.com/classes.html) | 論理的なビューを表現 |
| オブジェクト図 | [Object](http://plantuml.com/objects.html) | 論理的なビューを表現 |
| コンポーネント図 | [Component](http://plantuml.com/component.html) | コンポーネントの依存関係を表現 |
| パッケージ図 | [Component](http://plantuml.com/component.html) | パッケージの依存関係を表現 |
| 配置図 | [Component](http://plantuml.com/component.html) | システムの物理的な配置を表現 |

# UML

## Use Case

ユースケース図は、要求される機能を表現します。

| keyword | usage           | image |
|:-------:|:---------------:|:------|
|  `( )`  | ユースケース    | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/usecase.png)
|  `->`   | 関連            | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/use_line.png)
|  `.>`   | Extend, Include | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/ext_line.png)

```
actor Promoter
actor Entrant

Promoter --> (Create Event)
Promoter -> (Attend Event)

Entrant --> (Find Event)
(Attend Event) <- Entrant

(Attend Event) <.. (Create Member)  : <<include>>
```

```plantuml
actor Promoter
actor Entrant

Promoter --> (Create Event)
Promoter -> (Attend Event)

Entrant --> (Find Event)
(Attend Event) <- Entrant

(Attend Event) <.. (Create Member)  : <<include>>
```

## Activity

アクティビティー図は、プロセスの状態を表現します。

| keyword   | usage          | image |
|:---------:|:--------------:|:------|
|  `" "`    | アクティビティ | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/activity.png)
|  `(*) ->` | 開始状態       | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/initial_line.png)
|  `-> (*)` | 終了状態       | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/final_line.png)

```
(*) --> "Find Event"
"Find Event" -> "Attend Event"

if "Capacity?" then
  ->[ok] "Create Ticket"
else
  -->[full] if "Standby?" then
    ->[ok] "Standby Ticket"
  else
    -->[no] "Cancel Ticket"
    "Cancel Ticket" --> (*)
  endif
endif

"Create Ticket" --> ==show==
"Standby Ticket" --> ==show==
==show== --> "Show Ticket"
"Show Ticket" --> (*)
```

```plantuml
(*) --> "Find Event"
"Find Event" -> "Attend Event"

if "Capacity?" then
  ->[ok] "Create Ticket"
else
  -->[full] if "Standby?" then
    ->[ok] "Standby Ticket"
  else
    -->[no] "Cancel Ticket"
    "Cancel Ticket" --> (*)
  endif
endif

"Create Ticket" --> ==show==
"Standby Ticket" --> ==show==
==show== --> "Show Ticket"
"Show Ticket" --> (*)
```

## State

ステートマシン図は、オブジェクトの状態を表現します。

| keyword    | usage    | image |
|:----------:|:--------:|:------|
|  `[*] ->`  | 開始状態 | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/initial_line.png)
|  `-> [*]`  | 終了状態 | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/final_line.png)

```
[*] --> active

active -right-> inactive : disable
inactive -left-> active  : enable

inactive --> closed  : close
active --> closed  : close

closed --> [*]
```

```plantuml
[*] --> active

active -right-> inactive : disable
inactive -left-> active  : enable

inactive --> closed  : close
active --> closed  : close

closed --> [*]
```

## Sequence

シーケンス図は、オブジェクト間のやり取りするメッセージと順序を表現します。

| keyword  | usage            | image |
|:--------:|:----------------:|:------|
| `->`     | 同期メッセージ   | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/message_line.png)
| `<--`    | 同期応答         | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/return_line.png)
| `->>`    | 非同期メッセージ | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/async_message_line.png)
| `<<--`   | 非同期応答       | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/async_return_line.png)

```
actor Entrant

Entrant -> Ticket : Attend Event Request

activate Ticket
Ticket -> Member : Create Member Request

activate Member
Member -> Member : Create Member
Ticket <-- Member : Create Member Response
deactivate Member

Ticket -> Ticket : Create Ticket
Entrant <-- Ticket : Attend Event Response
deactivate Ticket
```

```plantuml
actor Entrant

Entrant -> Ticket : Attend Event Request

activate Ticket
Ticket -> Member : Create Member Request

activate Member
Member -> Member : Create Member
Ticket <-- Member : Create Member Response
deactivate Member

Ticket -> Ticket : Create Ticket
Entrant <-- Ticket : Attend Event Response
deactivate Ticket
```

## Class

クラス図は、論理的なビューを表現します。

| keyword | usage     | image |
|:-------:|:---------:|:--|
| `class` | クラス    | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/class.png)
| `+`     | Public    | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/public_visibility.png)
| `-`     | Private   | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/private_visibility.png)
| `#`     | Protected | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/protected_visibility.png)
| `~`     | Package   | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/package_visibility.png)

```
class User {
  username
  password
  +sign_in()
}

class Group {
  name
}

class Member {
  roles
}

User .. Member
Group .. Member
```

```plantuml
class User {
  username
  password
  +sign_in()
}

class Group {
  name
}

class Member {
  roles
}

User .. Member
Group .. Member
```

## Object

オブジェクト図は、論理的なビューを表現します。

| keyword  | usage          | image |
|:--------:|:--------------:|:--|
| `object` | オブジェクト   | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/object.png)
| `*-`     | コンポジション | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/composition_line.png)
| `o-`     | 集約           | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/agregation_line.png)

```
object User
object Group
object Member

object Event
object Ticket

User . Group
User o.. Member
Group o.. Member

Group o. Event
Event o.. Ticket
Member . Ticket
```

```plantuml
object User
object Group
object Member

object Event
object Ticket

User . Group
User o.. Member
Group o.. Member

Group o. Event
Event o.. Ticket
Member . Ticket
```

## Component

コンポーネント図は、コンポーネントの依存関係を表現します。

| keyword    | usage          | image |
|:----------:|:--------------:|:--|
| `[ ]`      | コンポーネント | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/component.png)

```
cloud "Cloud" {
  package "Package" {
    [register]
    frame "frame" {
      [backup]
    }
  }
}

node "Node" {
  database "Database" {
    [store]
  }
  folder "Folder" {
    [File]
  }
}

[register] .. [store] : HTTP
[backup] .. [File] : FTP
```

```plantuml
cloud "Cloud" {
  package "Package" {
    [register]
    frame "frame" {
      [backup]
    }
  }
}

node "Node" {
  database "Database" {
    [store]
  }
  folder "Folder" {
    [File]
  }
}

[register] .. [store] : HTTP
[backup] .. [File] : FTP
```

# Common

## Note

タイトル・ノート・コメントは共通で使えます。

| keyword        | usage             | image |
|:--------------:|:-----------------:|:------|
| `title`        | タイトル          | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/title.png)
| `note left :`  | 左のノート        | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/note_left.png)
| `note right :` | 右のノート        | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/note_right.png)
| `' `           | １行 コメント     |
| `/' '/`        | ブロック コメント |

```
title Title

( )
note left : Note

[  ]
note right : Note

' single-line comment

/'
  block comment
'/
```

```plantuml
title Title

( )
note left : Note

[  ]
note right : Note

' single-line comment

/'
  block comment
'/
```

## Element

アクターやエンティティなどの要素が使えます。

| keyword     | usage            | image |
|:-----------:|:----------------:|:------|
| `actor`     | アクター         | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/actor.png)
| `agent`     | エージェント     | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/agent.png)
| `usecase`   | ユースケース     | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/usecase.png)
| `component` | コンポーネンント | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/component.png)
| `boundary`  | バウンダリー     | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/boundary.png)
| `control`   | コントロール     | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/control.png)
| `entity`    | エンティティー   | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/entity.png)
| `interface` | インタフェース   | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/element/interface.png)


```
actor actor
:Actor alias:

agent agent
usecase usecase
component component
boundary boundary
control control
entity entity
interface interface
```

```plantuml
actor actor
:Actor alias:

agent agent
usecase usecase
component component
boundary boundary
control control
entity entity
interface interface
```

## Package

フォルダーやノードなどのパッケージが使えます。

| keyword    | usage            | image |
|:----------:|:----------------:|:------|
| `package`  | パッケージ       | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/package.png)
| `folder`   | フォルダー       | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/folder.png)
| `artifact` | アーティファクト | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/artifact.png)
| `node`     | ノード           | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/node.png)
| `frame`    | フレーム         | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/frame.png)
| `cloud`    | クラウド         | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/cloud.png)
| `database` | データベース     | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/database.png)
| `storage`  | ストレージ       | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/package/storage.png)

```
package package
folder folder
artifact artifact
node node
frame frame
cloud cloud
database database
storage storage
```

```plantuml
package package
folder folder
artifact artifact
node node
frame frame
cloud cloud
database database
storage storage
```

## Arrow

矢印の向きと配置の位置を指定できます。

| keyword    | usage | image |
|:----------:|:-----:|:------|
| `-up->`    | 上    | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/up_line.png)
| `-down->`  | 下    | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/down_line.png)
| `-left->`  | 左    | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/left_line.png)
| `-right->` | 右    | ![](http://ogom.github.io/draw_uml/assets/img/diagrams/parts/right_line.png)

```
up -up-> right
-right-> down
-down-> left
-left-> up
```

```plantuml
up -up-> right
-right-> down
-down-> left
-left-> up
```

# Salt

UML ではありませんが *簡易なウィジェット* を表現することができます。

## Basic widgets

ボタンやインプットなどを表示します。

```
salt

{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
```

```plantuml
salt

{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
```

## Tree widget

ツリーの構造を表示します。

```
salt

{
  {T
   + World
   ++ America
   +++ Canada
   +++ USA
   ++++ New York
   ++++ Boston
   +++ Mexico
   ++ Europe
   +++ Italy
   +++ Germany
   ++++ Berlin
   ++ Africa
  }
}
```

```plantuml
salt

{
  {T
   + World
   ++ America
   +++ Canada
   +++ USA
   ++++ New York
   ++++ Boston
   +++ Mexico
   ++ Europe
   +++ Italy
   +++ Germany
   ++++ Berlin
   ++ Africa
  }
}
```

# Tips

## Example

PlantUML の実用例を紹介します。

- [PlantUML のテキストで書ける Git Flow と PlantUML で描いた Git Epic Flow](https://qiita.com/ogomr/items/36350d515434d6674caa)
- [PlantUML Example for The OAuth](https://qiita.com/ogomr/items/7f18dd94432a1d72ea22)
- [PlantUML Example for モデルベース要件定義テクニック](https://qiita.com/ogomr/items/66ea2d9195a295e33e8f)
- [PlantUML Example for RDRA 2.0 ハンドブック](https://qiita.com/ogomr/items/97058a87337eaa2ba21a)
- [Real World PlantUML](https://real-world-plantuml.com/)