@cardenelabs/cdl 0.16.0 → 0.17.1

package/src/kinds/sequence-board-metrics.ts

@@ -0,0 +1,118 @@
+/**
+ * 時系列のやり取りの図の寸法 (#578)。
+ *
+ * **絵を描く側と、箱の大きさを決める側の両方が引く**。 前者は `sequence-board.tsx`、後者は
+ * `presets.ts` の `sequence()`。 別々に式を持つと、宣言した大きさと実際に描かれる絵がずれる。
+ *
+ * JSX を持たない module に置くのは `text-width.ts` と同じ理由 = 大きさを決めるだけの経路から
+ * React を引き込まない。
+ */
+import { textWidth } from "./text-width";
+
+/** 画布の縁 */
+export const SEQ_EDGE = 16;
+/** 段の送り。 他の 3 図の行 (56) と近い拍にする */
+export const SEQ_ROW = 64;
+/** 語の左の余白 */
+export const SEQ_GUTTER_PAD = 40;
+/** 語と最初の糸の間 */
+export const SEQ_GUTTER_GAP = 40;
+/** 頭の高さ = 名前 + 呼び名 + 横罫まで */
+export const SEQ_HEAD = 96;
+/** 横罫から 1 段目まで / 最終段から底まで */
+export const SEQ_ROW_PAD = 56;
+/** 列幅に足す余白 */
+export const SEQ_COL_PAD = 80;
+/** 動いている間の帯の幅 */
+export const SEQ_BAND_W = 52;
+/** 帯が段からはみ出す上下の余り */
+export const SEQ_BAND_PAD = 24;
+/** 名前の級 */
+export const SEQ_NAME = 24;
+/** 呼び名の級 */
+export const SEQ_SUB = 20;
+/** 言づての語の級 */
+export const SEQ_LABEL = 26;
+/** 出どころの点の半径 */
+export const SEQ_DOT = 7;
+/** 自分宛ての輪が右へ張り出す幅 */
+export const SEQ_SELF_W = 52;
+/** 列の最小幅。 名前が短い図でも糸が詰まりすぎない */
+export const SEQ_COL_MIN = 200;
+
+const g4 = (v: number): number => Math.round(v / 4) * 4;
+
+/**
+ * 段が進むと濃さが移るための、状態の名前 (#578)。
+ *
+ * **記号を落とす**。 `{名前}` の中で読めるのは `\w` だけ (`template-name.ts`) で、`-` を
+ * 含む名前は 1 度も置換されない = 濃さが動かないまま緑になる (実測)。
+ *
+ * 見本の側 (`withSteps` の `sets`) と描く側 (`sequenceStep`) が同じ名前を引く必要があるので、
+ * 導き方をここに置いて両方から呼ぶ。
+ *
+ * **図の id からは導かない**。 記法は id を書けず名前から導く規則を持つため、同じ図を
+ * 記法から書くと状態の名前だけがずれる (実測)。 図の中に順序図の箱は 1 つしか無く、状態は
+ * 図ごとに閉じているので、決め打ちで足りる。
+ */
+export function sequenceStepId(): string {
+  return "seq_step";
+}
+
+export type SequenceBoardActor = { name: string; subtitle?: string };
+export type SequenceBoardMessageKind = "call" | "return" | "fire";
+export type SequenceBoardMessage = {
+  label: string;
+  /** 出どころの面の番号 */
+  from: number;
+  /** 着き先の面の番号。 `from` と同じなら自分宛て */
+  to: number;
+  kind: SequenceBoardMessageKind;
+};
+/** 動いている間の帯。 段の番号で持つ (途中で手が空く面があるので区間の並び) */
+export type SequenceBoardBand = { actor: number; from: number; to: number };
+
+export type SequenceBoardData = {
+  actors: readonly SequenceBoardActor[];
+  messages: readonly SequenceBoardMessage[];
+  bands: readonly SequenceBoardBand[];
+};
+
+export type SequenceBoardMetrics = {
+  w: number;
+  h: number;
+  /** 語を置く左の桁の幅 = 最初の糸の x */
+  gutter: number;
+  colW: number;
+  /** 横罫の y */
+  headY: number;
+  /** 面 i の糸の x */
+  cx: (i: number) => number;
+  /** 段 i の y */
+  rowY: (i: number) => number;
+  /** 糸の下端 */
+  bottom: number;
+};
+
+/**
+ * 中身から寸法を出す。
+ *
+ * 幅は **語の桁 + 列 × 面の数**。 語を線の脇ではなく左の桁に置くので、線の長さが語の長さに
+ * 引きずられない = 面の数だけで横幅が決まる。
+ */
+export function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics {
+  const 名幅 = data.actors.map((a) =>
+    Math.max(textWidth(a.name, SEQ_NAME), a.subtitle ? textWidth(a.subtitle, SEQ_SUB) : 0),
+  );
+  const colW = g4(Math.max(SEQ_COL_MIN, Math.max(0, ...名幅) + SEQ_COL_PAD));
+  const 語幅 = Math.max(0, ...data.messages.map((m) => textWidth(m.label, SEQ_LABEL)));
+  const gutter = g4(SEQ_EDGE + SEQ_GUTTER_PAD + 語幅 + SEQ_GUTTER_GAP);
+  const headY = SEQ_EDGE + SEQ_HEAD;
+  const rowY = (i: number): number => headY + SEQ_ROW_PAD + i * SEQ_ROW;
+  const 最終 = data.messages.length > 0 ? rowY(data.messages.length - 1) : headY;
+  const bottom = 最終 + SEQ_ROW_PAD;
+  const cx = (i: number): number => gutter + colW / 2 + i * colW;
+  const w = g4(cx(Math.max(0, data.actors.length - 1)) + colW / 2 + SEQ_EDGE);
+  const h = g4(bottom + SEQ_EDGE);
+  return { w, h, gutter, colW, headY, cx, rowY, bottom };
+}

