@cardenelabs/cdl 0.74.0 → 0.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.74.0",
+  "version": "0.76.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/kinds/shape-blockchain.tsx

@@ -39,7 +39,7 @@ const BLOCK_W = 240;
 const BLOCK_H = 220;
 /** `shape-blockchain-block` の字の指定 (#871 で打ち消しの計算に使うため定数へ出した) */
 const 見出しの字 = 13;
-const 名の字 = 10.5;
+const 名の字 = 11;
 const 値の字 = 11;
 /** 5 行を並べる間隔と、見出しが乗る帯の高さ。 打ち消しの上限をここから出す (#871) */
 const 行の間隔 = 22;
@@ -56,6 +56,19 @@ const CHAIN_BLOCK_H = 66;
 const CHAIN_LINK_W = 12;
 const CHAIN_SHADOW = 3;
 const CHAIN_BLOCK_SW = 2.5;
+/** 連鎖の箱の頭の帯の高さ。 番号がここに乗る (#887 で打ち消しの帯に使うため定数へ出した) */
+const CHAIN_HEAD_H = 16;
+/** 箱の中で字が使える幅。 左右に 4 ずつ余白を置く */
+const CHAIN_TEXT_W = CHAIN_BLOCK_W - 8;
+/** 箱の中の 2 行 (中央の記号と下の字) の baseline の間隔 */
+const CHAIN_ROW_GAP = 14;
+/** 連鎖の箱の中の字の指定 (#887 で打ち消しの計算に使うため定数へ出した) */
+const CHAIN_NO_SIZE = 11;
+const CONTRACT_CALL_SIZE = 11;
+const NFT_ID_SIZE = 15;
+const CHAIN_HASH_SIZE = 11;
+const BTC_NO_SIZE = 11;
+const ETH_NO_SIZE = 11;
 
 const NODE_HEX_R = 44;
 const NODE_PEER_R = 12;
@@ -223,7 +236,23 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
     gearPts.push(`${gearCx + Math.cos(a3) * gearTipR},${gearCy + Math.sin(a3) * gearTipR}`);
     gearPts.push(`${gearCx + Math.cos(a4) * gearBodyR},${gearCy + Math.sin(a4) * gearBodyR}`);
   }
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 呼び出し行は書類の下寄りに 1 行だけ置くので、
+   * 幅は書類の内側 (左右 16 ずつ)、高さは行を並べる間隔 18 を使う。
+   *
+   * 字引きで日英が切り替わる (`function execute()` 18 字 と 自動で実行する 7 字) ため、
+   * 描く字そのものを渡して幅を数える。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    {
+      text: 字引("smartContract.call"),
+      size: CONTRACT_CALL_SIZE,
+      帯: { 幅: docW - 32, 高さ: 18 },
+    },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       <path data-cdl-role="node-body" d={path} {...frame} strokeLinejoin="round" />
       <path d={foldPath} fill="none" stroke={frame.stroke} strokeWidth={frame.strokeWidth} strokeLinejoin="round" />
@@ -232,7 +261,7 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
         <rect key={i} x={x + 16} y={ly - 3} width={docW - 32 - i * 22} height={5} rx={1} fill="var(--cdl-divider, #d4d4d8)" fillOpacity={0.7} stroke="none" />
       ))}
       {/* function signature */}
-      <text x={x + 16} y={y + docH - 46} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-tone-accent, #2d6a8f)">
+      <text data-cdl-counter-scaled="1" x={x + 16} y={y + docH - 46} fontSize={CONTRACT_CALL_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-tone-accent, #2d6a8f)">
         {字引("smartContract.call")}
       </text>
       {/* gear (auto-execution 記号) */}
@@ -247,7 +276,8 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
       </polygon>
       <circle cx={gearCx} cy={gearCy} r={gearBodyR * 0.4} fill="var(--cdl-node-fill, #ffffff)" stroke="none" />
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, smartContractExtent(frame.strokeWidth), art)}
@@ -413,7 +443,19 @@ export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 番号は頭の帯 (高さ 16) に乗り、下の字は中央の記号との
+   * 間隔 14 に収まる。 幅はどちらも箱の内側。
+   *
+   * **中央の記号 (`#`) は打ち消さない**。 箱の中央に大きく置いた飾りで、戻すと箱から出る。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#420", size: CHAIN_NO_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: CHAIN_HEAD_H } },
+    { text: "0x…", size: CHAIN_HASH_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: CHAIN_ROW_GAP } },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
         const bx = startX + i * (blockW + linkW);
