@cardenelabs/cdl 0.122.0 → 0.123.0

package/src/layout.ts

@@ -1,5 +1,6 @@
 import type { CdlDiagram, LaidDiagram } from "./types";
 import { resolveLang } from "./lang";
+import { resolveTextMetrics } from "./text-metrics";
 import {
   CLEARANCE_LABEL_LABEL,
   CLEARANCE_NODE_LABEL,
@@ -219,6 +220,7 @@ export function applyRowLevelNodeShifts<
  * - viewBox は cdl が auto 計算 (右端 +80 / 下端 +80)
  */
 export function layout(diag: CdlDiagram): LaidDiagram {
+  const textMetrics = resolveTextMetrics(diag.textMetrics);
   const lanes = layoutLanes(diag);
   // 下端の名札で絵が箱の上へ出る種別は、 ここで **座標ごと** 下げる (#478)。 以降の全ての
   // 処理 (lane の伸長 / 衝突の解消 / 矢印の経路 / 外接矩形 / 図の下端) が動かした後の位置を
@@ -226,12 +228,17 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   //
   // 描画側で `<g transform>` を掛ける形だった頃は、 箱ごと下へ動いて見えるのに `cy` も
   // `data-cdl-cy` も外接矩形も元のままで、 座標を読む側が実際の位置を知らなかった。
-  const rawNodes = applyFooterShapeDrops(lanes, layoutNodes(diag, lanes));
+  const rawNodes = applyFooterShapeDrops(lanes, layoutNodes(diag, lanes, textMetrics));
   const expandedLanes = expandLanesForNodes(lanes, rawNodes);
   // CAR-470 SSOT ... 隣接 lane 対を跨ぐ edge label の収納幅を engine 側で先手確保。
   // 拡張後、 後続 lane は cumulative shift で連鎖 shift される。 lane.width は
   // `expandLanesForNodes` 後の値のまま (node 収納 phase と gap 拡張 phase を分離)。
-  const gapExpandedLanes = expandLaneGapsForEdgeLabels(expandedLanes, rawNodes, diag.edges);
+  const gapExpandedLanes = expandLaneGapsForEdgeLabels(
+    expandedLanes,
+    rawNodes,
+    diag.edges,
+    textMetrics,
+  );
   const nodes = rawNodes.map((n) => {
     // posX / posY を明示した node は「user が固定した絶対座標」 なので lane 中心に引き戻さない。
     //
@@ -248,16 +255,18 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     return { ...n, cx: newLane.x + newLane.width / 2 };
   });
   const containedLanesPre = recomputeContainedLanes(gapExpandedLanes, nodes);
-  const edgesPre = layoutEdges(diag, nodes, containedLanesPre);
+  const edgesPre = layoutEdges(diag, nodes, containedLanesPre, textMetrics);
 
   // 衝突 → 自動再配置 (同 kind=node 同士のみ、 sequence preset の lifeline 等は据え置き)。
   // node の cy を shift した後は lane の contain bbox と edge routing も再計算が必要。
-  const bboxesPre = collectBBoxes(containedLanesPre, nodes, edgesPre);
+  const bboxesPre = collectBBoxes(containedLanesPre, nodes, edgesPre, textMetrics);
   const collisionsPre = detectCollisions(bboxesPre, edgesPre);
   const nodesResolved = resolveOverlaps(nodes, collisionsPre);
   const moved = nodesResolved !== nodes;
   const containedLanes = moved ? recomputeContainedLanes(gapExpandedLanes, nodesResolved) : containedLanesPre;
-  const edgesAfterMove = moved ? layoutEdges(diag, nodesResolved, containedLanes) : edgesPre;
+  const edgesAfterMove = moved
+    ? layoutEdges(diag, nodesResolved, containedLanes, textMetrics)
+    : edgesPre;
 
   // post-pass (CAR-430 = SSOT 一本化) ... edges.ts routePath() が返す init 位置を SSOT とし、
   // label 重複が生じた場合のみ chain 伝搬 shift (resolveEdgeLabelOverlapsWithChain) で解消。
@@ -293,10 +302,13 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   } else {
     const propagateResult = resolveEdgeLabelOverlapsWithChainAndPropagate(
       edgesAfterMove,
-      collectBBoxes(containedLanes, nodesResolved, []).filter(
+      collectBBoxes(containedLanes, nodesResolved, [], textMetrics).filter(
         (b) => b.kind === "node" || b.kind === "lane-label",
       ),
       chainShiftClearance,
+      undefined,
+      undefined,
+      textMetrics,
     );
     edges = propagateResult.edges;
     // node / lane-label chain 伝搬 shift を反映 (CAR-482)。
@@ -335,7 +347,7 @@ export function layout(diag: CdlDiagram): LaidDiagram {
       // 浮遊)、 label overlap は engine が最終段階で警告可能。 今後 label shift を再度保存する
       // 必要が生じたら labelX/labelY を propagateResult 側から edgePathShifts と同 map に保存し、
       // 再実行後の edges に merge する二段階 approach を検討する。
-      edges = layoutEdges(diag, nodesFinal, containedLanesFinal);
+      edges = layoutEdges(diag, nodesFinal, containedLanesFinal, textMetrics);
     }
   }
 
@@ -352,13 +364,13 @@ export function layout(diag: CdlDiagram): LaidDiagram {
       )
       .map((e) => e.id),
   );
-  bowSharedStraightPaths(edges, nodesFinal, positionedEdgeIds);
+  bowSharedStraightPaths(edges, nodesFinal, positionedEdgeIds, textMetrics);
   // 弧が確定してから、 同じ節の組を結ぶ辺の label を「兄弟の線を跨がない位置」 へ置き直す (#376)。
   // 順序が逆だと、 直線を前提に置いた label を弧が貫く。 label を先に線から離すと、 今度は弧を
   // 膨らませる判定が label を障害物と見なして弧が消える。
   // 同じ辺から出る線は、 最長の 1 本を除いて最初の直線部を 40 world まで引く (#651)。
   // 経路の引き方を変えず、 確定後の最初の折れだけを動かす。
-  pullOutgoingFirstCorner(edges, nodesFinal);
+  pullOutgoingFirstCorner(edges, nodesFinal, textMetrics);
   // 同じ辺に入る線の終点を辺に沿って離す (#611)。 経路を引き終えてから当てる = 終点を先に
   // 動かすと引き方の分岐が変わり、 迂回していた線が箱を貫通する (実測で 0 件が 7 件になった)。
   const fannedTailShifts = fanIncomingEndpoints(edges, nodesFinal);
@@ -375,25 +387,35 @@ export function layout(diag: CdlDiagram): LaidDiagram {
   // 先に見ると、 その後に経路が動いて札が線を覆う形が戻る。
   // 追従と最後の逃がし pass は、 `collectBBoxes` が含める下端の名札の箱上へのはみ出しと
   // 縦列の題を同じ矩形で測る。 追従だけ箱本体で測ると、 置いた札を最後の pass が押し直す (#1002)。
-  const labelClearanceObstacles = collectBBoxes(containedLanesFinal, nodesFinal, []).filter(
+  const labelClearanceObstacles = collectBBoxes(
+    containedLanesFinal,
+    nodesFinal,
+    [],
+    textMetrics,
+  ).filter(
     (b) => b.kind === "node" || b.kind === "lane-label",
   );
-  followLabelsToFannedTails(edges, labelClearanceObstacles, fannedTailShifts);
-  repositionParallelLabels(edges, nodesFinal);
+  followLabelsToFannedTails(edges, labelClearanceObstacles, fannedTailShifts, textMetrics);
+  repositionParallelLabels(edges, nodesFinal, textMetrics);
   // 縦にずらすだけでは逃げ場が無い札を、 自分の線に沿って動かす (#601)。 ここまでの
   // 置き直しは全て縦方向で、 線に沿って動かす経路が無かった。 いま被っている札だけを
   // 対象にするので、 落ち着いている図の座標は動かない。
-  slideLabelsAlongOwnPath(edges, nodesFinal);
+  slideLabelsAlongOwnPath(edges, nodesFinal, textMetrics);
   // 経路を動かす pass が全て終わってから、 札を箱と札から離し直す (#659)。
   //
   // 上の chain 伝搬はここより前に走るため、 その後の経路 pass が動かした最終経路との隙間を
   // ここで見直す。
   // ここで動かすのは札だけで、 箱も経路も触らない = 触ると直前の pass が確定させた形を崩す。
   if (!isChainEdgeLabelDisabled()) {
-    edges = resolveLabelClearanceAfterPathPasses(edges, labelClearanceObstacles);
+    edges = resolveLabelClearanceAfterPathPasses(
+      edges,
+      labelClearanceObstacles,
+      undefined,
+      textMetrics,
+    );
   }
 
-  const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges);
+  const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges, textMetrics);
   const collisions = detectCollisions(bboxes, edges);
   const nearCollisions = detectNearCollisions(bboxes, edges);
 
@@ -436,6 +458,8 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     // 描画側の固定の字の言語 (#847)。 既定 (`en`) と型の外の値は持たせない = 配置の結果の形を
     // 変更前と揃え、記法の書き損じで一部の字だけ日本語になる形を作らない
     ...(resolveLang(diag.lang) === "ja" ? { lang: "ja" as const } : {}),
+    // 既定は持ち越さない。既存の LaidDiagram の形を変えず、等幅の図だけ描画へ伝える
+    ...(textMetrics === "monospace" ? { textMetrics: "monospace" as const } : {}),
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...(diag.type ? { type: diag.type } : {}),
     bboxes,

package/src/presets.ts

@@ -1,5 +1,6 @@
 import { diagram } from "./builder";
 import type { DiagramBuilder } from "./builder";
+import { resolveTextMetrics } from "./text-metrics";
 import { LANE_PAD_MIN, NODE_SIZE } from "./layout/tokens";
 import { requiredRowsWidth } from "./kinds/row-align";
 import { 木の札の幅 } from "./kinds/tree";
@@ -12,7 +13,12 @@ import {
   type SequenceBoardMessage,
   type SequenceBoardMessageKind,
 } from "./kinds/sequence-board-metrics";
-import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber, EdgeRole } from "./types";
+import type { CdlTextMetrics, NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, RowMark, JourneyEmotion, QuadrantKey, BoundNumber, EdgeRole } from "./types";
+
+type TextMetricsPreset = {
+  /** 図の字幅を測る規則。省略時は `"proportional"` */
+  textMetrics?: CdlTextMetrics;
+};
 
 /**
  * 状態を読む書き方 (`{名前}`)。
@@ -175,10 +181,14 @@ function resolveStorageBoxW(width: number | undefined, presetName: string, optio
  * 指定値は下限として扱う。 「指定した幅より狭くならない」 は守り、 中身が入らない時だけ広げる。
  * 例外にしない理由は、 著者が行の実寸を事前に計算できないため (font の送り幅に依存する)。
  */
