@cardenelabs/cdl 0.57.0 → 0.58.0

package/src/kinds/shape-software.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
+import { 字引きを作る, type CdlLang } from "../lang";
 
 /**
  * Shape-driven software 6 kinds (CAR-1111 Phase 2-B)。
@@ -38,6 +39,8 @@ import type { LaidNode } from "../types";
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
+  lang?: CdlLang;
 };
 
 const commonFrame = (active: boolean) => ({
@@ -53,6 +56,19 @@ const DESCENT = 0.25;
 // SVG の字幅は描く前に測れず、 getBBox も描いた後にしか使えないため送り幅で見積もる。
 // 手元の等幅書体は 0.55-0.61 なので、 0.62 なら実寸を下回らず収めた行が実際にはみ出さない。
 const MONO_ADVANCE = 0.62;
+
+/**
+ * 等幅の書体で描く字の桁数。 和文 (U+2E80 以降) は 2 桁、それ以外は 1 桁で数える (#847)。
+ *
+ * 字数 (`length`) で数えると、日本語の辞書で描く字 (`進行中` / `→ 12 個を 1.8 秒で出力`) を
+ * 半分の幅に見積もり、縮める倍率が効かずに箱からはみ出す。 英語の辞書の字はすべて U+2E80 より
+ * 前にあり (`→` も含む)、字数と同じ値になるので、英語の図の見え方は変わらない。
+ */
+function 等幅の桁(s: string): number {
+  let 桁 = 0;
+  for (const c of s) 桁 += (c.codePointAt(0) ?? 0) >= 0x2e80 ? 2 : 1;
+  return 桁;
+}
 // 説明は名前が 16 の時に従来の 11 となり、 名前を縮めた時も同じ比で追随する。
 const LABEL_SUB_RATIO = 11 / 16;
 // 肩書は名前が 16 の時に従来の 12 となり、 名前を縮めた時も同じ比で追随する。
@@ -187,7 +203,8 @@ export function ShapeWindowNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-terminal = 端末 (黒地 + macOS 風 top bar + prompt 3 行 + typing cursor) */
-export function ShapeTerminalNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
   const x = node.cx - node.w / 2 + 線;