@@ -440,21 +482,22 @@ export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
               stroke={frame.stroke}
               strokeWidth={isCurrent ? 2.5 : 1.5}
             />
-            <rect x={bx} y={cy - blockH / 2} width={blockW} height={16} rx={4} fill={isCurrent ? "#1a4a68" : "var(--cdl-divider, #d4d4d8)"} fillOpacity={isCurrent ? 1 : 0.4} stroke="none" />
-            <text x={bx + blockW / 2} y={cy - blockH / 2 + 12} fontSize={10} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+            <rect x={bx} y={cy - blockH / 2} width={blockW} height={CHAIN_HEAD_H} rx={4} fill={isCurrent ? "#1a4a68" : "var(--cdl-divider, #d4d4d8)"} fillOpacity={isCurrent ? 1 : 0.4} stroke="none" />
+            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy - blockH / 2 + 12} fontSize={CHAIN_NO_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
               #{420 + i}
             </text>
-            <text x={bx + blockW / 2} y={cy + 8} fontSize={14} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)"} fontFamily="Georgia, serif">
+            <text data-cdl-counter-scaled="0" x={bx + blockW / 2} y={cy + 8} fontSize={14} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)"} fontFamily="Georgia, serif">
               #
             </text>
-            <text x={bx + blockW / 2} y={cy + 22} fontSize={7} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"} opacity={0.9}>
+            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy + 22} fontSize={CHAIN_HASH_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"} opacity={0.9}>
               0x…
             </text>
           </g>
         );
       })}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
@@ -476,7 +519,17 @@ export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 番号は箱の下半分に置き、中央の `₿` との間隔 20 に収まる。
+   *
+   * **`₿` は打ち消さない** (指定 30 の飾りで、箱の高さ 66 に対して既に大きい)。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#820", size: BTC_NO_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: 20 } },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
         const bx = startX + i * (blockW + linkW);
@@ -496,17 +549,18 @@ export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element
               stroke={btcOrange}
               strokeWidth={isCurrent ? 2.5 : 1.5}
             />
-            <text x={bx + blockW / 2} y={cy - 4} fontSize={30} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : btcOrange} fontFamily="Georgia, serif">
+            <text data-cdl-counter-scaled="0" x={bx + blockW / 2} y={cy - 4} fontSize={30} fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : btcOrange} fontFamily="Georgia, serif">
               ₿
             </text>
-            <text x={bx + blockW / 2} y={cy + 16} fontSize={9} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy + 16} fontSize={BTC_NO_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
               #{820 + i}
             </text>
           </g>
         );
       })}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
@@ -528,7 +582,21 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
   const linkW = CHAIN_LINK_W;
   const totalW = blockCount * blockW + (blockCount - 1) * linkW;
   const startX = cx - totalW / 2;
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#888)。 番号は箱の下半分に置き、ロゴとの間隔 20 に収まる。
+   *
+   * **ロゴは打ち消さない** (絵で、字ではない)。
+   *
+   * #887 では 6 桁 (`#21400`) の幅 56.8 が帯 42 を縮む前から超えていたため打ち消しに
+   * 乗せられなかった。 番号を 3 桁に揃えて 37.8 に収めたので、他の 2 つの連鎖と同じ
+   * 扱いに戻した。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#214", size: ETH_NO_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: 20 } },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
         const bx = startX + i * (blockW + linkW);