-function fitRowsWidth(boxW: number, rows: readonly string[] | undefined): number {
+function fitRowsWidth(
+  boxW: number,
+  rows: readonly string[] | undefined,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   // 呼出は `er` の実体と `classDiagram` のクラスの 2 箇所で、 どちらも `kind: "storage"` を作る。
   // 送り幅と列間は種別で違うため、 どの種別として測るかを渡す
-  return Math.max(boxW, requiredRowsWidth(rows ? [...rows] : undefined, "storage"));
+  return Math.max(boxW, requiredRowsWidth(rows ? [...rows] : undefined, "storage", textMetrics));
 }
 
 /**
@@ -190,7 +200,7 @@ function fitRowsWidth(boxW: number, rows: readonly string[] | undefined): number
 
 // ─── swimlane ──────────────────────────────────────────────────
 
-export type SwimlanePreset = {
+export type SwimlanePreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** lane label の配列。 各 lane width は固定 (default 400)、 x は auto-layout */
@@ -218,7 +228,7 @@ export type SwimlaneResult = DiagramBuilder & {
 
 export function swimlane(preset: SwimlanePreset): SwimlaneResult {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic, type: "swimlane" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "swimlane" });
   const labelToId = new Map<string, string>();
   const idsInOrder: string[] = [];
   for (const label of preset.lanes) {
@@ -247,7 +257,7 @@ export type FlowStepInput = {
   subtitle?: string;
 };
 
-export type FlowPreset = {
+export type FlowPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** lane label (1 本のみ、 全 step が縦 stack で並ぶ) */
@@ -298,7 +308,7 @@ export type FlowBuilder = {
  */
 export function flow(preset: FlowPreset): FlowBuilder {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic, type: "flow" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, 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";
@@ -410,7 +420,7 @@ export type SequenceActor = {
   subtitle?: string;
 };
 
-export type SequencePreset = {
+export type SequencePreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** actor label の配列 (lifeline、 column 単位)。 呼び名を添えるなら物で書く (#578) */
@@ -452,7 +462,7 @@ export type SequenceBuilder = {
  */
 export function sequence(preset: SequencePreset): SequenceBuilder {
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "sequence" });
 
   // 名前だけの文字列と、呼び名を添えた物の両方を受ける (#578)
   const 面々: SequenceBoardActor[] = preset.actors.map((a) =>
@@ -501,7 +511,7 @@ export function sequence(preset: SequencePreset): SequenceBuilder {
             .filter((x): x is SequenceBoardBand => x !== null);
 
       const data: SequenceBoardData = { actors: 面々, messages: 言づて, bands: 帯 };
-      const m = sequenceBoardMetrics(data);
+      const m = sequenceBoardMetrics(data, resolveTextMetrics(preset.textMetrics));
       const laneId = "seq";
       b.lane(laneId, { width: m.w + LANE_PAD_MIN * 2 });
       b.node(preset.id, {
@@ -548,7 +558,7 @@ export type TopologyConnection = {
   labelOffsetY?: number;
 };
 
-export type TopologyPreset = {
+export type TopologyPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** group の lane width (default 360) */
@@ -592,7 +602,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, type: "topology" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "topology" });
 
   const groupOrder: string[] = [];
   const groupStackCount = new Map<string, number>();
@@ -752,7 +762,7 @@ export type ErRelation = {
   style?: EdgeStyle;
 };
 
-export type ErPreset = {
+export type ErPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   defaultTone?: Tone;
@@ -804,7 +814,12 @@ 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, type: "er" });
+  const b = diagram(preset.id, {
+    topic: preset.topic,
+    palette: preset.palette,
+    textMetrics: preset.textMetrics,
+    type: "er",
+  });
 
   const entities: string[] = [];
   const phaseActivate: string[] = [];
@@ -834,7 +849,7 @@ export function er(preset: ErPreset): ErBuilder {
       const rows = 設計の形 ? 行 : (e.rows ?? []);
       // 帯は実体ごとに決める。 行の長さで箱が広がる実体があるため、 全実体を同じ帯幅で
       // 宣言すると宣言座標と実座標がずれる。
-      const boxW = fitRowsWidth(entityW, rows);
+      const boxW = fitRowsWidth(entityW, rows, resolveTextMetrics(preset.textMetrics));
       b.lane(laneId, { width: boxLaneW(boxW) });
       b.node(e.id, {
         lane: laneId,
@@ -986,7 +1001,7 @@ export type FsmTransition = {
   head?: EdgeHead;
 };
 
-export type StateMachinePreset = {
+export type StateMachinePreset = TextMetricsPreset & {
   id: string;
   topic: string;
   defaultTone?: Tone;
@@ -1033,7 +1048,7 @@ export function stateMachine(preset: StateMachinePreset): StateMachineBuilder {
   const tone: Tone = preset.defaultTone ?? "accent";
   // 図の型と最後の段の札は同じ綴り (#859)。 札を別の字にすると、消費側が型の一覧で引けない
   const diagramType = "state";
-  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: diagramType });
 
   const phaseActivate: string[] = [];
   const stateOrder = new Map<string, number>();
@@ -1078,7 +1093,9 @@ export function stateMachine(preset: StateMachinePreset): StateMachineBuilder {
         const 行 = (s.actions ?? []).map((a) => (a.note ? `${a.label}: ${a.note}` : a.label));
         const 印 = (s.actions ?? []).map((a) => FSM_ACTION_MARK[a.when]);
         const laneId = 格子 && s.col !== undefined ? `col-${s.col}` : `lane-${s.id}`;
-        const boxW = 設計の形 ? fitRowsWidth(stateW, 行) : stateW;
+        const boxW = 設計の形
+          ? fitRowsWidth(stateW, 行, resolveTextMetrics(preset.textMetrics))
+          : stateW;
         return { s, 行, 印, laneId, boxW, stack: 格子 ? (s.row ?? 0) : 0 };
       });
       const 節点の中身 = 節点.map((m) => ({
@@ -1201,7 +1218,7 @@ export type InfraConnection = {
   labelOffsetY?: number;
 };
 
-export type InfrastructurePreset = {
+export type InfrastructurePreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** col あたりの lane width (default 380) */
@@ -1239,7 +1256,11 @@ 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, type: "infrastructure" });
+  const b = diagram(preset.id, {
+    topic: preset.topic,
+    textMetrics: preset.textMetrics,
+    type: "infrastructure",
+  });
 
   // col → laneId、 col の数で lane を auto 作成
   const colLaneIds = new Map<number, string>();
@@ -1452,7 +1473,7 @@ export type UmlRelation = {
   style?: EdgeStyle;
 };
 
-export type ClassDiagramPreset = {
+export type ClassDiagramPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   defaultTone?: Tone;
@@ -1503,7 +1524,12 @@ 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, type: "class" });
+  const b = diagram(preset.id, {
+    topic: preset.topic,
+    palette: preset.palette,
+    textMetrics: preset.textMetrics,
+    type: "class",
+  });
 
   const classes: string[] = [];
   const phaseActivate: string[] = [];
@@ -1537,7 +1563,7 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
         }
         // 帯はクラスごとに決める。 行の長さで箱が広がるクラスがあるため、 全クラスを同じ帯幅で
         // 宣言すると宣言座標と実座標がずれる。
-        const boxW = fitRowsWidth(classW, rows);
+        const boxW = fitRowsWidth(classW, rows, resolveTextMetrics(preset.textMetrics));
         // 格子に置くかは `col` を書いたかで決める (#578)。 書かない図は従来どおり横 1 列
         const laneId = c.col !== undefined ? `col-${c.col}` : `lane-${c.id}`;
         return { c, rows, rowMarks, boxW, laneId, stack: c.col !== undefined ? (c.row ?? 0) : 0 };
@@ -1619,7 +1645,7 @@ export type TreeNode = {
   subtitle?: string;
 };
 
-export type TreePreset = {
+export type TreePreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
@@ -1649,7 +1675,7 @@ export type TreeBuilder = {
  */
 export function tree(preset: TreePreset): TreeBuilder {
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "tree" });
   const treeNodes: TreeNode[] = [];
 
   const api: TreeBuilder = {
@@ -1708,7 +1734,7 @@ export type JourneyStep = {
   opportunity?: string;
 };
 
-export type UserJourneyPreset = {
+export type UserJourneyPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
@@ -1737,7 +1763,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, type: "journey" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "journey" });
   const steps: JourneyStep[] = [];
 
   const api: UserJourneyBuilder = {
@@ -1788,7 +1814,7 @@ export type MindBranch = {
   subtitle?: string;
 };
 
-export type MindMapPreset = {
+export type MindMapPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
@@ -1825,7 +1851,7 @@ export function mindMap(preset: MindMapPreset): MindMapBuilder {
   // 型は他の組み立て関数と同じく短い名前 (`state` / `class` / `journey` と並ぶ `mind`)。
   // 最後の段の札も同じ綴り (#859)
   const diagramType = "mind";
-  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: diagramType });
   const branches: MindBranch[] = [];
 
   const api: MindMapBuilder = {
@@ -1880,7 +1906,7 @@ export type FunnelStage = {
   subtitle?: string;
 };
 
-export type FunnelPreset = {
+export type FunnelPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
@@ -1909,7 +1935,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, type: "funnel" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "funnel" });
   const stages: FunnelStage[] = [];
 
   const api: FunnelBuilder = {
@@ -1961,7 +1987,7 @@ export type QuadrantItem = {
   subtitle?: string;
 };
 
-export type QuadrantPreset = {
+export type QuadrantPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
@@ -1998,7 +2024,7 @@ export type QuadrantBuilder = {
 export function quadrant(preset: QuadrantPreset): QuadrantBuilder {
   const canvasW = 640;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "quadrant" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "quadrant" });
   const items: QuadrantItem[] = [];
 
   const api: QuadrantBuilder = {
@@ -2071,7 +2097,7 @@ export type ChartDatum = {
   tone?: Tone;
 };
 
-export type ChartPreset = {
+export type ChartPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
@@ -2115,7 +2141,7 @@ export function chart(preset: ChartPreset): ChartBuilder {
       ? 320
       : 360,
   );
-  const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "chart" });
   const data: ChartDatum[] = [];
 
   const kindMap = {
@@ -2186,7 +2212,7 @@ export type GanttTask = {
   dependsOn?: string;
 };
 
-export type GanttPreset = {
+export type GanttPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
@@ -2229,7 +2255,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, type: "gantt" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "gantt" });
   const tasks: GanttTask[] = [];
 
   const api: GanttBuilder = {
@@ -2319,7 +2345,7 @@ export type FlowchartEdge = {
  */
 export type FlowchartDirection = "horizontal" | "vertical";
 
-export type FlowchartPreset = {
+export type FlowchartPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   /** swimlane の lane (role) ラベル */
@@ -2378,7 +2404,7 @@ export function flowchart(preset: FlowchartPreset): FlowchartBuilder {
   const laneW = preset.laneWidth ?? 380;
   const tone: Tone = preset.defaultTone ?? "accent";
   const 縦に積む = (preset.direction ?? "horizontal") === "vertical";
-  const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "flowchart" });
 
   const laneToId = new Map<string, string>();
   const laneStackCount = new Map<string, number>();
@@ -2488,7 +2514,7 @@ export type NetworkLink = {
   tone?: Tone;
 };
 
-export type NetworkPreset = {
+export type NetworkPreset = TextMetricsPreset & {
   id: string;
   topic: string;
   defaultTone?: Tone;
@@ -2534,7 +2560,7 @@ const NET_KIND_LABEL: Record<NetworkDeviceKind, string> = {
 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, type: "network" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "network" });
 
   const colLaneIds = new Map<number, string>();
   const phaseActivate: string[] = [];
@@ -2609,7 +2635,7 @@ export type FsmTransitionExt = {
   tone?: Tone;
 };
 
-export type StateMachine2Preset = {
+export type StateMachine2Preset = TextMetricsPreset & {
   id: string;
   topic: string;
   defaultTone?: Tone;
@@ -2653,7 +2679,7 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
   const tone: Tone = preset.defaultTone ?? "accent";
   // 入れ子を持つ状態の図も型は `state`。 最後の段の札も同じ綴りで、1 つ目の図との見分けは題が持つ (#859)
   const diagramType = "state";
-  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: diagramType });
 
   const stateOrder = new Map<string, number>();
   const phaseActivate: string[] = [];

package/src/render/edges.tsx

@@ -2,7 +2,13 @@ import { 等幅の字 } from "./mono-text";
 import type { JSX } from "react";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { 端の字の大きさ, 端の字を置く, type 線の端 } from "../layout/head-label";
-import { EDGE_HEAD_MARKER_SIZE, type EdgeRole, type LaidEdge, type Tone } from "../types";
+import {
+  EDGE_HEAD_MARKER_SIZE,
+  type CdlTextMetrics,
+  type EdgeRole,
+  type LaidEdge,
+  type Tone,
+} from "../types";
 import { edgeHeadMarkerName } from "./edge-head";
 import { toneColor } from "./tone";
 
@@ -131,6 +137,7 @@ export function CdlEdgeView({
       data-cdl-edge-label={edge.label}
       data-cdl-edge-sub={edge.sub ?? ""}
       data-cdl-tone={edge.tone}
+      data-cdl-edge-role={edge.role}
     >
       {isDotted ? (
         <g>
@@ -349,9 +356,11 @@ export function CdlEdgeGlowView({
 export function CdlEdgeLabelView({
   edge,
   active,
+  textMetrics = "proportional",
 }: {
   edge: LaidEdge;
   active: boolean;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element | null {
   // routing v9 = 空 label / 空 sub の edge は DOM 描画自体を skip、
   // collisions.ts 側 (bbox 生成 skip、 CAR-430 で SSOT 統一) と対称に render 層でも noop。
@@ -363,7 +372,7 @@ export function CdlEdgeLabelView({
   // bbox 計算 drift を解消)。 pill h / w / padding / boxLeftX / boxTopY は本 helper 経由で取得、
   // <g transform="translate(labelX, labelY)"> 内 rect は相対座標なので world x/y を helper から
   // 引き算して rect x/y に渡す。
-  const bbox = computeLabelBBoxWorld(edge);
+  const bbox = computeLabelBBoxWorld(edge, textMetrics);
   const boxW = bbox.w;
   const boxH = bbox.h;
   const boxLeftX = bbox.x - edge.labelX;
@@ -383,6 +392,8 @@ export function CdlEdgeLabelView({
       data-cdl-edge-label-for={edge.id}
       data-cdl-edge-label-text={edge.label}
       data-cdl-edge-sub-text={edge.sub ?? ""}
+      data-cdl-tone={edge.tone}
+      data-cdl-edge-role={edge.role}
     >
       {/* 下地は既定で敷く。 丸い下地は箱と同じ形なので、 罫の細い図では外せるようにした (#618) */}
       {edge.labelPlate !== false && (
@@ -441,12 +452,14 @@ export function CdlEdgeEndLabelView({
   edge,
   active,
   端,
+  textMetrics = "proportional",
 }: {
   edge: LaidEdge;
   active: boolean;
   端: 線の端;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element | null {
-  const 置き場所 = 端の字を置く(edge, 端);
+  const 置き場所 = 端の字を置く(edge, 端, textMetrics);
   if (!置き場所) return null;
   const color = edgeColor(edge);
   return (
@@ -454,6 +467,8 @@ export function CdlEdgeEndLabelView({
       data-cdl-role="edge-end-label"
       data-cdl-edge-end-label-for={edge.id}
       data-cdl-edge-end={端}
+      data-cdl-tone={edge.tone}
+      data-cdl-edge-role={edge.role}
       x={置き場所.x}
       y={置き場所.y}
       fontSize={端の字の大きさ}