位置調整に悩まないPlantUMLでのシステム構成図の書き方

アクティビティ図

シーケンス図

この内、システム構成図を書く時に位置調整が思うようにいかなくて苦戦する事が多い

システム構成図を書く時に悩まない書き方を整理する

位置指定にはdown, upのみを使う

たとえばWebサーバ、アプリケーションサーバ、DB、バッチといった構成のシステムは以下の様に表現する

code:puml

@startuml

actor User as u

cloud AWS {

database DB as db

}

u -down-> web

web -down-> app1

web -down-> app2

app1 -down-> db

app2 -down-> db

batch -down-> db

@enduml

https://gyazo.com/8d0a4d444f6cc110dbaba845598f6474

左右の位置調整は諦める

right, leftは使わず、down, upのみ使う

rightのみにすると横に長くなって、マウススクロールが面倒になる

down, upのみだとマウスホイールダウンだけで確認できるので楽

upを使わないといけない場合はdownで表現できないか考える

前述のbatchからユーザに通知をする状態を表現するとき、upを使うこともできる

code:puml

@startuml

actor User as u

cloud AWS {

database DB as db

}

u -down-> web

web -down-> app1

web -down-> app2

app1 -down-> db

app2 -down-> db

batch -down-> db

batch -up-> u : SMS通知

@enduml

https://gyazo.com/d629e404fc75bbde2bf149a8e159b12d

これでも良いけれど、図が複雑になってきた時に図が崩壊することが多い

流れをシンプルにするためにUserをもうひとり増やしてdownで表現することもできる

ユーザが2人登場してるけれど同一人物であることはノートで補足すれば良い

code:puml

@startuml

actor User as u

actor User as u2

cloud AWS {

database DB as db

}

u -down-> web

web -down-> app1

web -down-> app2

app1 -down-> db

app2 -down-> db

batch -up-> db

batch -down-> u2 : SMS通知

note right

Userがもうひとり登場しているが同一人物。

データの流れをシンプルにするため2人で表現している。

end note

@enduml

https://gyazo.com/3fed729c0654ff5d3ce6b5623879de5a

システム構成すべてを一つの図で表現しようとしない

一枚のシステム構成図にすべてのインフラ要素を詰め込まない

目的に合わせて書く内容を取捨選択して分けて書く

例

アプリケーションサーバ2台

ロードバランサー1台

S3の前段にCloudFront

名前解決にRoute53

CloudWatchEventでバッチを起動

これをちょっと細かい目に書いてみるとこうなる

code:puml

@startuml

actor User as u

cloud AWS {

package 東京リージョン {

package VPC {

package PublicSubnet {

package "Elastic LoadBalancing" {

node "Application LoadBalancer" as alb

(TargetGroup B) as tgb

(TargetGroup G) as tgg

}

}

package PrivateSubnet {

package "AWS Fargate" {

}

}

package DatabaseSubnet {

package "Amazon RDS" {

database DB as db

}

}

package PrivateSubnet as p2 {

package "AWS Fargate" as f2 {

}

}

}

}

database S3 as s3

}

alb -down-> r53 : Aレコード登録

u -down-> r53 : 名前解決

u -down-> alb : HTTP GET /index.html

alb -down-> tgb

alb -down-> tgg

tgb -down-> a1

tgg -down-> a2

a1 -down-> db

a2 -down-> db

cw -up-> batch

batch -up-> db

u -down-> cf

cf -down-> s3

@enduml

https://gyazo.com/b3108562806d7f9e323c6bfa99e173c6

システムを構成する要素の数自体は少ないのに、グルーピングとかを細かく書きすぎてでかくなっている

アクセスの流れだけを表現するのであれば、以下で良い

code:puml

@startuml

actor User as u

cloud AWS {

node "ALB" as alb

database DB as db

database S3 as s3

}

alb -down-> r53 : Aレコード登録

u -down-> r53 : 名前解決

u -down-> alb : HTTP GET /index.html

alb -down-> a1

alb -down-> a2

a1 -down-> db

a2 -down-> db

cw -up-> batch

batch -up-> db

u -down-> cf

cf -down-> s3

@enduml

https://gyazo.com/d2a83ce58777c7cb3b86fa16000b13b7

ネットワークやアクセス制御を表現したいなら以下

code:puml

@startuml

actor User as u

cloud AWS {

package "prod vpc" {

package "security group public" {

package "public subnet" {

(443) as alb443

node "ALB" as alb

note right

SSL終端

end note

}

}

package "security group app" {

package "private subnet a" {

(80) as a180

}

package "private subnet c" {

(80) as a280

}

}

package "security group db" {

package "database subnet" {

(3306) as db3306

database DB as db

}

}

package "security group app" as aaaa {

package "private subnet a" as pa {

}

}

}

database S3 as s3

}

alb -down-> r53 : Aレコード登録

u -down-> r53 : 名前解決

u -down-> alb443 : HTTPS GET /index.html

alb443 -down-> alb

alb -down-> a180 : http

alb -down-> a280 : http

a180 -down-> a1

a280 -down-> a2

a1 -down-> db3306

a2 -down-> db3306

db3306 -down-> db

cw -up-> batch

batch -up-> db3306

u -down-> cf

cf -down-> s3

@enduml

https://gyazo.com/0adbc837dbe330ee9f3dd08ac66532a6

AWSのサービス名、リッスンポート、リージョン、VPC、サブネット、セキュリティグループなど、その図で説明するつもりが無い要素はバッサリ図から落とせばいい

AWSを構成する要素は多すぎるので全部表現し始めたらきりがない

ルートテーブルとかIAMまで書き始めるとわけわからなくなる