@@ -553,14 +621,15 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
             />
             {/* Ethereum Diamond ロゴ */}
             <EthereumDiamond cx={bx + blockW / 2} cy={cy - 6} h={16} colors={iconColors} />
-            <text x={bx + blockW / 2} y={cy + 22} fontSize={9} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
-              #{21_400 + i}
+            <text data-cdl-counter-scaled="1" x={bx + blockW / 2} y={cy + 22} fontSize={ETH_NO_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={700} textAnchor="middle" fill={isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)"}>
+              #{214 + i}
             </text>
           </g>
         );
       })}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
@@ -776,7 +845,19 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
   const artH = cardH * 0.72;
   const artCx = x + cardW / 2;
   const artCy = y + artH / 2;
-  const art = (
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 番号は下の帯に置く。 高さは帯 (cardH - artH = 67)、
+   * 幅は左の余白 16 と右の丸 (半径 10、中心が cardW - 20) を避けた分。
+   *
+   * **絵の中央の `NFT` (指定 68) は打ち消さない**。 上の帯いっぱいに置いた飾りで、
+   * 戻すと帯から出る (実測 = 余り 0.92 で既に使い切っている)。
+   */
+  const 打ち消す字ら: 打ち消す字[] = [
+    { text: "#1024", size: NFT_ID_SIZE, 帯: { 幅: cardW - 16 - 34, 高さ: cardH - artH } },
+  ];
+  const art = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       {/* shadow */}
       <rect x={x + 4} y={y + 4} width={cardW} height={cardH} rx={14} fill={frame.stroke} opacity={0.2} stroke="none" />
@@ -791,6 +872,7 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
       />
       {/* 巨大 NFT 文字 (art 中央、 accent 色) */}
       <text
+        data-cdl-counter-scaled="0"
         x={artCx}
         y={artCy + 24}
         fontSize={68}
@@ -805,7 +887,7 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
       {/* 下部 info bar */}
       <line x1={x} y1={y + artH} x2={x + cardW} y2={y + artH} stroke={frame.stroke} strokeWidth={1} opacity={0.5} />
       {/* token id (左) */}
-      <text x={x + 16} y={y + artH + 30} fontSize={15} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+      <text data-cdl-counter-scaled="1" x={x + 16} y={y + artH + 30} fontSize={NFT_ID_SIZE * 倍} fontWeight={700} fill="var(--cdl-text, #1a1f2a)" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
         #1024
       </text>
       {/* verified check (右) */}
@@ -814,7 +896,8 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
         <path d="M -4 0 L -1 3 L 4 -3" fill="none" stroke="#ffffff" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
       </g>
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, nftExtent(frame.strokeWidth), art)}

package/src/kinds/shape-commerce.tsx

@@ -1,5 +1,12 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt, textWidth } from "./shape-region";
+import {
+  shapeRegion,
+  labelPlan,
+  fitArt,
+  textWidth,
+  打ち消しの倍率,
+  type 打ち消す字,
+} from "./shape-region";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
@@ -208,6 +215,8 @@ export function ShapeStorefrontNode({ node, active, lang }: ShapeProps): JSX.Ele
   const doorH = facadeH - 30;
   const doorX = x + bw - doorW - 12;
   const doorY = facadeY + 20;
