ひとりマーメイド21日目
レンダリングを意識して綺麗な図をかく
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事ではレンダリングを意識して綺麗な図をかく方法を紹介します！
↓↓前回の記事はこちら
マーメイドあるある
例えば以下のような図を作りたいとします。みなさんならどのように記述しますか？
a --> b --> c --> d と時計回りにノードを並べ、これらを線で結び丸く繋ぎます。
真っ先に思いつくのがこのような記述ではないでしょうか。
flowchart
a --- b --- c --- d --- a
しかしこれをレンタリングすると以下のような図が出来上がります。
確かに間違ってはいないのですが、なんか変ですね。
なぜこうなってしまうのでしょうか。
マーメイドの2つの原則
レンダリングを意識することで思い描いた図を記述することができるようになるかもしれません。ここで重要になるのが以下の2つの原則です。
1. マーメイドのフローは直線的に伸びる
マーメイドのフローは指定の方向に直線的に伸びていきます。デフォルトは 上-->下 です。
2. マーメイドの記述は上から順番にレンダリングされる
マーメイドのレンダリングは主要プログラミング言語と同様、上の行から順番に進んでいきます。
レンダリングを追う
ここでもう一度先ほどの記述を見ます。
フローが伸びる方向は指定がないので、上-->下 です。
a-->b-->c-->d の順番で縦に描画が進み、最後にdからaへとエッジが伸びています。
flowchart
a --- b --- c --- d --- a
レンダリングを意識するとこのような出力になることは納得できます。
解決策
フローを綺麗に丸く繋ぎたい場合は以下のように記述します。
flowchart LR
a --- b & d --- c
こちらも同様にレンダリングを追ってみます。
フローが伸びる方向はLRと指定されているため 左-->右 です。
まずaが描画され、次にbとcが同一レベルに描画されます。そして最後にcが描画されています。
flowchart LR
a --- b & d --- c
レンダリング順に番号を振ると以下のようになります。記述された順番で指定方向(左-->右)に直線的に描画されていることが分かります。
ノードを増やしてみます。
指定方向は 上-->下 です。
こちらも同時に定義したノードは同一レベルに描画されていることが分かります。
flowchart
a --- b & c --- d & e & f
レンダリング順は以下の通りです。フローが指定方向(上-->下)に直線的に伸びています。
応用
以下のような記述を追ってみます。
flowchart
a --- b & d --- c
e --- d & f --- g
h --- f & i --- j
k --- i & l --- m
こちらもレンダリング順に番号を振りました。
flowchart
a --- b & d --- c
e --- d & f --- g
h --- f & i --- j
k --- i & l --- m
まず記述の各行が大枠1~4に当たります。それぞれの大枠の中では指定方向(上-->下)に直線的に描画が進んでいます。
次に1~4の大枠が 左-->右 方向につながっていることが分かります。これは大枠同士が共有しているノード( d, f, i )が隣同士の位置関係を決定しているためです。
例えば、e --- d & f --- gの行(大枠2)をレンダリングする際、dは既に大枠1の中で位置が決定しているため、これを基準に大枠1,2の位置関係が決まります。
まとめ
記述したコードが意図しない形でレンダリングされることはよくあります。ぜひレンダリングを意識した記述で、思い通りのダイアグラムを作ってみてください。
↓↓次回の記事はこちら！！
参考