@cardenelabs/cdl 0.28.0 → 0.30.0

package/dist/{render-ViWKnlu1.d.cts → render-CabTMeao.d.cts}

@@ -2453,6 +2453,17 @@ type CdlDiagram = {
      * 既定の図にも当たる。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 書かない図は種類を持たない。
+     *
+     * **`cdl` は種類の名前だけを出す**。 名前を `data-cdl-type` として図の根に出すだけで、
+     * 太さや色などの見た目は消費側が決める。 見た目を `cdl` に持たせると、消費側の表現を
+     * 変えるたびに `cdl` の更新が要る。
+     *
+     * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-type]` が
+     * 種類を書いていない図にも当たる。
+     */
+    type?: string;
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2652,6 +2663,8 @@ type LaidDiagram = {
     topic: string;
     /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
     palette?: string;
+    /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
+    type?: string;
     viewBox: {
         x: number;
         y: number;

package/dist/{render-ViWKnlu1.d.ts → render-CabTMeao.d.ts}

@@ -2453,6 +2453,17 @@ type CdlDiagram = {
      * 既定の図にも当たる。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 書かない図は種類を持たない。
+     *
+     * **`cdl` は種類の名前だけを出す**。 名前を `data-cdl-type` として図の根に出すだけで、
+     * 太さや色などの見た目は消費側が決める。 見た目を `cdl` に持たせると、消費側の表現を
+     * 変えるたびに `cdl` の更新が要る。
+     *
+     * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-type]` が
+     * 種類を書いていない図にも当たる。
+     */
+    type?: string;
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2652,6 +2663,8 @@ type LaidDiagram = {
     topic: string;
     /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
     palette?: string;
+    /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
+    type?: string;
     viewBox: {
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/builder.ts

@@ -1642,6 +1642,10 @@ export function diagram(
      * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
+     */
+    type?: string;
   },
 ): DiagramBuilder {
   const lanes: CdlLane[] = [];
@@ -3780,6 +3784,8 @@ export function diagram(
         ...(options.structuredData === "exclude" ? { structuredData: "exclude" as const } : {}),
         // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
         ...(options.palette !== undefined ? { palette: options.palette } : {}),
+        // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
+        ...(options.type !== undefined ? { type: options.type } : {}),
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...(inputs.length > 0 ? { inputs: [...inputs] } : {}),
         ...(formulas.length > 0 ? { formulas: [...formulas] } : {}),

package/src/layout/edges.ts

@@ -2999,12 +2999,110 @@ export function separateSharedStraightRuns(edges: LaidEdge[], nodes: readonly La
   }
 }
 
+/**
+ * 同じ節の同じ辺から出る線のうち、 最長の 1 本を除いて最初の折れを手前へ引く (#651)。
+ *
+ * 起点は `fan-origin-single-point` のため動かさず、 最初の折れ直後の区間を平行移動する。
+ * 1 本しか出ない辺は `detourStub` が決めた箱との中間位置をそのまま保つ。
+ */
+export function pullOutgoingFirstCorner(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+  if (edges.length < 2) return;
+
+  const 束 = new Map<string, LaidEdge[]>();
+  const 同じ組の数 = new Map<string, number>();
+  for (const e of edges) {
+    const key = `${e.from}::${e.fromSide}`;
+    const list = 束.get(key) ?? [];
+    list.push(e);
+    束.set(key, list);
+    const pair = `${e.from}->${e.to}`;
+    同じ組の数.set(pair, (同じ組の数.get(pair) ?? 0) + 1);
+  }
+
+  let 札を旧経路へ追従済み = false;
+  for (const list of 束.values()) {
+    if (list.length < 2) continue;
+    const 並び = list
+      .flatMap((e) => {
+        const pts = pathVertices(e.d);
+        if (!pts || pts.length < 2) return [];
+        return [{ e, pts, 最初の長さ: Math.hypot(pts[1]!.x - pts[0]!.x, pts[1]!.y - pts[0]!.y) }];
+      })
+      .sort((a, b) => b.最初の長さ - a.最初の長さ);
+
+    // 最長の線を引いても共有区間は縮まらないので、 2 本目以降だけを動かす。
+    for (const { e, pts, 最初の長さ } of 並び.slice(1)) {
+      // 同じ 2 節を結ぶ線の分離は `bowSharedStraightPaths` の範囲。 迂回経路は重ねて残す。
+      if ((同じ組の数.get(`${e.from}->${e.to}`) ?? 0) > 1) continue;
+      if (pts.length < 3 || 最初の長さ <= EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER) continue;
+      const 横 = e.fromSide === "left" || e.fromSide === "right";
+      if (!runIsAligned(pts, 0, 横 ? 1 : 0)) continue;
+
+      // 角丸の半径分を折れの位置に足し、起点からの直線部を EDGE_STUB_OUT だけ残す。
+      const 移動量 = 最初の長さ - (EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER);
+      const ux = (pts[1]!.x - pts[0]!.x) / 最初の長さ;
+      const uy = (pts[1]!.y - pts[0]!.y) / 最初の長さ;
+      const 試し = pts.map((p, i) =>
+        i === 1 || i === 2 ? { x: p.x - ux * 移動量, y: p.y - uy * 移動量 } : p,
+      );
+      const 試しD = verticesToPath(試し);
+      const 試し区間 = flattenPathSegments(extractPathSegments(試しD));
+      if (
+        nodes.some(
+          (n) => n.id !== e.from && n.id !== e.to && segmentsCrossRect(試し区間, nodeRect(n)),
+        )
+      ) {
+        continue;
+      }
+
+      const 前 = e.d;
+      const 前の交差 = countEdgeCrossings(edges).count;
+      e.d = 試しD;
+      if (countEdgeCrossings(edges).count > 前の交差) {
+        e.d = 前;
+        continue;
+      }
+      e.d = 前;
+
+      // 旧経路に重なっていた札を先に確定する。 経路を動かした後では重なりが消え、 札だけが
+      // 元の位置に取り残される。
+      if (!札を旧経路へ追従済み) {
+        slideLabelsAlongOwnPath(edges, nodes);
+        札を旧経路へ追従済み = true;
+      }
+      const labelBox = computeLabelBBoxWorld(e);
+      const label = { x: labelBox.x + labelBox.w / 2, y: labelBox.y + labelBox.h / 2 };
+      const 線分までの距離2 = (a: Vertex, b: Vertex): number => {
+        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 動く区間への距離 = 線分までの距離2(pts[1]!, pts[2]!);
+      const labelも動かす = pts
+        .slice(0, -1)
+        .every((p, i) => 線分までの距離2(p, pts[i + 1]!) >= 動く区間への距離 - 1e-6);
+      e.d = 試しD;
+      if (labelも動かす) {
+        e.labelX -= ux * 移動量;
+        e.labelY -= uy * 移動量;
+      }
+    }
+  }
+}
+
 /** 同じ辺に入る線を離す間隔 (world unit)。 箱の行 1 つ分。 */
 const ENDPOINT_FAN_STEP = 56;
 /** これより詰まるなら離さない (world unit)。 離しても線どうしを見分けられない。 */
 const ENDPOINT_FAN_MIN = 20;
-/** 終点の手前で辺に沿って動くために取る助走の長さ (world unit)。 */
+/** ずらすために最後の区間へ要る長さ (world unit)。 これより短い区間は動かさない。 */
 const ENDPOINT_FAN_RUNUP = 40;
+/** これより短い重なりは動かさない (world unit)。 動かすとまっすぐな線に折れが増える。 */
+const MIXED_ROOT_OVERLAP_MIN = 24;
 
 /**
  * 同じ節の同じ辺に **入る** 線の終点を、 辺に沿って離す (#611)。
@@ -3039,6 +3137,26 @@ const ENDPOINT_FAN_RUNUP = 40;
 export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
   if (edges.length < 2) return;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
+  const 平坦な区間 = new Map(edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))] as const));
+
+  const 軸に平行な重なり長さ = (一方: LaidEdge, 他方: LaidEdge): number => {
+    let 合計 = 0;
+    for (const a of 平坦な区間.get(一方.id) ?? []) {
+      const aは水平 = Math.abs(a.y2 - a.y1) <= 1;
+      const aは垂直 = Math.abs(a.x2 - a.x1) <= 1;
+      for (const b of 平坦な区間.get(他方.id) ?? []) {
+        const bは水平 = Math.abs(b.y2 - b.y1) <= 1;
+        const bは垂直 = Math.abs(b.x2 - b.x1) <= 1;
+        if (aは水平 && bは水平 && Math.abs(a.y1 - b.y1) <= 1) {
+          合計 += 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は垂直 && bは垂直 && Math.abs(a.x1 - b.x1) <= 1) {
+          合計 += 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 合計;
+  };
 
   /** 同じ 2 点を結ぶ線の本数。 その組は弓が扱うので、 ここでは触らない。 */
   const 同じ組の数 = new Map<string, number>();
@@ -3046,7 +3164,14 @@ export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode
 
   /** 同じ節の同じ辺に入る線。 */
   const 束 = new Map<string, LaidEdge[]>();
+  const 出る線 = new Map<string, LaidEdge[]>();
   for (const e of edges) {
+    if (nmap.has(e.from)) {
+      const key = `${e.from}::${e.fromSide}`;
+      const list = 出る線.get(key) ?? [];
+      list.push(e);
+      出る線.set(key, list);
+    }
     if (!nmap.has(e.to)) continue;
     // 同じ 2 点を結ぶ線は `bowSharedStraightPaths` が弓で分ける範囲。 `#941` は
     // 「どの幅でも箱に当たるなら分離せず重なりを残す」 と決めており、 末尾で分けると
@@ -3058,36 +3183,62 @@ export function fanIncomingEndpoints(edges: LaidEdge[], nodes: readonly LaidNode
     束.set(key, list);
   }
 
-  for (const [, list] of 束) {
-    if (list.length < 2) continue;
+  for (const [key, list] of 束) {
+    const 中央が塞がっている = (出る線.get(key) ?? []).some((出線) =>
+      list.some((入線) =>
+        !(入線.from === 出線.to && 入線.to === 出線.from)
+        && 軸に平行な重なり長さ(入線, 出線) >= MIXED_ROOT_OVERLAP_MIN
+      )
+    );
+    if (list.length < 2 && !中央が塞がっている) continue;
     const n = nmap.get(list[0]!.to)!;
     const 横 = list[0]!.toSide === "left" || list[0]!.toSide === "right";
     const 辺の長さ = 横 ? n.h : n.w;
     // 4 隅に刺さらない範囲。 `arrow-endpoint-center` が見ているのと同じ余白を空ける。
     const 使える幅 = 辺の長さ - 2 * ARROW_ENDPOINT_CENTER_TOL;
     if (使える幅 <= 0) continue;
-    const 間隔 = Math.min(ENDPOINT_FAN_STEP, 使える幅 / (list.length - 1));
+    const 席の間 = 中央が塞がっている ? list.length : list.length - 1;
+    const 間隔 = Math.min(ENDPOINT_FAN_STEP, 使える幅 / 席の間);
     if (間隔 < ENDPOINT_FAN_MIN) continue;
 
     // 来た高さの順に割り当てる。 上を走ってきた線を上の端点へ入れれば、 束の中で交差しない。
     // 図の並び順で割り当てると、 上を走る線が下の端点へ回って必ず交差する。
+    const 辺の中心 = 横 ? n.cy : n.cx;
     const 並び = list
-      .map((e) => ({ e, 深さ: 辺から離れた側の位置(e, 横) ?? 0 }))
+      .map((e) => {
+        const 区間 = extractPathSegments(e.d);
+        const last = 区間[区間.length - 1];
+        const 長い助走 = last === undefined ? 0 : Math.hypot(last.x2 - last.x1, last.y2 - last.y1);
+        const 中心を補う = 中央が塞がっている || list.length === 2;
+        const 深さ = 辺から離れた側の位置(e, 横) ?? (中心を補う ? 辺の中心 : 0);
+        return { e, 長い助走, 深さ };
+      })
       .sort((a, b) => a.深さ - b.深さ || (a.e.id < b.e.id ? -1 : 1));
 
     const 中心 = ((並び.length - 1) * 間隔) / 2;
+    let 負側の席 = 0;
+    let 正側の席 = 0;
     for (let k = 0; k < 並び.length; k++) {
-      const d = k * 間隔 - 中心;
+      const d = 中央が塞がっている
+        ? 並び[k]!.深さ < 辺の中心
+          ? -(++負側の席 * 間隔)
+          : ++正側の席 * 間隔
+        : k * 間隔 - 中心;
       if (Math.abs(d) < 0.001) continue;
       const e = 並び[k]!.e;
-      const 差替 = 末尾を辺に沿ってずらす(e, 横, d, nodes);
-      if (差替 === null) continue;
       // 交差が増えるなら戻す。 判定は軸と同じ数え方を使う = 独自の数え方は軸と食い違い、
       // 軸が 3 件を数えている状況で 0 件と判定して通してしまった (実測)。
       const 前 = e.d;
       const 前の交差 = countEdgeCrossings(edges).count;
-      e.d = 差替;
-      if (countEdgeCrossings(edges).count > 前の交差) e.d = 前;
+      const 長い助走 = 並び[k]!.長い助走;
+      for (const 助走 of [長い助走, ENDPOINT_FAN_RUNUP]) {
+        e.d = 前;
+        const 差替 = 末尾を辺に沿ってずらす(e, 横, d, 助走, nodes);
+        if (差替 === null) continue;
+        e.d = 差替;
+        if (countEdgeCrossings(edges).count <= 前の交差) break;
+        e.d = 前;
+      }
     }
   }
 }
@@ -3121,6 +3272,7 @@ function 末尾を辺に沿ってずらす(
   e: LaidEdge,
   横: boolean,
   d: number,
+  助走: number,
   nodes: readonly LaidNode[],
 ): string | null {
   if ((e.d.match(/M/g) ?? []).length !== 1) return null;
@@ -3139,10 +3291,11 @@ function 末尾を辺に沿ってずらす(
   const 長さ = Math.hypot(last.x2 - last.x1, last.y2 - last.y1);
   if (長さ < ENDPOINT_FAN_RUNUP + 1) return null;
 
-  // 助走を始める点。 終点から辺の外へ `ENDPOINT_FAN_RUNUP` 戻る。
+  // 助走が最後の区間を越えると、 書き戻した直前の折れから短く戻る区間ができる。
   const ux = (last.x1 - last.x2) / 長さ;
   const uy = (last.y1 - last.y2) / 長さ;
-  const 折れ1 = { x: last.x2 + ux * ENDPOINT_FAN_RUNUP, y: last.y2 + uy * ENDPOINT_FAN_RUNUP };
+  const 丸めた助走 = Math.min(助走, 長さ);
+  const 折れ1 = { x: last.x2 + ux * 丸めた助走, y: last.y2 + uy * 丸めた助走 };
   const 折れ2 = 横 ? { x: 折れ1.x, y: 折れ1.y + d } : { x: 折れ1.x + d, y: 折れ1.y };
   const 終点 = 横 ? { x: last.x2, y: last.y2 + d } : { x: last.x2 + d, y: last.y2 };
 
@@ -3169,7 +3322,8 @@ function 末尾を辺に沿ってずらす(
     parts.push(`L ${s.x2} ${s.y2}`);
   }
   // 助走の折れは丸めない。 短い 2 折れなので、 丸めると切り口が区間からはみ出す。
-  parts.push(`L ${round1(折れ1.x)} ${round1(折れ1.y)}`);
+  const 折れ1は直前の折れ = Math.abs(折れ1.x - last.x1) <= 0.5 && Math.abs(折れ1.y - last.y1) <= 0.5;
+  if (!折れ1は直前の折れ) parts.push(`L ${round1(折れ1.x)} ${round1(折れ1.y)}`);
   parts.push(`L ${round1(折れ2.x)} ${round1(折れ2.y)}`);
   parts.push(`L ${round1(終点.x)} ${round1(終点.y)}`);
   return parts.join(" ");

package/src/layout.ts

@@ -15,6 +15,7 @@ import {
   fanIncomingEndpoints,
   hopEdgeCrossings,
   layoutEdges,
+  pullOutgoingFirstCorner,
   repositionParallelLabels,
   separateSharedStraightRuns,
   slideLabelsAlongOwnPath,
@@ -346,6 +347,9 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   // 弧が確定してから、 同じ節の組を結ぶ辺の label を「兄弟の線を跨がない位置」 へ置き直す (#376)。
   // 順序が逆だと、 直線を前提に置いた label を弧が貫く。 label を先に線から離すと、 今度は弧を
   // 膨らませる判定が label を障害物と見なして弧が消える。
+  // 同じ辺から出る線は、 最長の 1 本を除いて最初の直線部を 40 world まで引く (#651)。
+  // 経路の引き方を変えず、 確定後の最初の折れだけを動かす。
+  pullOutgoingFirstCorner(edges, nodesFinal);
   // 同じ辺に入る線の終点を辺に沿って離す (#611)。 経路を引き終えてから当てる = 終点を先に
   // 動かすと引き方の分岐が変わり、 迂回していた線が箱を貫通する (実測で 0 件が 7 件になった)。
   fanIncomingEndpoints(edges, nodesFinal);
@@ -403,6 +407,8 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...(diag.palette ? { palette: diag.palette } : {}),
+    // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
+    ...(diag.type ? { type: diag.type } : {}),
     bboxes,
     collisions,
     nearCollisions,

package/src/presets.ts

@@ -217,7 +217,7 @@ export type SwimlaneResult = DiagramBuilder & {
 
 export function swimlane(preset: SwimlanePreset): SwimlaneResult {
   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 = new Map<string, string>();
   const idsInOrder: string[] = [];
   for (const label of preset.lanes) {
@@ -297,7 +297,7 @@ export type FlowBuilder = {
  */
 export function flow(preset: FlowPreset): FlowBuilder {
   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: Tone = preset.defaultTone ?? "accent";
   const style: EdgeStyle = preset.defaultStyle ?? "dotted-flow";
@@ -451,7 +451,7 @@ export type SequenceBuilder = {
  */
 export function sequence(preset: SequencePreset): SequenceBuilder {
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
 
   // 名前だけの文字列と、呼び名を添えた物の両方を受ける (#578)
   const 面々: SequenceBoardActor[] = preset.actors.map((a) =>
@@ -591,7 +591,7 @@ export function topology(preset: TopologyPreset): TopologyBuilder {
   const groupW = preset.groupWidth ?? 460;
   const tone: Tone = preset.defaultTone ?? "accent";
   const style: EdgeStyle = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "topology" });
 
   const groupOrder: string[] = [];
   const groupStackCount = new Map<string, number>();
@@ -803,7 +803,7 @@ export function er(preset: ErPreset): ErBuilder {
   const tone: Tone = preset.defaultTone ?? "info";
   const 縞を敷く = preset.rowStripe ?? true;
   // 配色の名前は素通しする。 空文字の遮断は `diagram` が持つ = ここで重ねると到達しない分岐になる
-  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: string[] = [];
   const phaseActivate: string[] = [];
@@ -1030,7 +1030,7 @@ export type StateMachineBuilder = {
 export function stateMachine(preset: StateMachinePreset): StateMachineBuilder {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
 
   const phaseActivate: string[] = [];
   const stateOrder = new Map<string, number>();
@@ -1236,7 +1236,7 @@ export function infrastructure(preset: InfrastructurePreset): InfrastructureBuil
   const laneW = preset.laneWidth ?? 380;
   const tone: Tone = preset.defaultTone ?? "accent";
   const style: EdgeStyle = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "infrastructure" });
 
   // col → laneId、 col の数で lane を auto 作成
   const colLaneIds = new Map<number, string>();
@@ -1498,7 +1498,7 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
   const 図の既定 = preset.defaultTone;
   // 縞と配色は `er()` と同じ扱い (#627)。 箱の作りが同じなので、既定も揃える
   const 縞を敷く = 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: string[] = [];
   const phaseActivate: string[] = [];
@@ -1640,7 +1640,7 @@ export type TreeBuilder = {
 export function tree(preset: TreePreset): TreeBuilder {
   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: TreeNode[] = [];
 
   const api: TreeBuilder = {
@@ -1722,7 +1722,7 @@ export type UserJourneyBuilder = {
 export function userJourney(preset: UserJourneyPreset): UserJourneyBuilder {
   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: JourneyStep[] = [];
 
   const api: UserJourneyBuilder = {
@@ -1805,7 +1805,7 @@ export type MindMapBuilder = {
 export function mindMap(preset: MindMapPreset): MindMapBuilder {
   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: MindBranch[] = [];
 
   const api: MindMapBuilder = {
@@ -1887,7 +1887,7 @@ export type FunnelBuilder = {
 export function funnel(preset: FunnelPreset): FunnelBuilder {
   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: FunnelStage[] = [];
 
   const api: FunnelBuilder = {
@@ -1974,7 +1974,7 @@ export type QuadrantBuilder = {
 export function quadrant(preset: QuadrantPreset): QuadrantBuilder {
   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: QuadrantItem[] = [];
 
   const api: QuadrantBuilder = {
@@ -2088,7 +2088,7 @@ export function chart(preset: ChartPreset): ChartBuilder {
       ? 320
       : 360,
   );
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
   const data: ChartDatum[] = [];
 
   const kindMap = {
@@ -2199,7 +2199,7 @@ export function gantt(preset: GanttPreset): GanttBuilder {
   const canvasW = preset.laneWidth ? preset.laneWidth * 2 : 720;
   const canvasH = 360;
   const tone: Tone = preset.defaultTone ?? "teal";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "gantt" });
   const tasks: GanttTask[] = [];
 
   const api: GanttBuilder = {
@@ -2326,7 +2326,7 @@ const SHAPE_EYEBROW: Record<FlowchartNodeShape, string> = {
 export function flowchart(preset: FlowchartPreset): FlowchartBuilder {
   const laneW = preset.laneWidth ?? 380;
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
 
   const laneToId = new Map<string, string>();
   const laneStackCount = new Map<string, number>();
@@ -2443,7 +2443,7 @@ const NET_KIND_MAP: Record<NetworkDeviceKind, NodeKind> = {
 export function network(preset: NetworkPreset): NetworkBuilder {
   const laneW = preset.laneWidth ?? 320;
   const tone: Tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "network" });
 
   const colLaneIds = new Map<number, string>();
   const phaseActivate: string[] = [];
@@ -2560,7 +2560,7 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
   const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
   const laneW = boxLaneW(stateW);
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
 
   const stateOrder = new Map<string, number>();
   const phaseActivate: string[] = [];

package/src/render/stage.tsx

@@ -151,6 +151,7 @@ export function CdlStage({
         // 通るため、空文字は `layout` が既に落としている。 ここにも守りを置くと、
         // どの入力でも通らない分岐が残る
         data-cdl-palette={laid.palette}
+        data-cdl-type={laid.type}
       >
         <defs>
           {/* CAR-643 = cdl は geometry only。 shadow / border effect の filter は cdl SVG 内に

package/src/types.ts

@@ -2528,6 +2528,17 @@ export type CdlDiagram = {
    * 既定の図にも当たる。
    */
   palette?: string;
+  /**
+   * この図がどの種類か (#645)。 書かない図は種類を持たない。
+   *
+   * **`cdl` は種類の名前だけを出す**。 名前を `data-cdl-type` として図の根に出すだけで、
+   * 太さや色などの見た目は消費側が決める。 見た目を `cdl` に持たせると、消費側の表現を
+   * 変えるたびに `cdl` の更新が要る。
+   *
+   * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-type]` が
+   * 種類を書いていない図にも当たる。
+   */
+  type?: string;
   /**
    * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
    *
@@ -2734,6 +2745,8 @@ export type LaidDiagram = {
   topic: string;
   /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
   palette?: string;
+  /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
+  type?: string;
   viewBox: { x: number; y: number; w: number; h: number };
   /**
    * 図全体の倍率 (`CdlViewport.scale` を正規化した値)。