@@ -209,11 +226,11 @@ export function ShapeTerminalNode({ node, active }: ShapeProps): JSX.Element {
       { 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" },
       { 左: 30, 字: 12.5, 色: "#e6edf3", 文: "pnpm build" },
     ],
-    [{ 左: 16, 字: 12, 色: "#8b95a5", 文: "→ 12 chunks in 1.8s" }],
+    [{ 左: 16, 字: 12, 色: "#8b95a5", 文: 字引("terminal.output") }],
     [{ 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" }],
   ];
   // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
-  const 自然幅 = Math.max(...行.flat().map((t) => t.左 + t.文.length * MONO_ADVANCE * t.字)) + 余白;
+  const 自然幅 = Math.max(...行.flat().map((c) => c.左 + 等幅の桁(c.文) * MONO_ADVANCE * c.字)) + 余白;
   // 最終行とカーソルまで入る自然高を使い、 縦にも同じ倍率を適用できるようにする。
   const 自然高 = 帯 + 先頭 + 行間 * (行.length - 1) + Math.max(カーソル.下, 12.5 * DESCENT);
   // 縦横を同じ倍率で縮めて比を保ち、 幅 300・高さ 200 では 1 のまま従来値を保つ。
@@ -317,7 +334,8 @@ export function ShapeTerminalNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-code-block = code editor (tab + gutter + 4 syntax-colored stub lines) */
-export function ShapeCodeBlockNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
   const x = node.cx - node.w / 2 + 線;
@@ -410,7 +428,7 @@ export function ShapeCodeBlockNode({ node, active }: ShapeProps): JSX.Element {
             textAnchor="middle"
             fill="#e6edf3"
           >
-            utils.ts
+            {字引("codeBlock.fileName")}
           </text>
           <circle cx={x + tabW - 丸} cy={y + tabH / 2} r={3 * 倍} fill="#7cd88f" stroke="none" />
           <path
@@ -483,7 +501,8 @@ export function ShapeCodeBlockNode({ node, active }: ShapeProps): JSX.Element {
 }
 
 /** shape-kanban-card = kanban ticket (top color bar + 3 stub line) */
-export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Element {
+  const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
   // 影は札を右下へずらして重ねるため、 ずらす分と枠線を札の寸法から先に引く。
@@ -496,7 +515,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
   const 左右余白 = 14;
   const 上段隙間 = 8;
   const 優先帯高 = 10;
-  const ID文 = "CAR-1111";
+  const ID文 = 字引("kanbanCard.id");
   const ID基準 = 30;
   const ID字 = 11;
   const ID字間 = 1;
@@ -516,7 +535,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
   const 下帯 = FOOTER下 - AVATAR中心Y + AVATAR半径 + AVATAR枠 / 2 + 帯間余白;
   const 中帯 = 名前字 * ASCENT + 名前字 * 説明基準比 + 名前字 * 説明字比 * DESCENT;
   const 自然高 = 上帯 + 中帯 + 下帯;
-  const ID幅 = ID文.length * MONO_ADVANCE * ID字 + ID字間 * ID文.length;
+  const ID幅 = 等幅の桁(ID文) * MONO_ADVANCE * ID字 + ID字間 * [...ID文].length;
   const 自然幅 = 左右余白 + ID幅 + 上段隙間 + PILL幅 + 左右余白;
   // 札の中身だけを縦横同率で縮め、 入る札では 1 のまま従来の大きさを保つ。
   const 倍 = Math.min(1, w / 自然幅, h / 自然高);
@@ -594,7 +613,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
             fill="#5a4a1a"
             fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
           >
-            IN PROG
+            {字引("kanbanCard.status")}
           </text>
           {/* タスク名 = title (中央上、 大きく太字) */}
           <text
@@ -616,7 +635,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
             textAnchor="middle"
             fill="var(--cdl-text-dim, #5a6270)"
           >
-            shape-driven kind 実装
+            {字引("kanbanCard.task")}
           </text>
           {/* footer = 2 avatars 左 + due date 右 */}
           <g transform={`translate(${x + 左右余白 * 倍}, ${footY})`}>
@@ -668,7 +687,7 @@ export function ShapeKanbanCardNode({ node, active }: ShapeProps): JSX.Element {
             textAnchor="end"
             fill="var(--cdl-text-dim, #5a6270)"
           >
-            Jul 10
+            {字引("kanbanCard.due")}
           </text>
         </>
       )}

package/src/lang.ts

@@ -0,0 +1,168 @@
+/**
+ * 描画側が書く固定の字の言語 (#847)。
+ *
+ * 書き手が何を渡しても描かれる字 (形の看板 / 絵の中の見本の値 / 行の名前) を 1 つの辞書に集め、
+ * 図の `lang` で引き替える。 書き手の字 (`title` / `subtitle` / 行 / 札) はこの辞書を通らない。
+ *
+ * **既定は英語**。 字を直接日本語へ書き換えると、英語で使う人の図まで変わり、戻す口も無い。
+ * 指定の無い図は変更前と同じ字で描く。
+ *
+ * **JSX を持たない module に置く**。 型の定義 (`types.ts`) と配置 (`layout.ts`) からも読むため、
+ * ここから React を引き込むと字の幅を測る検査の読込みが重くなる (`kinds/text-width.ts` の注記と同じ)。
+ *
+ * 言語は `CdlStage` → `CdlNodeView` → 形の部品へ引数 (`lang`) で届く。
+ */
+
+/** 図の言語。 書かない図は `"en"` で描く */
+export type CdlLang = "en" | "ja";
+
+/**
+ * 記法から届いた値を言語に直す。 型の外の値 (記法の文字列の書き損じ等) は既定の `"en"` に落とす。
+ *
+ * 落とす先を英語にするのは、指定の無い図と同じ見え方になるため。 書き損じで一部の字だけ
+ * 日本語になる形は作らない。
+ */
+export function resolveLang(value: unknown): CdlLang {
+  return value === "ja" ? "ja" : "en";
+}
+
+/**
+ * 英語の辞書。 鍵の一覧の出どころで、値は変更前に描いていた字そのもの。
+ *
+ * 鍵は `形.役割` の形にする。 同じ字でも役割が違えば別の鍵にする (訳が分かれうるため)。
+ */
+const en = {
+  /** `shape-terminal` の 2 行目 (命令の出力) */
+  "terminal.output": "→ 12 chunks in 1.8s",
+  /** `shape-code-block` の札の file 名 */
+  "codeBlock.fileName": "utils.ts",
+  /** `shape-kanban-card` の課題の番号 */
+  "kanbanCard.id": "CAR-1111",
+  /** `shape-kanban-card` の状態の札 */
+  "kanbanCard.status": "IN PROG",
+  /** `shape-kanban-card` の題の下の説明 */
+  "kanbanCard.task": "shape-driven kind 実装",
+  /** `shape-kanban-card` の期日 */
+  "kanbanCard.due": "Jul 10",
+  /** `shape-smart-contract` の契約の本文の 1 行 */
+  "smartContract.call": "function execute()",
+  /** `shape-blockchain-block` の題を渡さない時の見出し */
+  "blockchainBlock.title": "Block #421,873",
+  /** `shape-blockchain-block` の 1 行目の名前 (塊を識別する値) */
+  "blockchainBlock.hash": "hash",
+  /** `shape-blockchain-block` の 2 行目の名前 (1 つ前の塊の識別値) */
+  "blockchainBlock.prev": "prev",
+  /** `shape-blockchain-block` の 3 行目の名前 (取引をまとめた木の根) */
+  "blockchainBlock.merkle": "merkle",
+  /** `shape-blockchain-block` の 4 行目の名前 (採掘で試した値) */
+  "blockchainBlock.nonce": "nonce",
+  /** `shape-blockchain-block` の 5 行目の名前 (取引の件数) */
+  "blockchainBlock.tx": "tx",
+  /** `shape-blockchain-block` の 5 行目の値 */
+  "blockchainBlock.txCount": "142 tx",
+  /** `shape-rpc-node` の稼働の札 */
+  "rpcNode.status": "RPC ONLINE",
+  /** `shape-trust-bank` の看板 */
+  "trustBank.sign": "TRUST",
+  /** `shape-payment-provider` の看板 */
+  "paymentProvider.sign": "PAY",
+  /** `shape-payment-provider` の状態の札 */
+  "paymentProvider.status": "PROCESSING",
+  /** `shape-brokerage` の株価の帯 */
+  "brokerage.ticker": "▲NKY 38,240 ▲AAPL 194",
+  /** `shape-brokerage` の看板 */
+  "brokerage.sign": "$ SECURITIES",
+  /** `shape-exchange` の看板 */
+  "exchange.sign": "EXCHANGE",
+  /** `shape-exchange` の看板の下の札 */
+  "exchange.sub": "clearing",
+  /** `shape-atm` の天井の看板 */
+  "atm.sign": "ATM CORNER",
+  /** `shape-atm` の画面の案内 */
+  "atm.screen": "SELECT AMOUNT",
+  /** `shape-atm` の決める鍵 */
+  "atm.ok": "OK",
+  /** `shape-atm` のカードを入れる口の札 */
+  "atm.cardSlot": "CARD SLOT",
+  /** `shape-storefront` の看板 */
+  "storefront.sign": "SHOP",
+  /** `shape-storefront` の扉の札 */
+  "storefront.open": "OPEN",
+  /** `shape-warehouse` の看板 */
+  "warehouse.sign": "WAREHOUSE",
+  /** `shape-api-gateway` の看板 */
+  "apiGateway.sign": "API GATEWAY",
+  /** `shape-api-gateway` の 3 行目の要求の種類 */
+  "apiGateway.delete": "DEL",
+  /** `shape-api-gateway` の 1 行目の宛先 */
+  "apiGateway.users": "/users",
+  /** `shape-api-gateway` の 2 行目の宛先 */
+  "apiGateway.orders": "/orders",
+  /** `shape-api-gateway` の 3 行目の宛先 */
+  "apiGateway.session": "/session",
+} as const;
+
+/** 辞書の鍵 */
+export type CdlTextKey = keyof typeof en;
+
+/**
+ * 日本語の辞書。 型を `en` の鍵と同じにし、訳の抜けと余分な鍵を型で落とす。
+ *
+ * 製品名と定着した略語 (`API` / `ATM` / `RPC`) と、要求の種類の綴り (`DELETE`) は英字のまま残す。
+ * 日本語の文でもこの綴りで書くため。
+ */
+const ja: Record<CdlTextKey, string> = {
+  "terminal.output": "→ 1.8 秒で完了",
+  "codeBlock.fileName": "共通.ts",
+  "kanbanCard.id": "#1111",
+  "kanbanCard.status": "進行中",
+  "kanbanCard.task": "形を実装",
+  "kanbanCard.due": "7/10",
+  "smartContract.call": "自動で実行する",
+  "blockchainBlock.title": "ブロック #421,873",
+  "blockchainBlock.hash": "ハッシュ",
+  "blockchainBlock.prev": "直前",
+  "blockchainBlock.merkle": "木の根",
+  "blockchainBlock.nonce": "ノンス",
+  "blockchainBlock.tx": "取引",
+  "blockchainBlock.txCount": "142 件",
+  "rpcNode.status": "RPC 稼働中",
+  "trustBank.sign": "信託",
+  "paymentProvider.sign": "決済",
+  "paymentProvider.status": "処理中",
+  "brokerage.ticker": "▲日経 38,240 ▲東証 2,710",
+  "brokerage.sign": "¥ 証券",
+  "exchange.sign": "取引所",
+  "exchange.sub": "清算",
+  "atm.sign": "ATM コーナー",
+  "atm.screen": "金額を選択",
+  "atm.ok": "確定",
+  "atm.cardSlot": "カード挿入口",
+  "storefront.sign": "商店",
+  "storefront.open": "営業",
+  "warehouse.sign": "倉庫",
+  "apiGateway.sign": "API 入口",
+  "apiGateway.delete": "DELETE",
+  "apiGateway.users": "/利用者",
+  "apiGateway.orders": "/注文",
+  "apiGateway.session": "/接続",
+};
+
+/** 言語ごとの辞書。 検査が鍵の一致を実行時にも確かめるため公開する */
+export const CDL_TEXT: Readonly<Record<CdlLang, Readonly<Record<CdlTextKey, string>>>> = { en, ja };
+
+/** 言語と鍵から描く字を引く */
+export function cdlText(lang: CdlLang, key: CdlTextKey): string {
+  return CDL_TEXT[lang][key];
+}
+
+/**
+ * 部品が受け取った言語で辞書を引く関数を返す。 言語を渡さない呼び方は英語で引く。
+ *
+ * **部品へは引数で渡す** (React の文脈で届けない)。 形の部品は検査から関数として直接呼ばれており
+ * (`描く({ node, active })`)、文脈を読む hook はその呼び方で使えない。
+ */
+export function 字引きを作る(lang: CdlLang | undefined): (key: CdlTextKey) => string {
+  const 言語 = lang ?? "en";
+  return (key) => CDL_TEXT[言語][key];
+}

package/src/layout.ts

@@ -1,4 +1,5 @@
 import type { CdlDiagram, LaidDiagram } from "./types";
+import { resolveLang } from "./lang";
 import {
   CLEARANCE_LABEL_LABEL,
   CLEARANCE_NODE_LABEL,
@@ -422,6 +423,9 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...(diag.palette ? { palette: diag.palette } : {}),
+    // 描画側の固定の字の言語 (#847)。 既定 (`en`) と型の外の値は持たせない = 配置の結果の形を
+    // 変更前と揃え、記法の書き損じで一部の字だけ日本語になる形を作らない
+    ...(resolveLang(diag.lang) === "ja" ? { lang: "ja" as const } : {}),
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...(diag.type ? { type: diag.type } : {}),
     bboxes,

package/src/render/interactive-panel.tsx

@@ -14,6 +14,7 @@ import {
 } from "../event-handler";
 import type { Signal, Computed } from "../reactive";
 import { effect } from "../reactive";
+import { textWidth } from "../kinds/text-width";
 
 /**
  * interactive primitive (input widget / formula / scroll trigger / event handler) を SVG diagram に
@@ -3473,6 +3474,22 @@ function ProgressGroupReadout({
   );
 }
 
+/**
+ * 点の真上に置く札の揃え方。
+ *
+ * 中央揃えのままだと、範囲の端の点 (x = 余白 8) では札の幅の半分が図の外へ出て切れる
+ * (実測 = 時刻 0 の `認可要求` が `可要求` に見えた、 #845)。 はみ出す側だけ揃え位置で押し戻す。
+ *
+ * 札の幅は描く前に分からないので `textWidth` で見積もる。 見積りは実物以上に倒してあるため、
+ * 収まる札を端に寄せることはあっても、はみ出す札を中央に残すことは無い。
+ */
+function sequenceLabelAnchor(x: number, name: string, fontSize: number, viewW: number): "start" | "middle" | "end" {
+  const half = textWidth(name, fontSize) / 2;
+  if (x - half < 0) return "start";
+  if (x + half > viewW) return "end";
+  return "middle";
+}
+
 function SequenceTimelineReadout({
   id,
   label,
@@ -3543,7 +3560,7 @@ function SequenceTimelineReadout({
                 <circle cx={x} cy={trackY} r={5} fill={color} stroke="#fff" strokeWidth={1.5}>
                   <title>{`${e.name}: t=${e.t}`}</title>
                 </circle>
-                <text x={x} y={trackY - 12} textAnchor="middle" fontSize={10} fill="var(--v4-ink, #1a1f2a)">
+                <text x={x} y={trackY - 12} textAnchor={sequenceLabelAnchor(x, e.name, 10, viewW)} 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)">

package/src/render/nodes.tsx

@@ -87,6 +87,7 @@ import {
   ShapeCustomerServiceNode,
 } from "../kinds/shape-people";
 import type { LaidNode } from "../types";
+import type { CdlLang } from "../lang";
 import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
 
 /**
@@ -115,9 +116,12 @@ export function CdlNodeView({
   currentPhaseId,
   chartLineScale,
   関係の受け口,
+  lang,
 }: {
   node: LaidNode;
   active: boolean;
+  /** 描画側の固定の字の言語 (#847)。 字を持つ形の部品へ渡す。 渡さない呼び方は英語で描く */
+  lang?: CdlLang;
   /**
    * この phase の `draw` に載っているか (cdl#512)。 true の間だけ、 対象の種別が
    * phase の進み (`progress`) に合わせて左の起点から描かれる。
@@ -353,11 +357,11 @@ export function CdlNodeView({
       case "shape-window":
         return <ShapeWindowNode node={resolvedNode} active={active} />;
       case "shape-terminal":
-        return <ShapeTerminalNode node={resolvedNode} active={active} />;
+        return <ShapeTerminalNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-code-block":
-        return <ShapeCodeBlockNode node={resolvedNode} active={active} />;
+        return <ShapeCodeBlockNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-kanban-card":
-        return <ShapeKanbanCardNode node={resolvedNode} active={active} />;
+        return <ShapeKanbanCardNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-message-bubble":
         return <ShapeMessageBubbleNode node={resolvedNode} active={active} />;
       case "shape-gear":
@@ -375,11 +379,11 @@ export function CdlNodeView({
       case "shape-satellite":
         return <ShapeSatelliteNode node={resolvedNode} active={active} />;
       case "shape-smart-contract":
-        return <ShapeSmartContractNode node={resolvedNode} active={active} />;
+        return <ShapeSmartContractNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-blockchain-block":
-        return <ShapeBlockchainBlockNode node={resolvedNode} active={active} />;
+        return <ShapeBlockchainBlockNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-rpc-node":
-        return <ShapeRpcNodeNode node={resolvedNode} active={active} />;
+        return <ShapeRpcNodeNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-wallet":
         return <ShapeWalletNode node={resolvedNode} active={active} />;
       case "shape-nft":
@@ -397,29 +401,29 @@ export function CdlNodeView({
       case "shape-bank":
         return <ShapeBankNode node={resolvedNode} active={active} />;
       case "shape-trust-bank":
-        return <ShapeTrustBankNode node={resolvedNode} active={active} />;
+        return <ShapeTrustBankNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-payment-provider":
-        return <ShapePaymentProviderNode node={resolvedNode} active={active} />;
+        return <ShapePaymentProviderNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-credit-card":
         return <ShapeCreditCardNode node={resolvedNode} active={active} />;
       case "shape-brokerage":
-        return <ShapeBrokerageNode node={resolvedNode} active={active} />;
+        return <ShapeBrokerageNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-exchange":
-        return <ShapeExchangeNode node={resolvedNode} active={active} />;
+        return <ShapeExchangeNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-atm":
-        return <ShapeAtmNode node={resolvedNode} active={active} />;
+        return <ShapeAtmNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-website":
         return <ShapeWebsiteNode node={resolvedNode} active={active} />;
       case "shape-storefront":
-        return <ShapeStorefrontNode node={resolvedNode} active={active} />;
+        return <ShapeStorefrontNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-warehouse":
-        return <ShapeWarehouseNode node={resolvedNode} active={active} />;
+        return <ShapeWarehouseNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-online-shop":
         return <ShapeOnlineShopNode node={resolvedNode} active={active} />;
       case "shape-cdn-edge":
         return <ShapeCdnEdgeNode node={resolvedNode} active={active} />;
       case "shape-api-gateway":
-        return <ShapeApiGatewayNode node={resolvedNode} active={active} />;
+        return <ShapeApiGatewayNode node={resolvedNode} active={active} lang={lang} />;
       case "shape-auditor":
         return <ShapeAuditorNode node={resolvedNode} active={active} />;
       case "shape-regulator":

package/src/render/stage.tsx

@@ -426,6 +426,8 @@ export function CdlStage({
             <CdlNodeView
               node={node}
               active={activeSet.has(node.id)}
+              // 描画側の固定の字の言語 (#847)。 `layout` が既定以外の時だけ `lang` を持たせる
+              lang={laid.lang}
               関係の受け口={箱の受け口}
               drawing={描く}
               progress={描く ? 描く進み : progress}

package/src/types.ts

@@ -5,6 +5,7 @@ import type {
   SequenceBoardMessage,
   SequenceBoardMessageKind,
 } from "./kinds/sequence-board-metrics";
+import type { CdlLang } from "./lang";
 
 export type {
   SequenceBoardActor,
@@ -2613,6 +2614,15 @@ export type CdlDiagram = {
    * 既定の図にも当たる。
    */
   palette?: string;
+  /**
+   * 描画側が書く固定の字を、どの言語で描くか (#847)。 書かない図は `"en"` で描く。
+   *
+   * 引き替わるのは描画側が持つ字 (形の看板 / 絵の中の見本の値 / 行の名前) だけで、書き手の字
+   * (`title` / `subtitle` / 札) は変わらない。 字の一覧は `src/lang.ts` が持つ。
+   *
+   * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
+   */
+  lang?: CdlLang;
   /**
    * この図がどの種類か (#645)。 書かない図は種類を持たない。
    *
@@ -2840,6 +2850,11 @@ export type LaidDiagram = {
   topic: string;
   /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
   palette?: string;
+  /**
+   * 描画側の固定の字の言語 (#847)。 `CdlDiagram.lang` を既定以外の時だけ持ち越す。
+   * 無い時は `"en"` で描く。
+   */
+  lang?: CdlLang;
   /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
   type?: string;
   viewBox: { x: number; y: number; w: number; h: number };