@cardenelabs/cdl 0.16.0 → 0.17.0

package/src/render/edge-head.ts

@@ -1,4 +1,4 @@
-import { EDGE_HEAD_DEFAULT, type EdgeHead } from "../types";
+import { EDGE_HEAD_DEFAULT, EDGE_HEAD_FILL_DEFAULT, type EdgeHead, type EdgeHeadFill } from "../types";
 
 /**
  * 関係の端の形の **描き方と marker の名前** (SSOT、 #560)。
@@ -9,10 +9,25 @@ import { EDGE_HEAD_DEFAULT, type EdgeHead } from "../types";
  */
 
 export type EdgeHeadShape = {
-  /** 10x10 の viewBox に描く path */
+  /** viewBox に描く path。 空文字は「何も描かない」 (`"none"`) */
   d: string;
+  /**
+   * 描く枠 (既定 `10 × 10`)。 ER の端は 2 つの記号が並ぶので横長になる (#578)。
+   *
+   * 枠の縦を 10 に揃えてあるので、 marker の大きさは横だけが `w / 10` 倍で伸びる =
+   * 線の太さに対する印の高さが形によって変わらない。
+   */
+  w: number;
+  h: number;
   /** path の端のどこを線の先端に合わせるか */
   refX: number;
+  /**
+   * 印の大きさの倍率 (既定 1)。
+   *
+   * ER の端は 2 つの記号が並ぶので、他の形と同じ高さだと 1 つあたりが半分になって
+   * 棒と丸が見分けられない。 形ごとに読める大きさが違うので、形が倍率を持つ。
+   */
+  scale?: number;
   /** 塗るか。 塗らない形は線で描く */
   filled: boolean;
 };
