@cardenelabs/cdl 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -5,6 +5,87 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.30.0] - 2026-09-05
+
+### Fixed
+
+- **出入りする線の根元が重ならなくなった** (#649)
+
+  同じ節の同じ辺に 1 本入って 1 本出る時、相手が違うと 2 本の根元が重なったまま残っていた。
+  色の違う線どうしでは後から描いた色が前の色を隠し、関係の群を色で読み分けられなかった。
+
+  同じ辺に 2 本以上が付く形は 4 通りあり、3 通りは既に担当がいた。
+  入る × 入るは `fanIncomingEndpoints` (#611)、出る × 出るは `fan-origin-single-point` 軸が担当し、後者は意図して重ねる。
+  同じ 2 節を往復する対は `SYMMETRIC_PAIR_SHIFT` (`CAR-541`) が担当していた。
+  相手の違う入る × 出るだけ担当がいなかった。
+
+  `fanIncomingEndpoints` が、同じ辺から出る線を数に入れるようにした。
+  出る線が中央を占め、入る線は来た向きの外側へ寄る。
+
+  **重なっている時だけ動かす**。
+  変更前も変更後も 24px 以上重なっていない線は触らない。
+  動かすとまっすぐな線に折れが増えるため。
+
+  終点をずらす助走を、最後の区間いっぱいまで伸ばせるようにした。
+  変更前の 40px しか戻らない形では重なりが 40px ぶんしか減らなかったが、変更後は最後の区間全体を使える。
+
+  助走は長い方から順に試す。
+  長い助走で交差が増えるなら 40px で試し、どちらも増えるなら元のままにする。
+
+  消費側の `dragon` の見本帳 12 クラス、14 関係では、色の違う線の重なりが変更前の 5 件から変更後の 2 件に減った。
+  残る 2 件は `fan-origin-single-point` が意図して重ねている出る × 出る。
+
+- **同じ辺から出る線が長く重ならなくなった** (#651)
+
+  同じ節の同じ辺から 2 本以上が出る時、起点が 1 点に収束するため出だしが重なる。
+  折れる位置が遠いと、その手前まで完全に重なったままになる。
+
+  消費側の `dragon` の見本帳では 137px 重なっていた。
+  色の違う線どうしでは後から描いた色が前の色を隠す。
+
+  折れる位置は `detourStub` が「端点と、進行方向で最初に当たる箱の中間」に置いている (#418)。
+  1 本しか出ない辺ではこの規則が正しく、2 本以上出る辺でだけ共有区間を長くしていた。
+
+  経路が確定した後に、**一番長い 1 本を残して残りの最初の折れを手前へ引く** ようにした。
+  引く先は `EDGE_STUB_OUT` と角の丸め半径の和で、まっすぐ走る部分がちょうど `EDGE_STUB_OUT` になる。
+
+  引いた結果、箱に当たる線と、交差が増える線は元のままにする。
+
+  重なりは変更前の 137px から変更後の 40px になった。
+  この 40px は 2 つの規約が要求している分で、これ以上は縮められない。
+  `fan-origin-single-point` 軸が起点を 1 点に収束させ、`EDGE_STUB_OUT` が起点から 40px 以上の直進を求めるため。
+
+  1 本しか出ない辺の折れる位置は変えていない。
+
+## [0.29.0] - 2026-09-04
+
+### Added
+
+- **図の種類を絵の根に出すようにした** (#645)
+
+  これまで絵の根に出ていたのは `data-cdl-stage` と `data-cdl-scale` と `data-cdl-palette` の
+  3 つだけで、図の種類が出ていなかった。 そのため消費側が図の種類で描き分けられない。
+
+  実際に困った例は、消費側の dragon でクラス図の関係の線だけを太くしようとした時。
+  線の規則は `[data-cdl-role="edge-line"]` 1 つしかなく、直すと ER 図 ・ 状態遷移図 ・
+  流れ図 ・ 並び図 の線まで同時に太くなる。
+
+  `data-cdl-palette` では選び分けられない = クラス図と ER 図がどちらも `kinari` を出すため。
+
+  `palette` (#1553) と同じ形にした = **cdl は名前だけを出し、見た目は消費側が決める**。
+  値を engine に持たせると、消費側が表現を変えるたびに engine の release が要る。
+
+  種類名は組み立て器の名前をそのまま小文字で使う。 例外は 4 件。
+
+  | 組み立て器 | 種類名 | なぜ |
+  |---|---|---|
+  | `classDiagram` | `class` | 消費側の記法が `class` を使う |
+  | `userJourney` | `journey` | 同上 |
+  | `mindMap` | `mindmap` | 大文字小文字を混ぜない |
+  | `stateMachine` と `stateMachine2` | どちらも `state` | 後者は入れ子と動作を足した拡張で、図の種類としては同じ |
+
+  組み立て器を通さず `diagram()` を直に呼んだ図と、空文字を渡した図には属性を出さない。
+
 ## [0.28.0] - 2026-09-04
 
 ### Changed
@@ -1411,7 +1492,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.28.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.30.0...HEAD
+[0.30.0]: https://github.com/cardene777/cdl/compare/v0.29.0...v0.30.0
+[0.29.0]: https://github.com/cardene777/cdl/compare/v0.28.0...v0.29.0
 [0.28.0]: https://github.com/cardene777/cdl/compare/v0.27.0...v0.28.0
 [0.27.0]: https://github.com/cardene777/cdl/compare/v0.26.0...v0.27.0
 [0.26.0]: https://github.com/cardene777/cdl/compare/v0.25.0...v0.26.0

package/dist/index.cjs

@@ -11486,6 +11486,8 @@ function diagram(id, options) {
         ...options.structuredData === "exclude" ? { structuredData: "exclude" } : {},
         // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
         ...options.palette !== void 0 ? { palette: options.palette } : {},
+        // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
+        ...options.type !== void 0 ? { type: options.type } : {},
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...inputs.length > 0 ? { inputs: [...inputs] } : {},
         ...formulas.length > 0 ? { formulas: [...formulas] } : {},
@@ -19673,16 +19675,112 @@ function separateSharedStraightRuns(edges, nodes) {
     e.d = verticesToPath(verts.get(e.id));
   }
 }
+function pullOutgoingFirstCorner(edges, nodes) {
+  if (edges.length < 2) return;
+  const \u675F = /* @__PURE__ */ new Map();
+  const \u540C\u3058\u7D44\u306E\u6570 = /* @__PURE__ */ new Map();
+  for (const e of edges) {
+    const key = `${e.from}::${e.fromSide}`;
+    const list = \u675F.get(key) ?? [];
+    list.push(e);
+    \u675F.set(key, list);
+    const pair = `${e.from}->${e.to}`;
+    \u540C\u3058\u7D44\u306E\u6570.set(pair, (\u540C\u3058\u7D44\u306E\u6570.get(pair) ?? 0) + 1);
+  }
+  let \u672D\u3092\u65E7\u7D4C\u8DEF\u3078\u8FFD\u5F93\u6E08\u307F = false;
+  for (const list of \u675F.values()) {
+    if (list.length < 2) continue;
+    const \u4E26\u3073 = list.flatMap((e) => {
+      const pts = pathVertices(e.d);
+      if (!pts || pts.length < 2) return [];
+      return [{ e, pts, \u6700\u521D\u306E\u9577\u3055: Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y) }];
+    }).sort((a, b) => b.\u6700\u521D\u306E\u9577\u3055 - a.\u6700\u521D\u306E\u9577\u3055);
+    for (const { e, pts, \u6700\u521D\u306E\u9577\u3055 } of \u4E26\u3073.slice(1)) {
+      if ((\u540C\u3058\u7D44\u306E\u6570.get(`${e.from}->${e.to}`) ?? 0) > 1) continue;
+      if (pts.length < 3 || \u6700\u521D\u306E\u9577\u3055 <= EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER) continue;
+      const \u6A2A = e.fromSide === "left" || e.fromSide === "right";
+      if (!runIsAligned(pts, 0, \u6A2A ? 1 : 0)) continue;
+      const \u79FB\u52D5\u91CF = \u6700\u521D\u306E\u9577\u3055 - (EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER);
+      const ux = (pts[1].x - pts[0].x) / \u6700\u521D\u306E\u9577\u3055;
+      const uy = (pts[1].y - pts[0].y) / \u6700\u521D\u306E\u9577\u3055;
+      const \u8A66\u3057 = pts.map(
+        (p, i) => i === 1 || i === 2 ? { x: p.x - ux * \u79FB\u52D5\u91CF, y: p.y - uy * \u79FB\u52D5\u91CF } : p
+      );
+      const \u8A66\u3057D = verticesToPath(\u8A66\u3057);
+      const \u8A66\u3057\u533A\u9593 = flattenPathSegments(extractPathSegments(\u8A66\u3057D));
+      if (nodes.some(
+        (n) => n.id !== e.from && n.id !== e.to && segmentsCrossRect(\u8A66\u3057\u533A\u9593, nodeRect(n))
+      )) {
+        continue;
+      }
+      const \u524D = e.d;
+      const \u524D\u306E\u4EA4\u5DEE = countEdgeCrossings(edges).count;
+      e.d = \u8A66\u3057D;
+      if (countEdgeCrossings(edges).count > \u524D\u306E\u4EA4\u5DEE) {
+        e.d = \u524D;
+        continue;
+      }
+      e.d = \u524D;
+      if (!\u672D\u3092\u65E7\u7D4C\u8DEF\u3078\u8FFD\u5F93\u6E08\u307F) {
+        slideLabelsAlongOwnPath(edges, nodes);
+        \u672D\u3092\u65E7\u7D4C\u8DEF\u3078\u8FFD\u5F93\u6E08\u307F = true;
+      }
+      const labelBox = computeLabelBBoxWorld(e);
+      const label = { x: labelBox.x + labelBox.w / 2, y: labelBox.y + labelBox.h / 2 };
+      const \u7DDA\u5206\u307E\u3067\u306E\u8DDD\u96E22 = (a, b) => {
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const len2 = dx * dx + dy * dy;
+        const t = len2 === 0 ? 0 : Math.max(0, Math.min(1, ((label.x - a.x) * dx + (label.y - a.y) * dy) / len2));
+        return (label.x - (a.x + dx * t)) ** 2 + (label.y - (a.y + dy * t)) ** 2;
+      };
+      const \u52D5\u304F\u533A\u9593\u3078\u306E\u8DDD\u96E2 = \u7DDA\u5206\u307E\u3067\u306E\u8DDD\u96E22(pts[1], pts[2]);
+      const label\u3082\u52D5\u304B\u3059 = pts.slice(0, -1).every((p, i) => \u7DDA\u5206\u307E\u3067\u306E\u8DDD\u96E22(p, pts[i + 1]) >= \u52D5\u304F\u533A\u9593\u3078\u306E\u8DDD\u96E2 - 1e-6);
+      e.d = \u8A66\u3057D;
+      if (label\u3082\u52D5\u304B\u3059) {
+        e.labelX -= ux * \u79FB\u52D5\u91CF;
+        e.labelY -= uy * \u79FB\u52D5\u91CF;
+      }
+    }
+  }
+}
 var ENDPOINT_FAN_STEP = 56;
 var ENDPOINT_FAN_MIN = 20;
 var ENDPOINT_FAN_RUNUP = 40;
+var MIXED_ROOT_OVERLAP_MIN = 24;
 function fanIncomingEndpoints(edges, nodes) {
   if (edges.length < 2) return;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
+  const \u5E73\u5766\u306A\u533A\u9593 = new Map(edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))]));
+  const \u8EF8\u306B\u5E73\u884C\u306A\u91CD\u306A\u308A\u9577\u3055 = (\u4E00\u65B9, \u4ED6\u65B9) => {
+    let \u5408\u8A08 = 0;
+    for (const a of \u5E73\u5766\u306A\u533A\u9593.get(\u4E00\u65B9.id) ?? []) {
+      const a\u306F\u6C34\u5E73 = Math.abs(a.y2 - a.y1) <= 1;
+      const a\u306F\u5782\u76F4 = Math.abs(a.x2 - a.x1) <= 1;
+      for (const b of \u5E73\u5766\u306A\u533A\u9593.get(\u4ED6\u65B9.id) ?? []) {
+        const b\u306F\u6C34\u5E73 = Math.abs(b.y2 - b.y1) <= 1;
+        const b\u306F\u5782\u76F4 = Math.abs(b.x2 - b.x1) <= 1;
+        if (a\u306F\u6C34\u5E73 && b\u306F\u6C34\u5E73 && Math.abs(a.y1 - b.y1) <= 1) {
+          \u5408\u8A08 += Math.max(0, Math.min(Math.max(a.x1, a.x2), Math.max(b.x1, b.x2)) - Math.max(Math.min(a.x1, a.x2), Math.min(b.x1, b.x2)));
+        }
+        if (a\u306F\u5782\u76F4 && b\u306F\u5782\u76F4 && Math.abs(a.x1 - b.x1) <= 1) {
+          \u5408\u8A08 += Math.max(0, Math.min(Math.max(a.y1, a.y2), Math.max(b.y1, b.y2)) - Math.max(Math.min(a.y1, a.y2), Math.min(b.y1, b.y2)));
+        }
+      }
+    }
+    return \u5408\u8A08;
+  };
   const \u540C\u3058\u7D44\u306E\u6570 = /* @__PURE__ */ new Map();
   for (const e of edges) \u540C\u3058\u7D44\u306E\u6570.set(`${e.from}->${e.to}`, (\u540C\u3058\u7D44\u306E\u6570.get(`${e.from}->${e.to}`) ?? 0) + 1);
   const \u675F = /* @__PURE__ */ new Map();
+  const \u51FA\u308B\u7DDA = /* @__PURE__ */ new Map();
   for (const e of edges) {
+    if (nmap.has(e.from)) {
+      const key2 = `${e.from}::${e.fromSide}`;
+      const list2 = \u51FA\u308B\u7DDA.get(key2) ?? [];
+      list2.push(e);
+      \u51FA\u308B\u7DDA.set(key2, list2);
+    }
     if (!nmap.has(e.to)) continue;
     if ((\u540C\u3058\u7D44\u306E\u6570.get(`${e.from}->${e.to}`) ?? 0) > 1) continue;
     const key = `${e.to}::${e.toSide}`;
@@ -19690,27 +19788,48 @@ function fanIncomingEndpoints(edges, nodes) {
     list.push(e);
     \u675F.set(key, list);
   }
-  for (const [, list] of \u675F) {
-    if (list.length < 2) continue;
+  for (const [key, list] of \u675F) {
+    const \u4E2D\u592E\u304C\u585E\u304C\u3063\u3066\u3044\u308B = (\u51FA\u308B\u7DDA.get(key) ?? []).some(
+      (\u51FA\u7DDA) => list.some(
+        (\u5165\u7DDA) => !(\u5165\u7DDA.from === \u51FA\u7DDA.to && \u5165\u7DDA.to === \u51FA\u7DDA.from) && \u8EF8\u306B\u5E73\u884C\u306A\u91CD\u306A\u308A\u9577\u3055(\u5165\u7DDA, \u51FA\u7DDA) >= MIXED_ROOT_OVERLAP_MIN
+      )
+    );
+    if (list.length < 2 && !\u4E2D\u592E\u304C\u585E\u304C\u3063\u3066\u3044\u308B) continue;
     const n = nmap.get(list[0].to);
     const \u6A2A = list[0].toSide === "left" || list[0].toSide === "right";
     const \u8FBA\u306E\u9577\u3055 = \u6A2A ? n.h : n.w;
     const \u4F7F\u3048\u308B\u5E452 = \u8FBA\u306E\u9577\u3055 - 2 * ARROW_ENDPOINT_CENTER_TOL;
     if (\u4F7F\u3048\u308B\u5E452 <= 0) continue;
-    const \u9593\u9694 = Math.min(ENDPOINT_FAN_STEP, \u4F7F\u3048\u308B\u5E452 / (list.length - 1));
+    const \u5E2D\u306E\u9593 = \u4E2D\u592E\u304C\u585E\u304C\u3063\u3066\u3044\u308B ? list.length : list.length - 1;
+    const \u9593\u9694 = Math.min(ENDPOINT_FAN_STEP, \u4F7F\u3048\u308B\u5E452 / \u5E2D\u306E\u9593);
     if (\u9593\u9694 < ENDPOINT_FAN_MIN) continue;
-    const \u4E26\u3073 = list.map((e) => ({ e, \u6DF1\u3055: \u8FBA\u304B\u3089\u96E2\u308C\u305F\u5074\u306E\u4F4D\u7F6E(e, \u6A2A) ?? 0 })).sort((a, b) => a.\u6DF1\u3055 - b.\u6DF1\u3055 || (a.e.id < b.e.id ? -1 : 1));
+    const \u8FBA\u306E\u4E2D\u5FC3 = \u6A2A ? n.cy : n.cx;
+    const \u4E26\u3073 = list.map((e) => {
+      const \u533A\u9593 = extractPathSegments(e.d);
+      const last = \u533A\u9593[\u533A\u9593.length - 1];
+      const \u9577\u3044\u52A9\u8D70 = last === void 0 ? 0 : Math.hypot(last.x2 - last.x1, last.y2 - last.y1);
+      const \u4E2D\u5FC3\u3092\u88DC\u3046 = \u4E2D\u592E\u304C\u585E\u304C\u3063\u3066\u3044\u308B || list.length === 2;
+      const \u6DF1\u3055 = \u8FBA\u304B\u3089\u96E2\u308C\u305F\u5074\u306E\u4F4D\u7F6E(e, \u6A2A) ?? (\u4E2D\u5FC3\u3092\u88DC\u3046 ? \u8FBA\u306E\u4E2D\u5FC3 : 0);
+      return { e, \u9577\u3044\u52A9\u8D70, \u6DF1\u3055 };
+    }).sort((a, b) => a.\u6DF1\u3055 - b.\u6DF1\u3055 || (a.e.id < b.e.id ? -1 : 1));
     const \u4E2D\u5FC3 = (\u4E26\u3073.length - 1) * \u9593\u9694 / 2;
+    let \u8CA0\u5074\u306E\u5E2D = 0;
+    let \u6B63\u5074\u306E\u5E2D = 0;
     for (let k = 0; k < \u4E26\u3073.length; k++) {
-      const d = k * \u9593\u9694 - \u4E2D\u5FC3;
+      const d = \u4E2D\u592E\u304C\u585E\u304C\u3063\u3066\u3044\u308B ? \u4E26\u3073[k].\u6DF1\u3055 < \u8FBA\u306E\u4E2D\u5FC3 ? -(++\u8CA0\u5074\u306E\u5E2D * \u9593\u9694) : ++\u6B63\u5074\u306E\u5E2D * \u9593\u9694 : k * \u9593\u9694 - \u4E2D\u5FC3;
       if (Math.abs(d) < 1e-3) continue;
       const e = \u4E26\u3073[k].e;
-      const \u5DEE\u66FF = \u672B\u5C3E\u3092\u8FBA\u306B\u6CBF\u3063\u3066\u305A\u3089\u3059(e, \u6A2A, d, nodes);
-      if (\u5DEE\u66FF === null) continue;
       const \u524D = e.d;
       const \u524D\u306E\u4EA4\u5DEE = countEdgeCrossings(edges).count;
-      e.d = \u5DEE\u66FF;
-      if (countEdgeCrossings(edges).count > \u524D\u306E\u4EA4\u5DEE) e.d = \u524D;
+      const \u9577\u3044\u52A9\u8D70 = \u4E26\u3073[k].\u9577\u3044\u52A9\u8D70;
+      for (const \u52A9\u8D70 of [\u9577\u3044\u52A9\u8D70, ENDPOINT_FAN_RUNUP]) {
+        e.d = \u524D;
+        const \u5DEE\u66FF = \u672B\u5C3E\u3092\u8FBA\u306B\u6CBF\u3063\u3066\u305A\u3089\u3059(e, \u6A2A, d, \u52A9\u8D70, nodes);
+        if (\u5DEE\u66FF === null) continue;
+        e.d = \u5DEE\u66FF;
+        if (countEdgeCrossings(edges).count <= \u524D\u306E\u4EA4\u5DEE) break;
+        e.d = \u524D;
+      }
     }
   }
 }
@@ -19723,7 +19842,7 @@ function \u8FBA\u304B\u3089\u96E2\u308C\u305F\u5074\u306E\u4F4D\u7F6E(e, \u6A2A)
   }
   return null;
 }
-function \u672B\u5C3E\u3092\u8FBA\u306B\u6CBF\u3063\u3066\u305A\u3089\u3059(e, \u6A2A, d, nodes) {
+function \u672B\u5C3E\u3092\u8FBA\u306B\u6CBF\u3063\u3066\u305A\u3089\u3059(e, \u6A2A, d, \u52A9\u8D70, nodes) {
   if ((e.d.match(/M/g) ?? []).length !== 1) return null;
   const segs = extractPathSegments(e.d);
   if (segs.length === 0) return null;
@@ -19736,7 +19855,8 @@ function \u672B\u5C3E\u3092\u8FBA\u306B\u6CBF\u3063\u3066\u305A\u3089\u3059(e, \
   if (\u9577\u3055 < ENDPOINT_FAN_RUNUP + 1) return null;
   const ux = (last.x1 - last.x2) / \u9577\u3055;
   const uy = (last.y1 - last.y2) / \u9577\u3055;
-  const \u6298\u308C1 = { x: last.x2 + ux * ENDPOINT_FAN_RUNUP, y: last.y2 + uy * ENDPOINT_FAN_RUNUP };
+  const \u4E38\u3081\u305F\u52A9\u8D70 = Math.min(\u52A9\u8D70, \u9577\u3055);
+  const \u6298\u308C1 = { x: last.x2 + ux * \u4E38\u3081\u305F\u52A9\u8D70, y: last.y2 + uy * \u4E38\u3081\u305F\u52A9\u8D70 };
   const \u6298\u308C2 = \u6A2A ? { x: \u6298\u308C1.x, y: \u6298\u308C1.y + d } : { x: \u6298\u308C1.x + d, y: \u6298\u308C1.y };
   const \u7D42\u70B9 = \u6A2A ? { x: last.x2, y: last.y2 + d } : { x: last.x2 + d, y: last.y2 };
   const \u65B0\u533A\u9593 = [
@@ -19758,7 +19878,8 @@ function \u672B\u5C3E\u3092\u8FBA\u306B\u6CBF\u3063\u3066\u305A\u3089\u3059(e, \
     }
     parts.push(`L ${s.x2} ${s.y2}`);
   }
-  parts.push(`L ${round1(\u6298\u308C1.x)} ${round1(\u6298\u308C1.y)}`);
+  const \u6298\u308C1\u306F\u76F4\u524D\u306E\u6298\u308C = Math.abs(\u6298\u308C1.x - last.x1) <= 0.5 && Math.abs(\u6298\u308C1.y - last.y1) <= 0.5;
+  if (!\u6298\u308C1\u306F\u76F4\u524D\u306E\u6298\u308C) parts.push(`L ${round1(\u6298\u308C1.x)} ${round1(\u6298\u308C1.y)}`);
   parts.push(`L ${round1(\u6298\u308C2.x)} ${round1(\u6298\u308C2.y)}`);
   parts.push(`L ${round1(\u7D42\u70B9.x)} ${round1(\u7D42\u70B9.y)}`);
   return parts.join(" ");
@@ -20241,6 +20362,7 @@ function layout(diag) {
     diag.edges.filter((e) => e.posX1 !== void 0 && e.posY1 !== void 0 && e.posX2 !== void 0 && e.posY2 !== void 0).map((e) => e.id)
   );
   bowSharedStraightPaths(edges, nodesFinal, positionedEdgeIds);
+  pullOutgoingFirstCorner(edges, nodesFinal);
   fanIncomingEndpoints(edges, nodesFinal);
   separateSharedStraightRuns(edges, nodesFinal);
   hopEdgeCrossings(edges);
@@ -20282,6 +20404,8 @@ function layout(diag) {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...diag.palette ? { palette: diag.palette } : {},
+    // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
+    ...diag.type ? { type: diag.type } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -29701,6 +29825,7 @@ function CdlStage({
         "data-cdl-stage": "",
         "data-cdl-scale": diagramScale === 1 ? void 0 : diagramScale,
         "data-cdl-palette": laid.palette,
+        "data-cdl-type": laid.type,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
@@ -30370,7 +30495,7 @@ function fitRowsWidth(boxW, rows) {
 }
 function swimlane(preset) {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "swimlane" });
   const labelToId = /* @__PURE__ */ new Map();
   const idsInOrder = [];
   for (const label of preset.lanes) {
@@ -30390,7 +30515,7 @@ function swimlane(preset) {
 }
 function flow(preset) {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flow" });
   b.lane("flow", { width: w, ...preset.laneLabel ? { label: preset.laneLabel } : {} });
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "dotted-flow";
@@ -30451,7 +30576,7 @@ var SEQUENCE_MESSAGE_LOOK = {
 };
 function sequence(preset) {
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
   const \u9762\u3005 = preset.actors.map(
     (a) => typeof a === "string" ? { name: a } : { name: a.name, ...a.subtitle ? { subtitle: a.subtitle } : {} }
   );
@@ -30506,7 +30631,7 @@ function topology(preset) {
   const groupW = preset.groupWidth ?? 460;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "topology" });
   const groupOrder = [];
   const groupStackCount = /* @__PURE__ */ new Map();
   const phaseActivate = [];
@@ -30575,7 +30700,7 @@ function er(preset) {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone = preset.defaultTone ?? "info";
   const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "er" });
   const entities = [];
   const phaseActivate = [];
   let relIdx = 0;
@@ -30661,7 +30786,7 @@ var FSM_ACTION_MARK = {
 function stateMachine(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
   const phaseActivate = [];
   const stateOrder = /* @__PURE__ */ new Map();
   const \u72B6\u614B = [];
@@ -30773,7 +30898,7 @@ function infrastructure(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "infrastructure" });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let connIdx = 0;
@@ -30854,7 +30979,7 @@ function classDiagram(preset) {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   const \u56F3\u306E\u65E2\u5B9A = preset.defaultTone;
   const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "class" });
   const classes = [];
   const phaseActivate = [];
   const \u7BB1 = [];
@@ -30941,7 +31066,7 @@ function classDiagram(preset) {
 function tree(preset) {
   const canvasW = preset.nodeWidth ? preset.nodeWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
   const treeNodes = [];
   const api = {
     node(n) {
@@ -30979,7 +31104,7 @@ function tree(preset) {
 function userJourney(preset) {
   const canvasW = preset.stepWidth ? preset.stepWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "journey" });
   const steps = [];
   const api = {
     step(s) {
@@ -31018,7 +31143,7 @@ function userJourney(preset) {
 function mindMap(preset) {
   const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "mindmap" });
   const branches = [];
   const api = {
     branch(br) {
@@ -31062,7 +31187,7 @@ function mindMap(preset) {
 function funnel(preset) {
   const canvasW = toGridSize(preset.stageWidth ?? 560);
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "funnel" });
   const stages = [];
   const api = {
     stage(s) {
@@ -31100,7 +31225,7 @@ function funnel(preset) {
 function quadrant(preset) {
   const canvasW = 640;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "quadrant" });
   const items = [];
   const api = {
     item(it) {
@@ -31151,7 +31276,7 @@ function chart(preset) {
   const canvasH = toGridSize(
     preset.type === "pie" || preset.type === "gauge" || preset.type === "radial" || preset.type === "stat" || preset.type === "waffle" || preset.type === "stacked-bar" ? 320 : 360
   );
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
   const data = [];
   const kindMap = {
     line: "chart-line",
@@ -31200,7 +31325,7 @@ function gantt(preset) {
   const canvasW = preset.laneWidth ? preset.laneWidth * 2 : 720;
   const canvasH = 360;
   const tone = preset.defaultTone ?? "teal";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "gantt" });
   const tasks = [];
   const api = {
     task(t) {
@@ -31266,7 +31391,7 @@ var SHAPE_EYEBROW = {
 function flowchart(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
   const laneToId = /* @__PURE__ */ new Map();
   const laneStackCount = /* @__PURE__ */ new Map();
   for (const label of preset.lanes) {
@@ -31327,7 +31452,7 @@ var NET_KIND_MAP = {
 function network(preset) {
   const laneW = preset.laneWidth ?? 320;
   const tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "network" });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let edgeIdx = 0;
@@ -31377,7 +31502,7 @@ function stateMachine2(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
   const laneW = boxLaneW(stateW);
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
   const stateOrder = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let transIdx = 0;