package/src/kinds/sequence-board.tsx

@@ -0,0 +1,297 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { interpolate } from "../render/utils";
+import {
+  SEQ_BAND_PAD,
+  SEQ_BAND_W,
+  SEQ_DOT,
+  SEQ_EDGE,
+  SEQ_GUTTER_PAD,
+  SEQ_LABEL,
+  SEQ_NAME,
+  SEQ_SELF_W,
+  SEQ_SUB,
+  sequenceBoardMetrics,
+  type SequenceBoardData,
+  type SequenceBoardMessage,
+} from "./sequence-board-metrics";
+
+/**
+ * 時系列のやり取りの図 (#578)。 **1 つの箱が図を丸ごと描く**。
+ *
+ * ## 骨格が他の 3 図と違う
+ *
+ * クラス図 / ER 図 / 状態遷移図は「箱 + 行 + 関係」 で、同じ描き手を共有できる。 ここだけは
+ * **縦が時間** で、箱を持たない。 図表の種別 (`gantt-timeline` / `funnel-stages` 等) と同じく、
+ * 中身の並びを 1 つの箱に持たせて内側の配置を自分で決める。
+ *
+ * ## 教科書の形を捨てた理由
+ *
+ * 3 版まで静止画として詰めた (教科書の縦形 / 参加者を増やして帯を塗る形 / 寿命線を捨てて左に
+ * 一覧を置く形)。 どれも違った。 骨格の選び方の問題ではなく、**時間を位置に畳んでいた** のが
+ * 原因だった。
+ *
+ * 足場 (縦の破線と帯) は言づてを引っ掛けるためだけに在る。 捨てて言づてを **行** にすると、
+ * 他の 3 図と同じ拍で読めるようになる。 引っ掛ける先が無くなった代わりに、出どころへ
+ * **源の点** を打った。
+ *
+ * ## 参加者の糸は残す
+ *
+ * 1 度捨てて失敗している = 縦の連なりは足場ではなく **その参加者を時間で追う手段** で、
+ * クラス図で言えば区切り線ではなく箱そのものに当たる。 抜いたら左の一覧が内容を全部持ち、
+ * 右が飾りになった。
+ */
+export function SequenceBoardNode({
+  node,
+  stateValues,
+}: {
+  node: LaidNode;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
+  const data: SequenceBoardData | undefined = node.sequenceData;
+  if (!data) return <g data-cdl-role="sequence-board" />;
+  const m = sequenceBoardMetrics(data);
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+
+  /*
+   * いま何番目の言づてを見ているか (#578)。
+   *
+   * 済んだ言づては薄く残り、今の 1 本だけが濃い。 全部同じ濃さで残すと、どこを見ているのか
+   * 判らなくなる = 動く意味が消える。
+   *
+   * **書かない図では全部を濃く出す**。 段を持たない使い方 (縮小見本 / 静止画) で薄い絵に
+   * なると、読み手には壊れて見える
+   */
+  const 現在 = (() => {
+    if (!node.sequenceStep) return null;
+    const v = Number.parseInt(interpolate(node.sequenceStep, stateValues ?? {}).trim(), 10);
+    return Number.isFinite(v) ? v : null;
+  })();
+  /*
+   * いまの言づての色 (#580)。
+   *
+   * **意味の 6 色とは別に持つ**。 `--cdl-tone-accent` は「呼び」 のような図の中の意味を
+   * 描き分ける色で、利用側が系統色から取ることがある (実測 = dragon は青)。 ここが指すのは
+   * 意味ではなく「いまどこか」 で、役割は強調した箱の枠と同じ = 利用側の主役色に揃うべき。
+   * 書かれていなければ従来どおり意味の色へ落ちる。
+   */
+  const 朱 = "var(--cdl-now, var(--cdl-tone-accent, #2d6a8f))";
+  /** 済んだ言づての色。 薄めるのではなく墨へ移すので、後からでも読める濃さを持つ */
+  const 墨 = "var(--cdl-text-2, #4a5162)";
+
+  /*
+   * 済んだ言づての落とし方 (#578、A + 墨)。
+   *
+   * **濃淡ではなく色で「今」 を示す**。 薄めて落とすと、済んだ分が読めなくなる = 図が
+   * 進むほど読める行が減る。 色を墨へ移せば濃さは落ちないので、朱は「いまどこか」 だけを指す。
+   *
+   * これから出る言づては描かない = 行き先が最初から見えていると、順に現れる意味が消える。
+   */
+  const 見た目 = (i: number): { opacity: number; color: string } => {
+    if (現在 === null) return { opacity: 1, color: 朱 };
+    if (i > 現在) return { opacity: 0, color: 朱 };
+    return i === 現在 ? { opacity: 1, color: 朱 } : { opacity: 1, color: 墨 };
+  };
+  return (
+    <g data-cdl-role="sequence-board" transform={`translate(${x} ${y})`}>
+      {/*
+        動いている間の帯。 止まっている間は伸びない = 途中で手が空く面はそこで切れる。
+
+        **段より先へは伸ばさない** (#578)。 最後まで描いてしまうと、まだ起きていない出番が
+        最初から見えて「上から下へ伸びる」 という動きの意味が消える。
+      */}
+      {data.bands.map((b, i) => {
+        if (現在 !== null && b.from > 現在) return null;
+        const 下 = 現在 === null ? b.to : Math.min(b.to, 現在);
+        return (
+          <rect
+            key={`band-${i}`}
+            data-cdl-role="sequence-band"
+            x={m.cx(b.actor) - SEQ_BAND_W / 2}
+            y={m.rowY(b.from) - SEQ_BAND_PAD / 2}
+            width={SEQ_BAND_W}
+            height={m.rowY(下) - m.rowY(b.from) + SEQ_BAND_PAD}
+            rx={4}
+            fill={朱}
+            fillOpacity={0.12}
+          />
+        );
+      })}
+      {/* 参加者の糸 */}
+      {data.actors.map((_, i) => (
+        <line
+          key={`thread-${i}`}
+          data-cdl-role="sequence-thread"
+          x1={m.cx(i)}
+          y1={m.headY}
+          x2={m.cx(i)}
+          y2={m.bottom}
+          stroke="var(--cdl-divider, #d4d4d8)"
+          strokeWidth={3}
+        />
+      ))}
+      {/* 頭。 名前と、その下に日本語の呼び名 */}
+      {data.actors.map((a, i) => (
+        <g key={`head-${i}`}>
+          <text
+            data-cdl-role="sequence-actor"
+            x={m.cx(i)}
+            y={SEQ_EDGE + 44}
+            fontSize={SEQ_NAME}
+            fontWeight={700}
+            textAnchor="middle"
+            fill="var(--cdl-text, #1a1f2a)"
+            style={{ fontFamily: "'JetBrains Mono', monospace" }}
+          >
+            {a.name}
+          </text>
+          {a.subtitle && (
+            <text
+              data-cdl-role="sequence-actor-subtitle"
+              x={m.cx(i)}
+              y={SEQ_EDGE + 76}
+              fontSize={SEQ_SUB}
+              textAnchor="middle"
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {a.subtitle}
+            </text>
+          )}
+        </g>
+      ))}
+      <line
+        data-cdl-role="sequence-rule"
+        x1={SEQ_EDGE}
+        y1={m.headY}
+        x2={m.w - SEQ_EDGE}
+        y2={m.headY}
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={2}
+      />
+      {data.messages.map((msg, i) => (
+        <SequenceRow key={`msg-${i}`} msg={msg} yy={m.rowY(i)} cx={m.cx} {...見た目(i)} />
+      ))}
+    </g>
+  );
+}
+
+/**
+ * 言づて 1 行。 左に語、右に矢。
+ *
+ * **矢の形で 3 種を分ける** = 呼ぶ (実線 + 塗った矢) はやらせて待つ、返す (破線 + 開いた矢) は
+ * 新しい仕事ではない、投げる (実線 + 開いた矢) は返事を待たない。
+ */
+function SequenceRow({
+  msg,
+  yy,
+  cx,
+  opacity,
+  color,
+}: {
+  msg: SequenceBoardMessage;
+  yy: number;
+  cx: (i: number) => number;
+  opacity: number;
+  color: string;
+}): JSX.Element {
+  const 破 = msg.kind === "return";
+  const 塗る = msg.kind === "call";
+  const 出 = cx(msg.from);
+  const 自分へ = msg.from === msg.to;
+  const dir = 自分へ ? 1 : Math.sign(cx(msg.to) - 出);
+  return (
+    <g data-cdl-role="sequence-message" data-cdl-message-kind={msg.kind} opacity={opacity}>
+      {/* 語は薄れさせない。 済んだ言づてでも「何が起きたか」 は読めたままにする */}
+      <text
+        data-cdl-role="sequence-label"
+        x={SEQ_EDGE + SEQ_GUTTER_PAD}
+        y={yy + 8}
+        fontSize={SEQ_LABEL}
+        fontWeight={500}
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {msg.label}
+      </text>
+      {自分へ ? (
+        // 自分宛て。 相手がいないので糸の右へ小さく回して戻る
+        <path
+          data-cdl-role="sequence-line"
+          d={`M ${出 + 10} ${yy - 16} H ${出 + SEQ_SELF_W - 16} Q ${出 + SEQ_SELF_W} ${yy - 16} ${出 + SEQ_SELF_W} ${yy} Q ${出 + SEQ_SELF_W} ${yy + 16} ${出 + SEQ_SELF_W - 16} ${yy + 16} H ${出 + 22}`}
+          fill="none"
+          stroke={color}
+          strokeWidth={2.5}
+          strokeLinecap="round"
+        />
+      ) : (
+        <path
+          data-cdl-role="sequence-line"
+          d={`M ${出 + dir * 12} ${yy} H ${cx(msg.to) - dir * 14}`}
+          fill="none"
+          stroke={color}
+          strokeWidth={2.5}
+          strokeLinecap="round"
+          strokeDasharray={破 ? "10 8" : undefined}
+        />
+      )}
+      <Arrow
+        x={自分へ ? 出 + 14 : cx(msg.to)}
+        y={自分へ ? yy + 16 : yy}
+        dir={自分へ ? -1 : dir}
+        filled={塗る}
+        color={color}
+      />
+      {/* 出どころの点。 帯の縁に引っ掛ける代わりに、糸へ直に打つ */}
+      <circle
+        data-cdl-role="sequence-source"
+        cx={出}
+        cy={自分へ ? yy - 16 : yy}
+        r={SEQ_DOT}
+        fill={color}
+      />
+    </g>
+  );
+}
+
+/** 着き先の矢。 塗ると「やらせて待つ」、閉じないと「待たない」 */
+function Arrow({
+  x,
+  y,
+  dir,
+  filled,
+  color,
+}: {
+  x: number;
+  y: number;
+  dir: number;
+  filled: boolean;
+  color: string;
+}): JSX.Element {
+  // A 案の寸法 (丈 9 / 半 4.14 の 2 倍)。 閉じた矢を細く長く取り、塊に見せない
+  const 丈 = 18;
+  const 半 = 8.5;
+  const 先 = x;
+  const 胴 = x - dir * 丈;
+  return filled ? (
+    <path
+      data-cdl-role="sequence-head"
+      data-cdl-head-fill="solid"
+      d={`M ${先} ${y} L ${胴} ${y - 半} L ${胴} ${y + 半} Z`}
+      fill={color}
+      stroke={color}
+      strokeWidth={3}
+      strokeLinejoin="round"
+    />
+  ) : (
+    <path
+      data-cdl-role="sequence-head"
+      data-cdl-head-fill="open"
+      d={`M ${胴} ${y - 半} L ${先} ${y} L ${胴} ${y + 半}`}
+      fill="none"
+      stroke={color}
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+}

package/src/kinds/storage.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import type { LaidNode } from "../types";
+import type { LaidNode, RowMark } from "../types";
 import { nodeAccent } from "./node-tone";
 import { titlePlacement } from "./compact-title";
 import {
@@ -7,6 +7,8 @@ import {
   ROW_TOP_STORAGE,
   STORAGE_ROW_DIVIDER_Y,
   STORAGE_TITLE_BASELINE,
+  STORAGE_TITLE_FONT,
+  SUBTITLE_ROW_SHIFT,
   rowBaselineY,
   rowGlyphDepth,
 } from "../layout/spec";
@@ -18,6 +20,70 @@ import {
   splitRow,
 } from "./row-align";
 
+/**
+ * 行頭の印の半辺 (world)。 名前の級 (26) のおよそ半分に収まる大きさ。
+ *
+ * 大きくすると名前と競い、小さくすると塗りと中空の違いが読めなくなる。
+ */
+const ROW_GLYPH_HALF = 7;
+
+/** 印の中心 x = 左の余白 + 半辺 + 1。 印の左端が名前の左端より外へ出ない範囲で内側に置く */
+const ROW_GLYPH_CX = ROW_PAD_X_PX + ROW_GLYPH_HALF + 1;
+
+/**
+ * 印の右端から名前の左端まで。 印と名前が触れず、かつ名前の頭が揃って見える幅。
+ *
+ * 名前の x は `ROW_PAD_X_PX + ROW_GLYPH_LEAD` で、印の有無で変わる **唯一の水平位置**。
+ */
+const ROW_GLYPH_LEAD = 40;
+
+/** 印を持つ行の型の級。 名前 (26) より 1 段落とし、色も薄くして名前を先に読ませる */
+const ROW_TYPE_FONT = 22;
+
+/** 印の中心を baseline からどれだけ上へ置くか。 級の 1/3 が字の見た目の中心 */
+const ROW_GLYPH_RISE = 8;
+
+/**
+ * 題の下に置く呼び名の baseline (#578)。
+ *
+ * 題 (78) と 1 行目 (130) の間。 印で分ける箱では区切り線を引かないので、その分の余白が空く。
+ * ER の表名や状態の名前は識別子なので、その下に日本語の呼び名を薄く添える。
+ */
+const SUBTITLE_BASELINE = 118;
+
+/** 呼び名の級。 行の名前 (26) より小さく、型 (24) と同じ */
+const SUBTITLE_FONT = 20;
+
+/** 主キーの下線を名前の baseline からどれだけ下に引くか */
+const UNDERLINE_DROP = 7;
+
+
+/**
+ * 行頭の印 1 つ (#578)。 四角か山形か × 塗るか中空か の 2 軸で 4 通り。
+ *
+ * 原点は **字の見た目の中心**。 baseline から級の 1/3 上に置くと、名前の高さと揃う。
+ *
+ * 山形は右を向く = 「外を向く」 側の軸をそのまま形にしてある (振る舞い / 外部キー /
+ * 出入りの瞬間)。 四角は閉じた形で「自分の中」 を表す。
+ */
+function RowGlyph({ mark, x, y, color }: { mark: RowMark; x: number; y: number; color: string }): JSX.Element {
+  const 半 = ROW_GLYPH_HALF;
+  const d = mark.shape === "square"
+    ? `M ${x - 半} ${y - 半} H ${x + 半} V ${y + 半} H ${x - 半} Z`
+    : `M ${x - 半} ${y - 半} L ${x + 半} ${y} L ${x - 半} ${y + 半} Z`;
+  return (
+    <path
+      data-cdl-role="node-row-glyph"
+      data-cdl-row-glyph={`${mark.shape}-${mark.filled ? "filled" : "hollow"}`}
+      d={d}
+      fill={mark.filled ? color : "var(--cdl-node-fill, #ffffff)"}
+      stroke={color}
+      strokeWidth={mark.filled ? 0 : 2.4}
+      strokeLinejoin="round"
+    />
+  );
+}
+
 export function StorageNode({
   node,
   active,
@@ -33,7 +99,7 @@ export function StorageNode({
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
   // 小型の箱では名前を中央に置く。 固定の位置のままだと下端をまたぐ (#416)
-  const 名前 = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: 22 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const 名前 = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: STORAGE_TITLE_FONT }, { hasEyebrow: Boolean(node.eyebrow) });
   // 全 row を delimiter (`:` / ` = ` / ` → ` / ` -> `) で left / right に分割し、
   // left 列 max 文字数を算出 → 右列の固定 x 位置を決める (DB table / UML class box 風)。
   // 結果として全 row の右列開始 x が揃い、 区切り線がガタつかなくなる。
@@ -56,6 +122,22 @@ export function StorageNode({
   // 縦線の下端 = 最終行の字形の下端。 箱の下端まで伸ばすと、 行が終わった後の余白に線だけが残る。
   // 同時に箱より下へも出さない = 行数と箱の高さは独立に決まるため、 行が多い図や高さを明示した
   // 図では最終行が箱の外に来る
+  /**
+   * 行頭の印で群を分ける形か (#578)。
+   *
+   * **印と区切り線は同じ役目**なので、両方は引かない。 印がある図では線を引かず、
+   * 名前を印の右へ、型を箱の右端へ薄く右揃えで置く。
+   */
+  /*
+   * 行頭の印で群を分ける形か (#578)。
+   *
+   * **欄があるかどうかで見る** = 行を持たない箱 (状態遷移図の `Draft` のように題と呼び名
+   * しか無いもの) でも、空の配列を書けば設計の意匠で描く。 長さで見ると、その箱だけ
+   * 従来の書き方に落ちて呼び名が消える (実測)。
+   */
+  const 印で分ける = node.rowMarks !== undefined;
+  // 呼び名を出す箱では行の群を下げる。 高さの計算 (`autoStorageHeight`) も同じ値を足す
+  const 行の下げ = 印で分ける && node.subtitle ? SUBTITLE_ROW_SHIFT : 0;
   const lastRowBottom = Math.min(
     ROW_TOP_STORAGE + (rows.length - 1) * ROW_PITCH_STORAGE + (rowGlyphDepth("storage") ?? 0),
     node.h - ROW_PAD_X_PX,
@@ -78,6 +160,19 @@ export function StorageNode({
           {node.eyebrow}
         </text>
       )}
+      {印で分ける && node.subtitle && (
+        // 呼び名は **印で分ける箱でだけ** 出す (#578)。 従来の箱は題の下に区切り線が来るので
+        // 置き場が無い
+        <text
+          data-cdl-role="node-subtitle"
+          x={ROW_PAD_X_PX}
+          y={SUBTITLE_BASELINE}
+          fontSize={SUBTITLE_FONT}
+          fill="var(--cdl-text-dim, #5a6270)"
+        >
+          {node.subtitle}
+        </text>
+      )}
       <text
         data-cdl-role="node-label"
         x={名前.x}
@@ -113,7 +208,7 @@ export function StorageNode({
         `data-cdl-role` を付けるのは、 consumer が theme ごとに色を当てられるようにするため。
         役割が無い要素には CSS が届かず、 変数を上書きする経路しか残らない。
       */}
-      {rows.length > 0 && (
+      {rows.length > 0 && !印で分ける && (
         <line
           data-cdl-role="node-row-divider"
           x1={26}
@@ -124,7 +219,7 @@ export function StorageNode({
           strokeWidth={1.25}
         />
       )}
-      {rows.length > 0 && hasRightColumn && columnDividerFits && (
+      {rows.length > 0 && hasRightColumn && columnDividerFits && !印で分ける && (
         <line
           data-cdl-role="node-column-divider"
           x1={columnDividerX}
@@ -142,7 +237,27 @@ export function StorageNode({
         // 右列を「左 anchor」 で配置する点が重要 (旧実装は node.w-26 への右 anchor で、 row 毎の
         // 値長差により視覚的に区切り線が不揃いに見える問題があった)。
         return (
-          <g key={idx} transform={`translate(0 ${rowBaselineY("storage", idx)})`}>
+          <g key={idx} transform={`translate(0 ${(rowBaselineY("storage", idx) ?? 0) + 行の下げ})`}>
+            {印で分ける && node.rowMarks?.[idx] != null && (
+              <RowGlyph
+                mark={node.rowMarks[idx]}
+                x={ROW_GLYPH_CX}
+                y={-ROW_GLYPH_RISE}
+                color="var(--cdl-text, #1a1f2a)"
+              />
+            )}
+            {印で分ける && node.rowMarks?.[idx]?.underline === true && (
+              // 主キーの下線 (#578)。 印の 2 軸とは別の段に載るので、外部キーの山形と重ねられる
+              <line
+                data-cdl-role="node-row-underline"
+                x1={ROW_PAD_X_PX + ROW_GLYPH_LEAD}
+                y1={UNDERLINE_DROP}
+                x2={ROW_PAD_X_PX + ROW_GLYPH_LEAD + displayWidth(s.left) * STORAGE_CHAR_ADVANCE_PX}
+                y2={UNDERLINE_DROP}
+                stroke="var(--cdl-text, #1a1f2a)"
+                strokeWidth={2}
+              />
+            )}
             {/*
               左列も等幅で描く。 列の X は「文字数 × 1 文字の送り幅」 で決めており
               (`STORAGE_CHAR_ADVANCE_PX`)、 その計算は等幅を前提にしている。 左列だけ字幅の違う
@@ -152,22 +267,34 @@ export function StorageNode({
             <text
               data-cdl-role="node-row"
               data-cdl-row-index={idx}
-              x={ROW_PAD_X_PX}
+              x={印で分ける ? ROW_PAD_X_PX + ROW_GLYPH_LEAD : ROW_PAD_X_PX}
               fontSize={26}
-              fontWeight={600}
+              fontWeight={印で分ける ? 500 : 600}
               fill="var(--cdl-text, #1a1f2a)"
               style={{ fontFamily: "'JetBrains Mono', monospace" }}
             >
               {s.left}
             </text>
+            {/*
+              型は **読み手が探すものではない**ので、右端で揃えて薄く引く。 名前の右に続けて
+              置くと、名前と型のどちらを読んでいるかが行ごとに変わる (#578)。
+            */}
             <text
               data-cdl-role="node-row"
               data-cdl-row-index={idx}
-              x={rightColX}
-              fontSize={26}
-              fontWeight={highlightRows ? 700 : 600}
-              textAnchor="start"
-              fill={highlightRows ? accent : "var(--cdl-text, #1a1f2a)"}
+              x={印で分ける ? node.w - ROW_PAD_X_PX : rightColX}
+              fontSize={印で分ける ? ROW_TYPE_FONT : 26}
+              fontWeight={印で分ける ? 500 : highlightRows ? 700 : 600}
+              textAnchor={印で分ける ? "end" : "start"}
+              // 印を持つ行の右列は **型** で、値ではない。 段が進むたびに型が光ると、読み手は
+              // そこに変化があったと読む。 光らせるのは値を持つ従来の行だけにする (#578)
+              fill={
+                印で分ける
+                  ? "var(--cdl-text-dim, #5a6270)"
+                  : highlightRows
+                    ? accent
+                    : "var(--cdl-text, #1a1f2a)"
+              }
               style={{ fontFamily: "'JetBrains Mono', monospace" }}
             >
               {s.right}