@@ -27,10 +42,29 @@ export type EdgeHeadShape = {
  * 9 にすると開いた側が箱から 1 だけ浮く。
  */
 export const EDGE_HEAD_SHAPE: Record<EdgeHead, EdgeHeadShape> = {
-  triangle: { d: "M 0 0 L 10 5 L 0 10 z", refX: 9, filled: true },
-  diamond: { d: "M 0 5 L 5 0 L 10 5 L 5 10 z", refX: 9, filled: true },
-  open: { d: "M 1 0 L 9 5 L 1 10", refX: 9, filled: false },
-  crow: { d: "M 10 0 L 0 5 M 10 5 L 0 5 M 10 10 L 0 5", refX: 10, filled: false },
+  // 何も描かない端。 marker 自体を出さないので `d` は読まれない
+  none: { d: "", w: 10, h: 10, refX: 0, filled: false },
+  triangle: { d: "M 0 0 L 10 5 L 0 10 z", w: 10, h: 10, refX: 9, filled: true },
+  diamond: { d: "M 0 5 L 5 0 L 10 5 L 5 10 z", w: 10, h: 10, refX: 9, filled: true },
+  open: { d: "M 1 0 L 9 5 L 1 10", w: 10, h: 10, refX: 9, filled: false },
+  crow: { d: "M 10 0 L 0 5 M 10 5 L 0 5 M 10 10 L 0 5", w: 10, h: 10, refX: 10, filled: false },
+  // ER の端。 **箱に近い側 (x が大きい側) が個数、その外側が任意か** (#578)。
+  //
+  // 枠は 24 × 10 で、線の先端に合わせるのは x=24 = 箱の縁。 marker は経路の向きに回るので、
+  // 行き先側でも出どころ側でも「箱に近い側」 が同じ端になる。
+  //
+  // 三又の真ん中の枝は **関係の線そのもの** が兼ねる。 別に引くと同じ所に 2 本重なって太く見える
+  one: { d: "M 16 0 L 16 10 M 4 0 L 4 10", w: 24, h: 10, refX: 24, scale: 1.8, filled: false },
+  "zero-one": { d: "M 16 0 L 16 10 M 7 5 a 3 3 0 1 0 -6 0 a 3 3 0 1 0 6 0", w: 24, h: 10, refX: 24, scale: 1.8, filled: false },
+  many: { d: "M 24 0 L 13 5 L 24 10 M 4 0 L 4 10", w: 24, h: 10, refX: 24, scale: 1.8, filled: false },
+  "zero-many": {
+    d: "M 24 0 L 13 5 L 24 10 M 7 5 a 3 3 0 1 0 -6 0 a 3 3 0 1 0 6 0",
+    w: 24,
+    h: 10,
+    refX: 24,
+    scale: 1.8,
+    filled: false,
+  },
 };
 
 /**
@@ -39,7 +73,37 @@ export const EDGE_HEAD_SHAPE: Record<EdgeHead, EdgeHeadShape> = {
  * **既定の形は名前を変えない** (`cdl-arrow-<tone>` / `cdl-arrow-<tone>-sm`)。
  * 端の形を書いていない図はすべて既定なので、名前が変わると全図の矢頭が差し替わる。
  */
-export function edgeHeadMarkerId(tone: string, head: EdgeHead, small: boolean): string {
+export function edgeHeadMarkerId(
+  tone: string,
+  head: EdgeHead,
+  small: boolean,
+  fill: EdgeHeadFill = EDGE_HEAD_FILL_DEFAULT,
+): string {
   const 小 = small ? "-sm" : "";
-  return head === EDGE_HEAD_DEFAULT ? `cdl-arrow-${tone}${小}` : `cdl-arrow-${tone}-${head}${小}`;
+  // 塗り方は **効く形だけ** 名前に出す。 元から輪郭しか無い形 (開いた矢 / 三又) で名前を
+  // 分けると、中身の同じ marker が 2 つできる
+  const 塗 = fill === EDGE_HEAD_FILL_DEFAULT || !EDGE_HEAD_SHAPE[head].filled ? "" : `-${fill}`;
+  return head === EDGE_HEAD_DEFAULT && 塗 === ""
+    ? `cdl-arrow-${tone}${小}`
+    : `cdl-arrow-${tone}-${head}${塗}${小}`;
+}
+
+/**
+ * marker を 1 つ描くのに要る 4 つ。 定義側 (`render/stage.tsx`) が引く。
+ *
+ * **塗り方で色の当て方が入れ替わる**。 塗る形は面に色を置いて線を持たず、白抜きは面を紙の色に
+ * して輪郭に色を置く。 面を `"none"` にすると線が印の中を素通りして見えるので、白抜きでも
+ * 面は塗る (色が紙になるだけ)。
+ */
+export function edgeHeadPaint(
+  head: EdgeHead,
+  fill: EdgeHeadFill,
+  color: string,
+): { fill: string; stroke: string; strokeWidth?: number } {
+  const 形 = EDGE_HEAD_SHAPE[head];
+  if (!形.filled) return { fill: "none", stroke: color, strokeWidth: 1.6 };
+  if (fill === "hollow") {
+    return { fill: "var(--cdl-node-fill, #ffffff)", stroke: color, strokeWidth: 1.4 };
+  }
+  return { fill: color, stroke: "none" };
 }

package/src/render/edges.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import { EDGE_HEAD_DEFAULT, type LaidEdge } from "../types";
+import { EDGE_HEAD_DEFAULT, EDGE_HEAD_FILL_DEFAULT, type LaidEdge } from "../types";
 import { edgeHeadMarkerId } from "./edge-head";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { hasTone, toneColor } from "./tone";
@@ -45,9 +45,18 @@ export function CdlEdgeView({
   // その色なら 0.9 で 4.51-4.92 と 4.5:1 を満たす (0.8 では 3.69-4.04 で届かない)。
   // 実線と点線で同じ組を使い、 光らせた側が薄くなる逆転を作らない。
   // 端の形は線の種類と別の軸 (#560)。 書かなければ既定の塗った三角で、名前も従来のまま
-  const marker = hasTone(edge.tone)
-    ? edgeHeadMarkerId(edge.tone, edge.head ?? EDGE_HEAD_DEFAULT, !active)
-    : "cdl-arrow-muted";
+  const 端の名前 = (h: typeof edge.head, f: typeof edge.headFill): string | undefined => {
+    const 形 = h ?? EDGE_HEAD_DEFAULT;
+    // 何も描かない端は marker を持たない (#578)。 参照すると解決できない url が残る
+    if (形 === "none") return undefined;
+    return hasTone(edge.tone)
+      ? edgeHeadMarkerId(edge.tone, 形, !active, f ?? EDGE_HEAD_FILL_DEFAULT)
+      : "cdl-arrow-muted";
+  };
+  const marker = 端の名前(edge.head, edge.headFill);
+  // 出どころ側の印 (#578)。 marker は経路の向きに従って回るので、始点に置いた印は
+  // 自動で外向きになる (`orient="auto-start-reverse"`)。 書かない図では端が無い
+  const tailMarker = edge.tailHead === undefined ? undefined : 端の名前(edge.tailHead, edge.tailHeadFill);
 
   const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";
@@ -100,6 +109,8 @@ export function CdlEdgeView({
           progress={progress}
           color={color}
           marker={marker}
+          tailMarker={tailMarker}
+          dashed={style === "dashed"}
           stateValues={stateValues}
         />
       )}
@@ -129,13 +140,17 @@ function SolidEdgePath({
   progress,
   color,
   marker,
+  tailMarker,
+  dashed,
   stateValues,
 }: {
   edge: LaidEdge;
   active: boolean;
   progress: number;
   color: string;
-  marker: string;
+  marker: string | undefined;
+  tailMarker: string | undefined;
+  dashed: boolean;
   stateValues?: Record<string, string>;
 }): JSX.Element {
   const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
@@ -151,9 +166,14 @@ function SolidEdgePath({
     ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0)
     : undefined;
   // dashoffset は dasharray 前提、 signal 経由の流れる線を出したい時は "6 6" 等
-  const dashArray = active
-    ? boundDashOffset !== undefined ? "8 6" : undefined
-    : "4 5";
+  // 刻みは 2 つの役目を持つ。 光っていないことの合図 (`"solid"` の光っていない側) と、
+  // 線の種類そのもの (`"dashed"`)。 **後者は光っても刻みのまま**にする = 意味を持つ刻みが
+  // 光った瞬間に消えると、その関係だけ種類が変わって見える (#578)
+  const dashArray = dashed
+    ? "10 8"
+    : active
+      ? boundDashOffset !== undefined ? "8 6" : undefined
+      : "4 5";
   return (
     <path
       data-cdl-role="edge-line"
@@ -165,7 +185,8 @@ function SolidEdgePath({
       strokeDasharray={dashArray}
       strokeDashoffset={boundDashOffset}
       strokeLinecap="round"
-      markerEnd={`url(#${marker})`}
+      markerEnd={marker === undefined ? undefined : `url(#${marker})`}
+      markerStart={tailMarker === undefined ? undefined : `url(#${tailMarker})`}
       style={{
         transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
       }}

package/src/render/nodes.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import { ActorNode } from "../kinds/actor";
 import { CardNode } from "../kinds/card";
+import { SequenceBoardNode } from "../kinds/sequence-board";
 import { EventNode } from "../kinds/event";
 import { FunctionNode } from "../kinds/function";
 import { StorageNode } from "../kinds/storage";
@@ -161,6 +162,9 @@ export function CdlNodeView({
         return <EventNode node={resolvedNode} active={active} progress={progress} />;
       case "card":
         return <CardNode node={resolvedNode} active={active} />;
+      // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
+      case "sequence-board":
+        return <SequenceBoardNode node={resolvedNode} stateValues={stateValues} />;
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。

package/src/render/stage.tsx

@@ -1,9 +1,9 @@
 import { useMemo, type JSX } from "react";
-import { EDGE_HEADS, type CdlPhase, type LaidDiagram } from "../types";
+import { EDGE_HEADS, EDGE_HEAD_FILLS, EDGE_HEAD_FILL_DEFAULT, type CdlPhase, type LaidDiagram } from "../types";
 import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeLabelView } from "./edges";
 import { CdlNodeView } from "./nodes";
 import { TONE, TONE_HEX } from "./tone";
-import { EDGE_HEAD_SHAPE, edgeHeadMarkerId } from "./edge-head";
+import { EDGE_HEAD_SHAPE, edgeHeadMarkerId, edgeHeadPaint } from "./edge-head";
 import { buildDiagramAltText } from "../layout/spec";
 import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
 import { 描く進みに直す } from "../kinds/draw-ratio";
@@ -103,33 +103,44 @@ export function CdlStage({
               (Issue の制約 = 色だけを足す)。 */}
           {Object.entries(TONE).flatMap(([tone, color]) =>
             ([["", 14], ["-sm", 10]] as const).flatMap(([suffix, size]) =>
-              EDGE_HEADS.map((head) => {
-                const 形 = EDGE_HEAD_SHAPE[head];
-                return (
-                  <marker
-                    key={`${tone}${suffix}-${head}`}
-                    id={edgeHeadMarkerId(tone, head, suffix === "-sm")}
-                    viewBox="0 0 10 10"
-                    refX={形.refX}
-                    refY="5"
-                    markerWidth={size}
-                    markerHeight={size}
-                    markerUnits="userSpaceOnUse"
-                    orient="auto-start-reverse"
-                  >
-                    <path
-                      data-cdl-role="edge-arrowhead"
-                      data-cdl-edge-head={head}
-                      d={形.d}
-                      fill={形.filled ? color : "none"}
-                      stroke={形.filled ? "none" : color}
-                      strokeWidth={形.filled ? undefined : 1.6}
-                      strokeLinecap={形.filled ? undefined : "round"}
-                      strokeLinejoin={形.filled ? undefined : "round"}
-                    />
-                  </marker>
-                );
-              }),
+              EDGE_HEADS.flatMap((head) =>
+                // 塗り方は形と別の軸 (#578)。 塗らない形では 2 つが同じ名前に畳まれるので、
+                // `edgeHeadMarkerId` が返す名前で重複を外す
+                EDGE_HEAD_FILLS.map((fill) => {
+                  const 形 = EDGE_HEAD_SHAPE[head];
+                  const id = edgeHeadMarkerId(tone, head, suffix === "-sm", fill);
+                  // 何も描かない端は marker を定義しない (#578)。 線側も参照しない
+                  if (形.d === "") return null;
+                  if (fill !== EDGE_HEAD_FILL_DEFAULT && !形.filled) return null;
+                  const 塗 = edgeHeadPaint(head, fill, color);
+                  return (
+                    <marker
+                      key={id}
+                      id={id}
+                      viewBox={`0 0 ${形.w} ${形.h}`}
+                      refX={形.refX}
+                      refY={形.h / 2}
+                      // 枠の縦を 10 に揃えてあるので、横だけが形の比で伸びる
+                      markerWidth={(size * (形.scale ?? 1) * 形.w) / 形.h}
+                      markerHeight={size * (形.scale ?? 1)}
+                      markerUnits="userSpaceOnUse"
+                      orient="auto-start-reverse"
+                    >
+                      <path
+                        data-cdl-role="edge-arrowhead"
+                        data-cdl-edge-head={head}
+                        data-cdl-edge-head-fill={fill}
+                        d={形.d}
+                        fill={塗.fill}
+                        stroke={塗.stroke}
+                        strokeWidth={塗.strokeWidth}
+                        strokeLinecap={塗.strokeWidth === undefined ? undefined : "round"}
+                        strokeLinejoin={塗.strokeWidth === undefined ? undefined : "round"}
+                      />
+                    </marker>
+                  );
+                }),
+              ),
             ),
           )}
           {/* tone が TONE 定義に無い edge の受け皿。 visual-validate の tone-marker-ref 軸が

package/src/render/template-fields.ts

@@ -12,7 +12,7 @@ import type { CdlNode } from "../types";
  */
 
 /** `{名前}` を読む文字の欄 */
-const TEXT_FIELDS = ["title", "eyebrow", "subtitle", "value", "wBind", "hBind", "visibleIf"] as const;
+const TEXT_FIELDS = ["title", "eyebrow", "subtitle", "value", "wBind", "hBind", "visibleIf", "sequenceStep"] as const;
 
 /** `{名前}` を読む文字の並びの欄 */
 const LIST_FIELDS = ["rows"] as const;
@@ -58,7 +58,11 @@ type 読まない欄 =
   | "funnelData"
   | "quadrantData"
   | "treeData"
-  | "journeyData";
+  | "journeyData"
+  // 行頭の印 (#578)。 字ではなく形なので、状態から値を差し込む対象にならない
+  | "rowMarks"
+  // 時系列のやり取りの中身 (#578)。 種別が内側で解決するので、ここでは差し込まない
+  | "sequenceData";
 
 type 列挙した欄 =
   | (typeof TEXT_FIELDS)[number]

package/src/types.ts

@@ -1,3 +1,19 @@
+import type {
+  SequenceBoardActor,
+  SequenceBoardBand,
+  SequenceBoardData,
+  SequenceBoardMessage,
+  SequenceBoardMessageKind,
+} from "./kinds/sequence-board-metrics";
+
+export type {
+  SequenceBoardActor,
+  SequenceBoardBand,
+  SequenceBoardData,
+  SequenceBoardMessage,
+  SequenceBoardMessageKind,
+};
+
 /** 意味付きの色の名前。 検査・描画・test はこの 1 つの列を出所にする。 */
 export const TONES = ["accent", "teal", "success", "error", "warning", "info"] as const;
 
@@ -97,6 +113,8 @@ export const NODE_KINDS = [
   // 流れの始まりと終わりの印 2 種 (#560) ... 塗った丸と輪で囲んだ丸。
   // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
   "mark-start", "mark-end",
+  // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
+  "sequence-board",
 ] as const;
 
 export type NodeKind = (typeof NODE_KINDS)[number];
@@ -108,28 +126,125 @@ export type Side = "top" | "right" | "bottom" | "left";
  * - "solid" (default) ... 実線 + 矢頭、 inactive は dashed grey
  * - "dotted-flow" ... 点線 + active phase で粒子が path 沿いに流れる。
  *   path が経由 node を貫通する場合は自動で粒子が node 中心を貫通する動きに切替。
+ * - "dashed" ... 刻んだ線。 **光っていても刻みのまま**。
+ *
+ * `"dashed"` が要るのは、`"solid"` の刻みが「光っていない」 を表す合図に使われているため。
+ * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「満たす」 と「使う」、
+ * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
-export type EdgeStyle = "solid" | "dotted-flow";
+export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+
+/**
+ * 線の種類の全種 (#578)。 **型だけでなく実体を持つ**。
+ *
+ * 利用側 (dragon の記法) は受理する語を手で並べており、種類を足した時に取り残されていた
+ * (実測 = `dashed` を足した後、記法に書くと「線種が読めません」 で落ちた)。 一覧をここから
+ * 導けば、足した時点で書けるようになる。
+ */
+export const EDGE_STYLES: readonly EdgeStyle[] = ["solid", "dotted-flow", "dashed"];
 
 /**
  * 関係の **端の形** (#560)。 線の種類 (`EdgeStyle`) とは別の軸で、線の先端に何を置くかを決める。
  *
+ * - `"none"` ... 何も描かない。 **端の 1 つに印を置かない関係** に使う (#578)
  * - `"triangle"` ... 塗った三角。 **既定**。 書かなければこれになる
  * - `"diamond"` ... 塗った菱。 「持っている」 側を指す
  * - `"open"` ... 閉じない 2 本の腕。 向きだけを示し、待たない
  * - `"crow"` ... 三又。 「多」 を示す (ER の鳥の足)
  *
+ * ER の端は **2 つの記号が重なってできている** (#578)。 箱に近い側が個数 (棒 = 1 /
+ * 三又 = 多)、その外側が任意か (棒 = 必須 / 丸 = 任意)。 2 × 2 の 4 通りを 1 つの形として持つ。
+ *
+ * - `"one"` ... 棒が 2 本。 ちょうど 1 つ
+ * - `"zero-one"` ... 棒に丸。 1 つ、または無い
+ * - `"many"` ... 三又に棒。 少なくとも 1 つ
+ * - `"zero-many"` ... 三又に丸。 いくつでも、無くてもよい
+ *
+ * 4 通りを 2 つの欄に分けないのは、**端の印は 1 つの記号として読まれる**ため。 欄を分けると
+ * 片方だけ書いた形 (個数はあるが任意かが無い) を許すことになり、描けない組み合わせが増える。
+ *
  * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
  * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
  * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
  */
-export type EdgeHead = "triangle" | "diamond" | "open" | "crow";
+export type EdgeHead =
+  | "none"
+  | "triangle"
+  | "diamond"
+  | "open"
+  | "crow"
+  | "one"
+  | "zero-one"
+  | "many"
+  | "zero-many";
 
 /** 書かなかった時の端の形。 既存の図はすべてこれで描かれている */
 export const EDGE_HEAD_DEFAULT: EdgeHead = "triangle";
 
 /** 端の形の全種。 marker の定義と検査の走査がこの並びを引く (書き写すとずれる) */
-export const EDGE_HEADS: readonly EdgeHead[] = ["triangle", "diamond", "open", "crow"];
+export const EDGE_HEADS: readonly EdgeHead[] = [
+  "none",
+  "triangle",
+  "diamond",
+  "open",
+  "crow",
+  "one",
+  "zero-one",
+  "many",
+  "zero-many",
+];
+
+/**
+ * 端の印の **塗り方** (#578)。 形 (`EdgeHead`) とは別の軸。
+ *
+ * - `"solid"` ... 墨で塗る。 **既定**。 書かなければ形ごとの既定 (`EDGE_HEAD_SHAPE.filled`) に従う
+ * - `"hollow"` ... 紙の色で塗り、輪郭だけを線で描く
+ *
+ * UML は同じ形を塗りで分ける = 白抜きの菱が「持つ」、塗った菱が「抱える」 (命が同じ)。
+ * 形を増やして表そうとすると、塗りの軸を持つ全ての形について語が倍になる。
+ *
+ * 塗らない形 (`"open"` / `"crow"`) には効かない。 元から輪郭しか無いため。
+ */
+export type EdgeHeadFill = "solid" | "hollow";
+
+/** 書かなかった時の塗り方 */
+export const EDGE_HEAD_FILL_DEFAULT: EdgeHeadFill = "solid";
+
+/** 塗り方の全種。 marker の定義と検査の走査がこの並びを引く */
+export const EDGE_HEAD_FILLS: readonly EdgeHeadFill[] = ["solid", "hollow"];
+
+/**
+ * 行き先と出どころの **両端に印を置ける** (#578)。
+ *
+ * `head` が行き先、`tailHead` が出どころ。 どちらも `"none"` を書けばその端には何も描かない。
+ *
+ * 側が種類で割れるのが要点。 三角は「この先が親」 を指すので行き先に立ち、菱は
+ * 「この箱が持っている」 を指すので出どころに立つ。 ER は端ごとに違う個数を示すので両端に要る。
+ * 1 つの欄で「どちら側か」 を持つ形にすると、両端に置く関係が書けない。
+ */
+
+/**
+ * 行頭の印 (#578)。 **形 × 塗り の 2 軸**で 4 通りを分ける。
+ *
+ * 軸の意味は図の種類が決める = クラス図は 持ち物/振る舞い × 公開/非公開、
+ * ER 図は 値/外部キー × 必須/任意、状態遷移図は 状態の中/出入り × 続く/瞬間。
+ * 描画側が持つのは形だけで、意味は持たない。
+ *
+ * 印を持つ行は **区切り線を引かない**。 印が群を分けるので、線と印で二重に分けることになる。
+ */
+export type RowMark = {
+  /** 四角 (`"square"`) か山形 (`"chevron"`) か */
+  shape: "square" | "chevron";
+  /** 塗るか。 塗らない印は輪郭だけを描く */
+  filled: boolean;
+  /**
+   * 名前に下線を引くか (#578)。 ER の主キーに使う。
+   *
+   * **印の 2 軸とは別の段**に置く。 3 つ目の軸を印に足すと 4 通りが 8 通りになって
+   * 見分けが付かなくなるので、下線を重ねる形にした = 外部キーの山形と重ねられる。
+   */
+  underline?: boolean;
+};
 
 export type CdlLane = {
   id: string;
@@ -215,6 +330,29 @@ export type CdlNode = {
   value?: string;
   /** kind=storage 時の行 (各 mono、 state 参照可) */
   rows?: string[];
+  /**
+   * 行頭の印 (#578)。 `rows` と同じ並びで、`null` の位置には印を描かない。
+   *
+   * **印を持つ行は書き方そのものが変わる**。 区切り線 2 本を引かず、名前を印の右に置き、
+   * 型を箱の右端へ薄く右揃えで置く。 線で分けるのをやめて印で分ける形なので、両方は要らない。
+   *
+   * 空文字の行と `null` の印を組にすると **群の間** になる (持ち物と振る舞いの間など)。
+   */
+  rowMarks?: readonly (RowMark | null)[];
+  /**
+   * 時系列のやり取りの中身 (#578)。 `sequence-board` 種別が読む。
+   *
+   * 面々と言づてと帯を 1 つの箱に持たせ、内側の配置は種別が決める。 図表の種別
+   * (`gantt-timeline` 等) と同じ持ち方。
+   */
+  sequenceData?: SequenceBoardData;
+  /**
+   * いま何番目の言づてを見ているか (#578)。 `"{seq}"` のように状態から取る。
+   *
+   * 書かない図では全部を濃く出す = 段を持たない使い方 (縮小見本 / 静止画) で薄い絵にすると、
+   * 読み手には壊れて見える。
+   */
+  sequenceStep?: string;
   /** width override (default は NodeKind 別 NODE_SIZE)、 catalog thumbnail 用に縮小可 */
   w?: number;
   /** height override */
@@ -492,6 +630,21 @@ export type CdlEdge = {
   style?: EdgeStyle;
   /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
   head?: EdgeHead;
+  /**
+   * 端の印の塗り方 (#578)。 書かなければ形ごとの既定。 塗らない形には効かない。
+   *
+   * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 持つ /
+   * 塗った菱 = 抱える)。
+   */
+  headFill?: EdgeHeadFill;
+  /**
+   * **出どころ側**の端の印 (#578)。 書かなければ何も描かない。
+   *
+   * 行き先側は `head`。 両方に置けるので、ER のように端ごとに違う個数を示す関係が書ける。
+   */
+  tailHead?: EdgeHead;
+  /** 出どころ側の印の塗り (#578)。 書かなければ形ごとの既定 */
+  tailHeadFill?: EdgeHeadFill;
   /**
    * FSM transition の guard 条件 (例 "if validated")。
    * stateMachine preset では sub に併合される、 text-dsl v0.5 では guard 単独で渡せる。

package/src/visual-validate.ts

@@ -1921,6 +1921,14 @@ function runAxes(
     if (!isRenderedNode(n)) continue;
     for (const row of n.rows) {
       if (DIVIDER_ONLY.test(row)) continue;
+      /*
+       * **行頭の印を持つ箱では形式を求めない** (#578 の設計)。
+       *
+       * 印を出す形では、行が何を指すかは字ではなく印が示す。 群の区切りは空の行で置き、
+       * ふるまいの行 (`在庫を押さえる`) は名前だけで値を持たない = `key: value` に当てはまらない
+       * 行が正しい出力になる。 印の有無で分けるのは、印を持つ箱がその形で描かれるため。
+       */
+      if (n.rowMarks !== undefined) continue;
       if (!ROW_FORMAT.test(row)) {
         push("row-format", `node "${n.id}" row "${row}" が "key: value" 形式でない`);
       }
@@ -2485,9 +2493,18 @@ function runAxes(
     for (const [stack, group] of byStack) {
       if (group.length < 2) continue;
       const cy0 = group[0]!.cy;
+      /*
+       * **上端で揃える形も認める** (#578 の設計)。
+       *
+       * 高さの違う箱を横に並べる図 (表 / クラス / 状態) では、中心ではなく上端を揃える。
+       * 中心だけを見ると、正しく上端で揃っている行が高さの差の半分だけずれて見える
+       * (実測 = 行数の違う表で 28 の差)。 どちらかで揃っていれば揃っているとみなす。
+       */
+      const top0 = cy0 - (group[0]!.h ?? 0) / 2;
       for (const n of group.slice(1)) {
         const diff = Math.abs(n.cy - cy0);
-        if (diff > MIN_ROW_ALIGNMENT_TOLERANCE) {
+        const topDiff = Math.abs(n.cy - (n.h ?? 0) / 2 - top0);
+        if (diff > MIN_ROW_ALIGNMENT_TOLERANCE && topDiff > MIN_ROW_ALIGNMENT_TOLERANCE) {
           push(
             "row-alignment",
             `stack=${stack} row 内 node "${n.id}" cy=${n.cy.toFixed(1)} が row 基準 cy=${cy0.toFixed(1)} と ${diff.toFixed(1)} world 差 (許容 ${MIN_ROW_ALIGNMENT_TOLERANCE})`,
@@ -4221,15 +4238,25 @@ function runAxes(
       if (group.length < 3) continue;
       const sorted = [...group].sort((a, b) => a.cy - b.cy);
       const gaps: number[] = [];
+      /*
+       * **格子に置く形では上端どうしの間隔で測る** (#578 の設計)。
+       *
+       * 段の位置を著者が決める図 (クラス / 表 / 状態) では、engine が制御しているのは
+       * 段の基準線であって端の間隔ではない。 箱の高さが段ごとに違うと端の間隔は必ずばらつく
+       * (実測 = クラス図の 2 列目で 132 と 300)。 どちらかが揃っていれば揃っているとみなす。
+       */
+      const tops: number[] = [];
       for (let i = 1; i < sorted.length; i++) {
         const prev = sorted[i - 1]!;
         const cur = sorted[i]!;
         gaps.push(cur.cy - cur.h / 2 - (prev.cy + prev.h / 2));
+        tops.push(cur.cy - cur.h / 2 - (prev.cy - prev.h / 2));
       }
       const maxGap = Math.max(...gaps);
       const minGap = Math.min(...gaps);
       const variance = maxGap - minGap;
-      if (variance > COLUMN_GAP_VARIANCE_TOL) {
+      const topVariance = Math.max(...tops) - Math.min(...tops);
+      if (variance > COLUMN_GAP_VARIANCE_TOL && topVariance > COLUMN_GAP_VARIANCE_TOL) {
         push(
           "column-gap-uniform",
           `lane "${laneId}" 内 node 間の端間 gap variance ${variance.toFixed(1)} world が spec ${COLUMN_GAP_VARIANCE_TOL} 超過 (min=${minGap.toFixed(0)} max=${maxGap.toFixed(0)})`,