Qiitaで PlantUMLで書ける図の種類

Qiitaで使えるテキストをUMLなどの図に変換する PlantUML で使用できる図の種類

[参考:PluntUML概要](https://plantuml.com/ja/)

Qiitaで使えるかサンプルを1つ引用して埋め込んで見ました。コードは「Markdownで本文を見る」で参照してください。
→ JSON、YAMLのデータ表示はできないようです。(2021/08/04時点)

# UML

----
### シーケンス図
```plantuml

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

```

----
### ユースケース図
```plantuml

@startuml
left to right direction
actor Guest as g
package Professional {
  actor Chef as c
  actor "Food Critic" as fc
}
package Restaurant {
  usecase "Eat Food" as UC1
  usecase "Pay for Food" as UC2
  usecase "Drink" as UC3
  usecase "Review" as UC4
}
fc --> UC4
g --> UC1
g --> UC2
g --> UC3
@enduml

```

----
### クラス図
```plantuml

@startuml
Object <|-- ArrayList

Object : equals()
ArrayList : Object[] elementData
ArrayList : size()

@enduml

```

----
### オブジェクト図
```plantuml

@startuml
object Object01
object Object02
object Object03
object Object04
object Object05
object Object06
object Object07
object Object08

Object01 <|-- Object02
Object03 *-- Object04
Object05 o-- "4" Object06
Object07 .. Object08 : some labels
@enduml

```

----
### アクティビティ図
```plantuml

@startuml

start

if (Graphviz installed?) then (yes)
  :process all\ndiagrams;
else (no)
  :process only
  __sequence__ and __activity__ diagrams;
endif

stop

@enduml

```

----
### コンポーネント図
```plantuml

@startuml

DataAccess - [First Component]
[First Component] ..> HTTP : use

@enduml

```

----
### 配置図
```plantuml

@startuml

node ノード1
node ノード2
node ノード3
node ノード4
node ノード5
ノード1 -- ノード2 : ラベル1
ノード1 .. ノード3 : ラベル2
ノード1 ~~ ノード4 : ラベル3
ノード1 == ノード5

@enduml

```

----
### 状態遷移図（ステートマシン図）
```plantuml

@startuml

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]

@enduml

```


----
### タイミング図
```plantuml

@startuml
robust "ウェブブラウザ" as WB
concise "ユーザ" as WU

@0
WU is アイドル
WB is アイドル

@100
WU is 待機
WB is 処理中

@300
WB is 待機
@enduml


```


----
# UML以外

----
### JSON data
```plantuml

@startjson
{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 27,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    }
  ],
  "children": [],
  "spouse": null
}
@endjson

```

----
### YAML data

```plantuml

@startyaml
fruit: Apple
size: Large
color: Red
@endyaml


```

----
### Network diagram (nwdiag)
```plantuml

@startuml
nwdiag {
  network dmz {
      address = "210.x.x.x/24"

      web01 [address = "210.x.x.1"];
      web02 [address = "210.x.x.2"];
  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01;
      db02;
  }
}
@enduml

```

----
### ワイヤーフレーム
```plantuml

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

```


----
### アーキテクチャ図
```plantuml

@startuml
!define Junction_Or circle #black
!define Junction_And circle #whitesmoke

Junction_And JunctionAnd
Junction_Or JunctionOr

archimate #Technology "VPN サーバ" as vpnServerA <<technology-device>>

rectangle 実行 #lightgreen
rectangle 終了 #red
rectangle 待機 #orange
実行 -up-> JunctionOr
終了 -up-> JunctionOr
終了 -down-> JunctionAnd
待機 -down-> JunctionAnd
@enduml

```


### 仕様及び記述言語 (SDL)
```plantuml

@startuml
:Ready;
:next(o)|
:Receiving;
split
 :nak(i)<
 :ack(o)>
split again
 :ack(i)<
 :next(o)
 on several lines|
 :i := i + 1]
 :ack(o)>
split again
 :err(i)<
 :nak(o)>
split again
 :foo/
split again
 :bar\\
split again
 :i > 5}
stop
end split
:finish;
@enduml

```


### Ditaa
```plantuml

@startditaa
+---------+  /--------\   +-------+
| cBLU    +--+cAAA    +---+Version|
|         |  |  Data  |   |   V3  |
|    +----+  |  Base  |   |cRED{d}|
|    |cPNK|  |     {s}|   +-------+
|    |    |  \---+----/
+----+----+    
@endditaa

```

----
### ガントチャート
`[T4 (1週間と4日)] lasts 1 week and 4 days` の記述はエラーがたまに出るので削除
※and が相性悪い模様

```plantuml

@startgantt
[プロトタイプを設計] lasts 15 days
[プロトタイプをテスト] lasts 10 days
-- すべての例 --
[Task 1 (1日)] lasts 1 day
[T2 (5日)] lasts 5 days
[T3 (1週間)] lasts 1 week
[T5 (2週間)] lasts 2 weeks
@endgantt

```

### マインドマップ
```plantuml

@startmindmap
+ OS
++ Ubuntu
+++ Linux Mint
+++ Kubuntu
+++ Lubuntu
+++ KDE Neon
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
@endmindmap

````

----
### WBS図(作業分解図)
```plantuml

@startwbs
* Business Process Modelling WBS
** Launch the project
*** Complete Stakeholder Research
*** Initial Implementation Plan
** Design phase
*** Model of AsIs Processes Completed
****< Model of AsIs Processes Completed1
****> Model of AsIs Processes Completed2
***< Measure AsIs performance metrics
***< Identify Quick Wins
@endwbs

````

----
### AsciiMath や JLaTeXMath による、数学的記法
```plantuml

@startuml
:<math>int_0^1f(x)dx</math>;
:<math>x^2+y_1+z_12^34</math>;
note right
Try also
<math>d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h</math>
<math>P(y|bb"x") or f(bb"x")+epsilon</math>
end note
@enduml

````

----
### ER図

```plantuml

@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
}

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

@enduml

````