+  // 営業中の札。 扉より広げない = 扉の外へ貼り出すと店の絵が壊れる
+  const 札幅 = Math.min(doorW - 6, 50);
   return (
     <g>
       {/* drop shadow */}
@@ -232,9 +241,9 @@ export function ShapeStorefrontNode({ node, active, lang }: ShapeProps): JSX.Ele
       {/* door の水平 line 装飾 */}
       <line x1={doorX + 4} y1={doorY + doorH * 0.38} x2={doorX + doorW - 4} y2={doorY + doorH * 0.38} stroke={accentDarker} strokeWidth={1} />
       <line x1={doorX + 4} y1={doorY + doorH * 0.72} x2={doorX + doorW - 4} y2={doorY + doorH * 0.72} stroke={accentDarker} strokeWidth={1} />
-      {/* OPEN sign (door 下部に貼付) */}
-      <rect x={doorX + doorW / 2 - 20} y={doorY + doorH * 0.85} width={40} height={12} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
-      <text x={doorX + doorW / 2} y={doorY + doorH * 0.85 + 9} fontSize={8} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#5a3a10">{字引("storefront.open")}</text>
+      {/* OPEN sign (door 下部に貼付)。 札は字に合わせる = 指定 11 の `OPEN` は字間 1 で幅 41.8 (#888) */}
+      <rect x={doorX + doorW / 2 - 札幅 / 2} y={doorY + doorH * 0.85} width={札幅} height={16} fill="#e5c07b" stroke="#a67c00" strokeWidth={1.5} />
+      <text x={doorX + doorW / 2} y={doorY + doorH * 0.85 + 11} fontSize={11} fontWeight={700} letterSpacing={1} textAnchor="middle" fill="#5a3a10">{字引("storefront.open")}</text>
       {/* door handle (小さな dot) */}
       <circle cx={doorX + 6} cy={doorY + doorH * 0.55} r={1.5} fill="#c15a4a" />
       {/* base 床 (前 storefront 直下のみ) */}
@@ -304,7 +313,7 @@ export function ShapeWarehouseNode({ node, active, lang }: ShapeProps): JSX.Elem
       <rect data-cdl-role="node-body" x={x} y={y + roofH} width={bw} height={bh - roofH - 12} fill="#a89d8f" stroke="#5a6270" strokeWidth={frame.strokeWidth} />
       {/* WAREHOUSE 看板 (赤帯) */}
       <rect x={x} y={y + roofH} width={bw} height={signH} fill="#c15a4a" stroke="#8b3f2f" strokeWidth={1.5} />
-      <text x={cx} y={y + roofH + 17} fontSize={12} fontWeight={900} letterSpacing={6} textAnchor="middle" fill="#ffffff">{字引("warehouse.sign")}</text>
+      <text data-cdl-counter-scaled="0" x={cx} y={y + roofH + 17} fontSize={12} fontWeight={900} letterSpacing={6} textAnchor="middle" fill="#ffffff">{字引("warehouse.sign")}</text>
       {/* 中央大 shutter (rib 縞) */}
       <rect x={shutterX} y={shutterY} width={shutterW} height={shutterH} fill="#8b949e" stroke={accentDarker} strokeWidth={2} />
       {/* shutter 上部 shade (立体感) */}
@@ -501,6 +510,12 @@ const API_ROWS = 3;
 /** 板の大きさ。 高さの下限は行が最小の間隔で 3 本入る高さ。 */
 const API_H_MIN =
   API_ROW_TOP + (API_ROWS - 1) * API_ROW_PITCH_MIN + API_ROW_H + API_ROW_BOTTOM_PAD;
+/** 要求の道と天井看板の字の指定 (#887 で打ち消しの計算に使うため定数へ出した) */
+const API_PATH_SIZE = 12;
+const API_SIGN_SIZE = 14;
+/** 種類の箱の幅と、その中で字が使える幅 (左右 3 ずつ空ける) */
+const API_METHOD_BOX_W = 54;
+const API_METHOD_TEXT_W = 48;
 const API_W_MIN = 200;
 const API_W_MAX = 300;
 
@@ -522,31 +537,48 @@ export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Ele
   // 11 のまま入り、長い綴り (日本語の辞書の `DELETE`) だけを縮める。 見積りは等幅と比例の大きい方
   // (`shape-blockchain.tsx` の `字の幅` と同じ考え方で、どちらの書体で描かれても箱からはみ出さない)
   const 種類の字 = (s: string): number =>
-    Math.min(11, (11 * 48) / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
+    Math.min(11, (11 * API_METHOD_TEXT_W) / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
   const rowPitch = Math.max(
     API_ROW_PITCH_MIN,
     (bh - API_ROW_TOP - API_ROW_H - API_ROW_BOTTOM_PAD) / (API_ROWS - 1),
   );
-  const 絵 = (
+  const 行ら = [
+    { method: "GET", path: 字引("apiGateway.users"), color: "#27c93f" },
+    { method: "POST", path: 字引("apiGateway.orders"), color: "#e5c07b" },
+    { method: 字引("apiGateway.delete"), path: 字引("apiGateway.session"), color: "#c9302c" },
+  ];
+  /*
+   * 打ち消しの上限を出す帯 (#887)。 要求の道の字が使える幅は、行の箱 (bw - 32) から
+   * 種類の箱までの 64 と、右端で点滅する印の丸の 16 を除いた残り。
+   *
+   * **種類の字 (`GET` / `POST`) は打ち消さない**。 `種類の字` が箱の幅 48 に合わせて指定を
+   * 決めているので余白が 0 で、打ち消す余地が無い (長い綴りでは上限がちょうど 1.0 になる)。
+   * 打ち消しは絵ごとに 1 つの倍率で、最も狭い字が全体を縛る = これを入れると要求の道の字も
+   * 戻せなくなる。
+   */
+  const 打ち消す字ら: 打ち消す字[] = 行ら.map((e) => ({
+    text: e.path,
+    size: API_PATH_SIZE,
+    帯: { 幅: bw - 32 - 64 - 16, 高さ: API_ROW_H },
+  }));
+  const 絵 = (倍率: number): JSX.Element => {
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    return (
     <g>
       <rect x={x + DROP_SHADOW_D} y={y + DROP_SHADOW_D} width={bw} height={bh} rx={10} fill={frame.stroke} opacity={0.2} stroke="none" />
       <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={10} fill="#1a2332" stroke={frame.stroke} strokeWidth={frame.strokeWidth} />
       <rect x={x} y={y} width={bw} height={36} rx={10} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none" />
-      <text x={cx} y={y + 24} fontSize={14} fontWeight={700} letterSpacing={3} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+      <text data-cdl-counter-scaled="0" x={cx} y={y + 24} fontSize={API_SIGN_SIZE} fontWeight={700} letterSpacing={3} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
         {字引("apiGateway.sign")}
       </text>
-      {[
-        { method: "GET", path: 字引("apiGateway.users"), color: "#27c93f" },
-        { method: "POST", path: 字引("apiGateway.orders"), color: "#e5c07b" },
-        { method: 字引("apiGateway.delete"), path: 字引("apiGateway.session"), color: "#c9302c" },
-      ].map((e, i) => (
+      {行ら.map((e, i) => (
         <g key={i} transform={`translate(${x + 16}, ${y + API_ROW_TOP + i * rowPitch})`}>
           <rect x={0} y={0} width={bw - 32} height={API_ROW_H} rx={4} fill="#0f1419" stroke="none" />
-          <rect x={0} y={0} width={54} height={API_ROW_H} rx={4} fill={e.color} stroke="none" />
-          <text x={27} y={16} fontSize={種類の字(e.method)} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
+          <rect x={0} y={0} width={API_METHOD_BOX_W} height={API_ROW_H} rx={4} fill={e.color} stroke="none" />
+          <text data-cdl-counter-scaled="0" x={27} y={16} fontSize={種類の字(e.method)} fontWeight={700} textAnchor="middle" fill="#ffffff" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace">
             {e.method}
           </text>
-          <text x={64} y={16} fontSize={12} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#e6edf3">
+          <text data-cdl-counter-scaled="1" x={64} y={16} fontSize={API_PATH_SIZE * 倍} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#e6edf3">
             {e.path}
           </text>
           <circle cx={bw - 44} cy={12} r={4} fill="#27c93f" stroke="none">
@@ -555,7 +587,8 @@ export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Ele
         </g>
       ))}
     </g>
-  );
+    );
+  };
   return (
     <g>
       {fitArt(r, 広がり, 絵)}