@cardenelabs/cdl 0.122.0 → 0.124.0

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={端の字の大きさ}

package/src/render/interactive-panel.tsx

@@ -2,7 +2,8 @@ import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useStat
 import type { JSX } from "react";
 import { CDL_TEXT, resolveLang, 字を差し込む, type CdlLang, type CdlTextKey } from "../lang";
 import { assertNever } from "../assert-never";
-import type { CdlDiagram, CdlInput, CdlReadout } from "../types";
+import type { CdlDiagram, CdlInput, CdlReadout, CdlTextMetrics } from "../types";
+import { resolveTextMetrics } from "../text-metrics";
 import { createInputSignals, inputDefaultValue } from "../input-signals";
 import { 選択肢の値, 選択肢の名前 } from "../input-option";
 import { createFormulaComputeds } from "../formula";
@@ -19,7 +20,7 @@ import type { Signal, Computed } from "../reactive";
 import { effect } from "../reactive";
 import { textWidth } from "../kinds/text-width";
 import { 桁で割る, 桁で省く } from "../kinds/row-align";
-import { 幅で切る } from "../kinds/box-lines";
+import { 幅で切る, 箱の字を測る } from "../kinds/box-lines";
 
 /**
  * interactive primitive (input widget / formula / scroll trigger / event handler) を SVG diagram に
@@ -685,7 +686,12 @@ export function useInteractiveIntegration(
         {readouts.length > 0 && (
           <div className="cdl-ip-group">
             {readouts.map((r) => (
-              <ReadoutWidget key={r.id} readout={r} stateOverrides={mergedStateValues} />
+              <ReadoutWidget
+                key={r.id}
+                readout={r}
+                stateOverrides={mergedStateValues}
+                textMetrics={resolveTextMetrics(diagram.textMetrics)}
+              />
             ))}
           </div>
         )}
@@ -1173,9 +1179,11 @@ function StepperWidget({
 function ReadoutWidget({
   readout,
   stateOverrides,
+  textMetrics = "proportional",
 }: {
   readout: CdlReadout;
   stateOverrides: Record<string, number | string | boolean>;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   // stacked-bar は sourceA / sourceB を持ち source を持たない、 その場合は rawValue = undefined 扱い
   const rawValue = "source" in readout ? stateOverrides[readout.source] : undefined;
@@ -1414,6 +1422,7 @@ function ReadoutWidget({
           viewW={readout.viewW ?? 280}
           viewH={readout.viewH ?? 60}
           color={readout.color ?? "#2563eb"}
+          textMetrics={textMetrics}
         />
       );
     case "radar": {
@@ -2166,6 +2175,7 @@ function ReadoutWidget({
             { status: "error", color: "#ef4444" },
           ]}
           max={readout.max ?? 10}
+          textMetrics={textMetrics}
         />
       );
     case "calendar-week":
@@ -3559,8 +3569,14 @@ function ProgressGroupReadout({
  * 札の幅は描く前に分からないので `textWidth` で見積もる。 見積りは実物以上に倒してあるため、
  * 収まる札を端に寄せることはあっても、はみ出す札を中央に残すことは無い。
  */
