中継点（ウェイポイント） ​

既定ではコネクタは始点と終点を結ぶ直線です。中継点 を指定すると、 特定のセルを経由してルーティングでき、他のノードを避けたり意図的な 経路を作ったりできます。

中継点はコネクタの { … } ボディ内で指定します（DSL の位置引数として の短縮形はありません — {col, row} のリストは行内に並べると見づらく なるため）。

基本構文 ​

<from> <arrow> <to> ["<label>"] {
  waypoints: [{ col: N, row: N }, …],
}

座標は 小数可 で、{ col: 2.5, row: 2 } のように書けば隣接する セル中心の中間に置けます。

例 ​

SVGPNG

始点 @A1 と終点 @D3 は斜めに離れているため、中継点なしでは @B2 / @C2 を斜めに突っ切る矢印になります。(3,0) と (3,1) を 中継点に指定すると、0 行目を右に進んでから 3 列目を下る L 字の経路 になります。

a --> b "via" {
  waypoints: [{ col: 4, row: 1 }, { col: 4, row: 2 }],
}

複数の中継点 ​

a --> b "S-curve" {
  waypoints: [
    { col: 2, row: 2 },
    { col: 2, row: 3 },
    { col: 3, row: 3 },
  ],
}

中継点は宣言順に通過します。中継点間は 直線 で繋がる（自動スムージング はしません）ので、経由点の数 + 1 = 折れ回数になります。

属性が多くなってきたら ​

経路 + スタイルが組み合わさってきたら、コネクタ全体を doc { connectors: … } に切り出すと見通しが良くなります：

doc {
  connectors: [
    {
      from: 'a', to: 'b', arrow: 'end',
      label: 'routed',
      waypoints: [
        { col: 2.5, row: 1 },
        { col: 2.5, row: 3 },
      ],
      nodeMargin: 0.8,
    },
  ],
}

矢印先端の引き ​

nodeMargin（0–1、既定 0.6）は、矢印先端をノード中心からどれだけ 手前で止めるかを制御します。大きくすると矢印先端が外側に引っ込むので、 既定で矢印がノードのリングに重なってしまうときに調整します。