marmaid.jsのフローチャートの末端を揃える方法

marmaid.jsで要望にそった製品を選んだり、人のタイプを判別するタイプの診断フローチャートを作りたかったが、分岐の構成によっては、結果ノードを右揃えにしたいのに揃わないで、レイアウトが不格好になります。

終端揃え前

ちょっと調べた範囲だと、レイアウト調整用の機能は用意されていなかったので、どうしようということで試した結果、下記のように、すべての末端後に仮想の終点作成し、リンクとノードを透明化することで揃っているように見せかけることができるようです。

終端揃え後

flowchart LR
1 --> 11
11 --> 111 --> A
11 --> 112
112 --> 1121 --> B
112 --> 1122 --> C
1 --> 12 --> D
1 --> E
1 --> F
A --> hide
B --> hide
C --> hide
D --> hide
E --> hide
F --> hide

classDef redNode fill:red
class A,B,C,D,E,F redNode
classDef hideNode color:transparent,fill:transparent,stroke:transparent
class hide hideNode
linkStyle 12,13,14,15,16,17 stroke:transparent