Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

シーケンス図 @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

Slide 6

Slide 6 text

ユースケース図 @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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

アクティビティ図 @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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

配置図 @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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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 <> -- *name : text } entity "Entity02" as e02 { *e2_id : number <> -- *e1_id : number <> } e01 ||..o{ e02 @enduml Ref by yuki.ohnaka ＠ no4 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Live Demo by yuki.ohnaka ＠ no4 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

おまけ by yuki.ohnaka ＠ no4 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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