esa.ioで図を書くならUML記法を使うと手軽にきれいにかける

esa.ioで図を書く場合は、UML記法を使うと、簡単にきれいに図を書けます。

詳細な書き方は、PlantUMLを参考にしてください。

枠と要素を用いた例を書いてみます。

四角枠と要素の関連

title:(例)クーポンを登録する

' 要素を左から右に並べる
left to right direction
'  四角枠の外の要素
(ラッパーAPI)

' 四角枠
rectangle フロント {
    (ラッパーAPI) <-- (処理1)
    (ラッパーAPI) <-- (処理2)
    (ラッパーAPI) <-- (処理3)
}
rectangle 基幹API {
    (ラッパーAPI) --> (クーポンを登録) :registCoupon
}

矢印の向きを変える

矢印の向き変更は良く使うのでまとめておきます。

矢印を縦向きにする場合は、「-」を2つにする。
矢印を横向きにする場合は、「-」を1つにする。

四角の枠内の要素が横に並んで、小さく縮小されてしまう場合は、
矢印の向きを縦とか横とか向きを変えると、想定通りに表示できたりします。

' 縦方向でAPI←処理1
(API) <-- (処理1)

' 縦方向でAPI→処理2
(API) --> (処理2)

' 横方向でAPI→処理3
(API) -> (処理3)

以下のように書いても矢印の向きを変更できます。
-right->
-left->
-down->
-up->

詳細な表記はPlantUMLを参照