PlantUML

Transcript

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 is\nyet another\nlabel @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