-function sequenceLabelAnchor(x: number, name: string, fontSize: number, viewW: number): "start" | "middle" | "end" {
-  const half = textWidth(name, fontSize) / 2;
+function sequenceLabelAnchor(
+  x: number,
+  name: string,
+  fontSize: number,
+  viewW: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): "start" | "middle" | "end" {
+  const half = textWidth(name, fontSize, 0, textMetrics) / 2;
   if (x - half < 0) return "start";
   if (x + half > viewW) return "end";
   return "middle";
@@ -3575,6 +3591,7 @@ function SequenceTimelineReadout({
   viewW,
   viewH,
   color,
+  textMetrics = "proportional",
 }: {
   id: string;
   label: string;
@@ -3584,6 +3601,7 @@ function SequenceTimelineReadout({
   viewW: number;
   viewH: number;
   color: string;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   // event parse: [[t, name], ...] または [t, t, t, ...]
   const events: { t: number; name: string }[] = [];
@@ -3636,7 +3654,13 @@ function SequenceTimelineReadout({
                 <circle cx={x} cy={trackY} r={5} fill={color} stroke="#fff" strokeWidth={1.5}>
                   <字の見出し k="readout.sequenceTimeline.title" v={{ name: e.name, t: e.t }} />
                 </circle>
-                <text x={x} y={trackY - 12} textAnchor={sequenceLabelAnchor(x, e.name, 10, viewW)} fontSize={10} fill="var(--v4-ink, #1a1f2a)">
+                <text
+                  x={x}
+                  y={trackY - 12}
+                  textAnchor={sequenceLabelAnchor(x, e.name, 10, viewW, textMetrics)}
+                  fontSize={10}
+                  fill="var(--v4-ink, #1a1f2a)"
+                >
                   {e.name}
                 </text>
                 <text x={x} y={trackY + 18} textAnchor="middle" fontSize={9} fill="var(--v4-mute, #64748b)">
@@ -7715,12 +7739,14 @@ function StatusTimelineReadout({
   value,
   colorMap,
   max,
+  textMetrics = "proportional",
 }: {
   id: string;
   label: string;
   value: string;
   colorMap: Array<{ status: string; color: string }>;
   max: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   type Event = { timestamp: string; status: string };
   const events: Event[] = [];
@@ -7757,6 +7783,7 @@ function StatusTimelineReadout({
     status === "active" || status === "idle" || status === "error"
       ? 引く(`readout.statusTimeline.${status}`)
       : status.toUpperCase();
+  const 測る = 箱の字を測る(textMetrics);
   return (
     <div className="cdl-ip-item cdl-ip-readout-status-timeline" data-cdl-readout={id}>
       <span className="cdl-ip-label">{label}</span>
@@ -7771,7 +7798,7 @@ function StatusTimelineReadout({
           const c = colorLookup.get(ev.status) ?? "#cbd5e1";
           const 字 = 区間の字(ev.status);
           // 左右に 3px ずつ余白を取る (区間の枠は幅 - 2 で描く)
-          const 描く字 = 幅で切る(字, 10, cellW - 8);
+          const 描く字 = 幅で切る(字, 10, cellW - 8, 測る);
           return (
             <g key={i} data-cdl-status-event={i} data-cdl-status={ev.status}>
               <rect x={x} y={10} width={cellW - 2} height={stripHeight} fill={c} rx={2} />

package/src/render/nodes.tsx

@@ -87,7 +87,7 @@ import {
   ShapeTraderNode,
   ShapeCustomerServiceNode,
 } from "../kinds/shape-people";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import type { CdlLang } from "../lang";
 import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
 import { drawsFigureTitle } from "../layout/spec";
@@ -121,6 +121,7 @@ export function CdlNodeView({
   chartLineScale,
   関係の受け口,
   lang,
+  textMetrics,
   値の名前,
 }: {
   node: LaidNode;
@@ -132,6 +133,8 @@ export function CdlNodeView({
   値の名前?: 値の名前の表;
   /** 描画側の固定の字の言語 (#847)。 字を持つ形の部品へ渡す。 渡さない呼び方は英語で描く */
   lang?: CdlLang;
+  /** 図全体の字幅規則。測る描画部品へ明示的に渡す */
+  textMetrics?: CdlTextMetrics;
   /**
    * この phase の `draw` に載っているか (cdl#512)。 true の間だけ、 対象の種別が
    * phase の進み (`progress`) に合わせて左の起点から描かれる。
@@ -201,7 +204,13 @@ export function CdlNodeView({
         return <CardNode node={resolvedNode} active={active} />;
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
-        return <SequenceBoardNode node={resolvedNode} stateValues={stateValues} />;
+        return (
+          <SequenceBoardNode
+            node={resolvedNode}
+            stateValues={stateValues}
+            textMetrics={textMetrics}
+          />
+        );
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -225,6 +234,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-gauge":
@@ -236,6 +246,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-stacked-bar":
@@ -248,6 +259,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-slope":
@@ -259,6 +271,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-waffle":
@@ -270,11 +283,19 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-stat":
         // 数値が主役で、弧は輪郭だけの補助。 段の進みで数値が動く演出は既存の tween が担う
-        return <ChartStatNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <ChartStatNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            textMetrics={textMetrics}
+          />
+        );
       case "chart-radial":
         // 段の進みでは各輪が 12 時から開く (cdl#715)
         return (
@@ -284,6 +305,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "chart-bar":
@@ -314,6 +336,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "funnel-stages":
@@ -324,10 +347,18 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "quadrant-matrix":
-        return <QuadrantNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <QuadrantNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            textMetrics={textMetrics}
+          />
+        );
       case "tree-hierarchy":
         return (
           <TreeHierarchyNode
@@ -336,6 +367,7 @@ export function CdlNodeView({
             stateValues={stateValues}
             drawing={drawing}
             progress={progress}
+            textMetrics={textMetrics}
           />
         );
       case "journey-map":
@@ -349,91 +381,91 @@ export function CdlNodeView({
           />
         );
       case "shape-file":
-        return <ShapeFileNode node={resolvedNode} active={active} />;
+        return <ShapeFileNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-folder":
-        return <ShapeFolderNode node={resolvedNode} active={active} />;
+        return <ShapeFolderNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-cloud":
-        return <ShapeCloudNode node={resolvedNode} active={active} />;
+        return <ShapeCloudNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-cylinder":
-        return <ShapeCylinderNode node={resolvedNode} active={active} />;
+        return <ShapeCylinderNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-hexagon":
-        return <ShapeHexagonNode node={resolvedNode} active={active} />;
+        return <ShapeHexagonNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-diamond":
-        return <ShapeDiamondNode node={resolvedNode} active={active} />;
+        return <ShapeDiamondNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-stack":
-        return <ShapeStackNode node={resolvedNode} active={active} />;
+        return <ShapeStackNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-person":
-        return <ShapePersonNode node={resolvedNode} active={active} />;
+        return <ShapePersonNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-window":
         return <ShapeWindowNode node={resolvedNode} active={active} />;
       case "shape-terminal":
         return <ShapeTerminalNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-code-block":
-        return <ShapeCodeBlockNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeCodeBlockNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-kanban-card":
-        return <ShapeKanbanCardNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeKanbanCardNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-message-bubble":
         return <ShapeMessageBubbleNode node={resolvedNode} active={active} />;
       case "shape-gear":
         return <ShapeGearNode node={resolvedNode} active={active} />;
       case "shape-server-rack":
-        return <ShapeServerRackNode node={resolvedNode} active={active} />;
+        return <ShapeServerRackNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-network-node":
-        return <ShapeNetworkNodeNode node={resolvedNode} active={active} />;
+        return <ShapeNetworkNodeNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-mobile-device":
-        return <ShapeMobileDeviceNode node={resolvedNode} active={active} />;
+        return <ShapeMobileDeviceNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-iot-sensor":
         return <ShapeIotSensorNode node={resolvedNode} active={active} />;
       case "shape-robot-arm":
         return <ShapeRobotArmNode node={resolvedNode} active={active} />;
       case "shape-satellite":
-        return <ShapeSatelliteNode node={resolvedNode} active={active} />;
+        return <ShapeSatelliteNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-smart-contract":
-        return <ShapeSmartContractNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeSmartContractNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-blockchain-block":
-        return <ShapeBlockchainBlockNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeBlockchainBlockNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-rpc-node":
-        return <ShapeRpcNodeNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeRpcNodeNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-wallet":
-        return <ShapeWalletNode node={resolvedNode} active={active} />;
+        return <ShapeWalletNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-nft":
-        return <ShapeNftNode node={resolvedNode} active={active} />;
+        return <ShapeNftNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-token":
-        return <ShapeTokenNode node={resolvedNode} active={active} />;
+        return <ShapeTokenNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-blockchain":
-        return <ShapeBlockchainNode node={resolvedNode} active={active} />;
+        return <ShapeBlockchainNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-bitcoin-chain":
-        return <ShapeBitcoinChainNode node={resolvedNode} active={active} />;
+        return <ShapeBitcoinChainNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-ethereum-chain":
-        return <ShapeEthereumChainNode node={resolvedNode} active={active} />;
+        return <ShapeEthereumChainNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-blockchain-node":
-        return <ShapeBlockchainNodeNode node={resolvedNode} active={active} />;
+        return <ShapeBlockchainNodeNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-bank":
-        return <ShapeBankNode node={resolvedNode} active={active} />;
+        return <ShapeBankNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-trust-bank":
-        return <ShapeTrustBankNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeTrustBankNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-payment-provider":
-        return <ShapePaymentProviderNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapePaymentProviderNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-credit-card":
-        return <ShapeCreditCardNode node={resolvedNode} active={active} />;
+        return <ShapeCreditCardNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-brokerage":
-        return <ShapeBrokerageNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeBrokerageNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-exchange":
-        return <ShapeExchangeNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeExchangeNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-atm":
-        return <ShapeAtmNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeAtmNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-website":
-        return <ShapeWebsiteNode node={resolvedNode} active={active} />;
+        return <ShapeWebsiteNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-storefront":
-        return <ShapeStorefrontNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeStorefrontNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-warehouse":
-        return <ShapeWarehouseNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeWarehouseNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-online-shop":
-        return <ShapeOnlineShopNode node={resolvedNode} active={active} />;
+        return <ShapeOnlineShopNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-cdn-edge":
-        return <ShapeCdnEdgeNode node={resolvedNode} active={active} />;
+        return <ShapeCdnEdgeNode node={resolvedNode} active={active} textMetrics={textMetrics} />;
       case "shape-api-gateway":
-        return <ShapeApiGatewayNode node={resolvedNode} active={active} lang={lang} />;
+        return <ShapeApiGatewayNode node={resolvedNode} active={active} lang={lang} textMetrics={textMetrics} />;
       case "shape-auditor":
         return <ShapeAuditorNode node={resolvedNode} active={active} />;
       case "shape-regulator":
@@ -454,7 +486,16 @@ export function CdlNodeView({
         return <StationNode node={resolvedNode} active={active} />;
       default:
         // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
-        return <GenericNode node={resolvedNode} active={active} value={node.value} stateValues={stateValues} 値の名前={値の名前} />;
+        return (
+          <GenericNode
+            node={resolvedNode}
+            active={active}
+            value={node.value}
+            stateValues={stateValues}
+            値の名前={値の名前}
+            textMetrics={textMetrics}
+          />
+        );
     }
   })();
   // node bounding box を node.w/h に固定するための invisible rect。
@@ -532,7 +573,7 @@ export function CdlNodeView({
         pointerEvents="none"
       />
       {inner}
-      {箱の上の語(resolvedNode)}
+      {箱の上の語(resolvedNode, textMetrics ?? "proportional")}
     </g>
   );
 }
@@ -548,8 +589,13 @@ const FIGURE_EYEBROW_SIZE = 11;
 const FIGURE_EYEBROW_LIFT = 1.1;
 
 /** 箱の幅に収める倍率。 収めないと長い語が箱の外へ出る */
-function 幅に収めた大きさ(語: string, 素の大きさ: number, 幅: number): number {
-  const 実幅 = textWidth(語, 素の大きさ, 0);
+function 幅に収めた大きさ(
+  語: string,
+  素の大きさ: number,
+  幅: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  const 実幅 = textWidth(語, 素の大きさ, 0, textMetrics);
   return 実幅 > 幅 ? (素の大きさ * 幅) / 実幅 : 素の大きさ;
 }
 
@@ -570,13 +616,16 @@ function 幅に収めた大きさ(語: string, 素の大きさ: number, 幅: num
  * 題を書かず小見出しだけを書いた図では、小見出しを題の位置に置く。 題の有無に紐付けて
  * 消すと、題を書かない図で小見出しが出なくなる。
  */
-function 箱の上の語(node: LaidNode): JSX.Element | null {
+function 箱の上の語(
+  node: LaidNode,
+  textMetrics: CdlTextMetrics = "proportional",
+): JSX.Element | null {
   if (!drawsFigureTitle(node.kind)) return null;
   const 名前 = (node.title ?? "").trim();
   const 小見出し = (node.eyebrow ?? "").trim();
   if (名前 === "" && 小見出し === "") return null;
   const 題のy = node.cy - node.h / 2 - FIGURE_TITLE_GAP;
-  const 題の大きさ = 幅に収めた大きさ(名前, FIGURE_TITLE_SIZE, node.w);
+  const 題の大きさ = 幅に収めた大きさ(名前, FIGURE_TITLE_SIZE, node.w, textMetrics);
   const 小見出しのy = 名前 === "" ? 題のy : 題のy - 題の大きさ * FIGURE_EYEBROW_LIFT;
   return (
     <>
@@ -586,7 +635,7 @@ function 箱の上の語(node: LaidNode): JSX.Element | null {
           x={node.cx}
           y={小見出しのy}
           textAnchor="middle"
-          fontSize={幅に収めた大きさ(小見出し, FIGURE_EYEBROW_SIZE, node.w)}
+          fontSize={幅に収めた大きさ(小見出し, FIGURE_EYEBROW_SIZE, node.w, textMetrics)}
           fontWeight={600}
           letterSpacing={0.6}
           fill="var(--cdl-text-dim, #5a6270)"

package/src/render/stage.tsx

@@ -455,6 +455,7 @@ export function CdlStage({
               active={activeSet.has(node.id)}
               // 描画側の固定の字の言語 (#847)。 `layout` が既定以外の時だけ `lang` を持たせる
               lang={laid.lang}
+              textMetrics={laid.textMetrics}
               関係の受け口={箱の受け口}
               drawing={描く}
               progress={描く ? 描く進み : progress}
@@ -480,6 +481,7 @@ export function CdlStage({
             key={`label-${edge.id}`}
             edge={edge}
             active={activeSet.has(edge.id)}
+            textMetrics={laid.textMetrics}
           />
         ))}
 
@@ -493,6 +495,7 @@ export function CdlStage({
                 edge={edge}
                 active={activeSet.has(edge.id)}
                 端={端}
+                textMetrics={laid.textMetrics}
               />
             )),
           )}

package/src/text-metrics.ts

@@ -0,0 +1,9 @@
+import type { CdlTextMetrics } from "./types";
+
+/**
+ * 記法などから届いた値を字幅の測り方へ直す。
+ * 完全一致する `"monospace"` 以外は既定の `"proportional"` に落とす。
+ */
+export function resolveTextMetrics(value: unknown): CdlTextMetrics {
+  return value === "monospace" ? "monospace" : "proportional";
+}

package/src/types.ts

@@ -20,6 +20,15 @@ export const TONES = ["accent", "teal", "success", "error", "warning", "info"] a
 
 export type Tone = (typeof TONES)[number];
 
+/**
+ * 図の字幅をどの規則で測るか。`"proportional"` は現在の Inter 比例幅表、`"monospace"` は
+ * 等幅書体向けの幅を使う。既定は `"proportional"`。
+ *
+ * 消費側が図を等幅書体で描く場合、比例幅で配置すると英数字の描画幅と箱・札の計算幅が
+ * 食い違うため、図単位で測り方を揃えられるようにする。
+ */
+export type CdlTextMetrics = "proportional" | "monospace";
+
 /**
  * cdl SVG に付与される data-cdl-role attribute の SSOT 型 (現在 12 role)。
  * consumer app (dragon 等) は `[data-cdl-role="<role>"]` selector で CSS を宛てる。 role を追加する時は本 union と該当 render 箇所 (kinds/*.tsx、
@@ -213,7 +222,7 @@ export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
  * 線の道筋。
  *
  * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
- * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻り、途中の箱と交わる時は外側を回る
  * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
  *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
  * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
@@ -882,7 +891,8 @@ export type CdlEdge = {
   /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
   labelOffsetY?: number;
   /**
-   * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+   * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回り、途中の箱と
+   * 交わる時は外側を回る戻り線、
    * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
    * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
    */
@@ -2754,6 +2764,14 @@ export type CdlDiagram = {
    * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
    */
   lang?: CdlLang;
+  /**
+   * 図の字幅を測る規則。`"proportional"` または `"monospace"` を取り、既定は
+   * `"proportional"`。
+   *
+   * 消費側が等幅書体で描く図では、比例幅の配置計算と実際の描画幅が食い違うため指定する。
+   * 型の外の値は `layout` が既定へ落とす。
+   */
+  textMetrics?: CdlTextMetrics;
   /**
    * この図がどの種類か (#645)。 書かない図は種類を持たない。
    *
@@ -2986,6 +3004,8 @@ export type LaidDiagram = {
    * 無い時は `"en"` で描く。
    */
   lang?: CdlLang;
+  /** 等幅で測る図だけが持つ。無い時は `"proportional"` */
+  textMetrics?: "monospace";
   /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
   type?: string;
   viewBox: { x: number; y: number; w: number; h: number };