PlantUML紹介

1. PlantUML
https://plantuml.com/ja/
by yuki.ohnaka＠no4 1

2. 自己紹介
yuki ohnaka
株式会社ナンバーフォー
Front-end engineer
Server-side engineer
Native-App engineer
Vue / React / TypeScript / Java / PHP /
Kotlin / Swift / Python / Docker / Ansible ...
Qiita / Zenn
by yuki.ohnaka＠no4 2

3. PlantUML is...
シンプルなテキストファイルでUML が書ける
色々な用途のダイアグラムに対応している
UML以外にも色々な図に対応している
画像ファイル(png/svg)として出力ができる
by yuki.ohnaka＠no4 3

4. 対応しているダイアグラム
by yuki.ohnaka＠no4 4

5. シーケンス図
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
Ref
by yuki.ohnaka＠no4 5

6. ユースケース図
@startuml
User -> (Start)
User --> (Use the application) : A small label
:Main Admin: ---> (Use the application) : This isnyet anothernlabel
@enduml
Ref
by yuki.ohnaka＠no4 6

7. クラス図
@startuml
class Car
Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns
@enduml
Ref
by yuki.ohnaka＠no4 7

8. アクティビティ図
@startuml
start
repeat :foo as starting label;
:read data;
:generate diagrams;
backward:This is backward;
repeat while (more data?)
stop
@enduml
Ref
by yuki.ohnaka＠no4 8

9. コンポーネント図
@startuml
DataAccess - [First Component]
[First Component] ..> HTTP : use
@enduml
Ref
by yuki.ohnaka＠no4 9

10. 配置図
@startuml
node ノード1
node ノード2
node ノード3
node ノード4
ノード1 -- ノード2 : ラベル1
ノード1 .. ノード3 : ラベル2
ノード1 ~~ ノード4 : ラベル3
@enduml
Ref
by yuki.ohnaka＠no4 10

11. ステート図
@startuml
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string
State1 -> State2
State2 --> [*]
@enduml
Ref
by yuki.ohnaka＠no4 11

12. タイミング図
@startuml
concise "ユーザ" as WU
scale 100 as 50 pixels
@WU
0 is 待機
+500 is ok
@enduml
Ref
by yuki.ohnaka＠no4 12

13. ダイアグラム以外にも
by yuki.ohnaka＠no4 13

14. fruit Apple
size Large
color Red
nest k e y value
JSONデータ
@startjson
{
"fruit":"Apple",
"size":"Large",
"color":"Red",
"nest": {
"key": "value"
}
}
@endjson
Ref
by yuki.ohnaka＠no4 14

15. fruit Apple
size Large
color Red
nest k e y value
YAMLデータ
@startyaml
fruit: Apple
size: Large
color: Red
nest:
key: value
@endyaml
Ref
by yuki.ohnaka＠no4 15

16. d m z
210.x.x.x/24
internal
172.x.x.x/24
210.x.x.1
172.x.x.1
w e b 0 1
d b 0 1
ネットワーク図
@startuml
nwdiag {
network dmz {
address = "210.x.x.x/24"
web01 [address = "210.x.x.1"];
}
network internal {
address = "172.x.x.x/24";
web01 [address = "172.x.x.1"];
db01;
}
}
@enduml
Ref
by yuki.ohnaka＠no4 16

17. Entity01
e1_id : number «generated»
name : text
Entity02
e2_id : number «generated»
e1_id : number «FK»
ER図
@startuml
entity "Entity01" as e01 {
*e1_id : number <<generated>>
--
*name : text
}
entity "Entity02" as e02 {
*e2_id : number <<generated>>
--
*e1_id : number <<FK>>
}
e01 ||..o{ e02
@enduml
Ref
by yuki.ohnaka＠no4 17

18. ほかにも
ワイヤーフレーム- Ref
アーキテクチャ図- Ref
ガントチャート- Ref
マインドマップ- Ref
WBS図(作業分解図) - Ref
by yuki.ohnaka＠no4 18

19. なぜPlantUMLなのか
テキストで書けるのでバージョン管理がしやすい
編集ツールに依存しない
自動レイアウト
by yuki.ohnaka＠no4 19

20. PlantUMLのつらいところ
自動レイアウトが思い通りにならない
記法を覚えなくてはいけない
標準テーマがダサい
by yuki.ohnaka＠no4 20

21. Live Demo
by yuki.ohnaka＠no4 21

22. まとめ
色々な図に対応してるが、使いたいものだけ覚えて使えばいい
サクッとある程度の図が書ける
内部向け資料に向いている
テキストベース
エディタは何でもいい
バージョン管理しやすい
by yuki.ohnaka＠no4 22

23. ご清聴ありがとうございました
by yuki.ohnaka＠no4 23

24. おまけ
by yuki.ohnaka＠no4 24

25. 環境構築の一例①
Chrome Extension - PlantUML Viewer
by yuki.ohnaka＠no4 25

26. 環境構築の一例②
VSCode Plugin - PlantUML
VSCodeで始めるPlantUML生活
by yuki.ohnaka＠no4 26