@cardenelabs/cdl 0.16.0 → 0.17.1

package/dist/index.js

@@ -9492,6 +9492,9 @@ function diagram(id, options) {
         side: opts.side,
         style: opts.style,
         head: opts.head,
+        headFill: opts.headFill,
+        tailHead: opts.tailHead,
+        tailHeadFill: opts.tailHeadFill,
         guard: opts.guard,
         cardinality: opts.cardinality,
         labelOffsetX: opts.labelOffsetX,
@@ -9615,6 +9618,9 @@ function diagram(id, options) {
           side: d.side,
           style: d.style,
           head: d.head,
+          headFill: d.headFill,
+          tailHead: d.tailHead,
+          tailHeadFill: d.tailHeadFill,
           guard: d.guard,
           cardinality: d.cardinality,
           labelOffsetX: d.labelOffsetX,
@@ -11716,6 +11722,9 @@ function hasRenderedLabel(e) {
   return Boolean(e.label?.trim() || e.sub?.trim());
 }
 var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
+  // 時系列のやり取り (#578)。 図を丸ごと描く種別で、描くのは面々の名前と言づての語。
+  // 箱の `title` は使わない
+  "sequence-board",
   // 形だけを描く (DynShapeNode)
   "dyn-rect",
   "dyn-circle",
@@ -11792,7 +11801,7 @@ function genericTextCentered(kind, hasRows) {
 function genericTitleBaselineY(kind, h, hasRows) {
   return genericTextCentered(kind, hasRows) ? h / 2 + GENERIC_TITLE_CENTER_OFFSET : GENERIC_TITLE_TOP + genericTextShift(kind);
 }
-var ROW_TOP_STORAGE = 130;
+var ROW_TOP_STORAGE = 152;
 var ROW_PITCH_STORAGE = 56;
 var ROW_TOP_GENERIC = 100;
 var ROW_PITCH_GENERIC = 28;
@@ -11803,7 +11812,9 @@ var GENERIC_TITLE_FONT = 20;
 var GLYPH_CAP_RATIO = 0.72;
 var ROW_FONT_STORAGE = 26;
 var ROW_FONT_GENERIC = 21;
-var STORAGE_TITLE_BASELINE = 78;
+var STORAGE_TITLE_BASELINE = 86;
+var STORAGE_TITLE_FONT = 34;
+var SUBTITLE_ROW_SHIFT = 46;
 var STORAGE_ROW_DIVIDER_Y = Math.round(
   (STORAGE_TITLE_BASELINE + (ROW_TOP_STORAGE - ROW_FONT_STORAGE * GLYPH_CAP_RATIO)) / 2
 );
@@ -13407,7 +13418,10 @@ var TOKENS = {
     // 印は箱いっぱいに描く (線が箱の縁で止まるため) ので、この値が丸の直径になる。
     // 箱としての最小 (80x40) より大きく、名前を持つ箱 (card 320x150) よりは明らかに小さい
     "mark-start": { w: 96, h: 96 },
-    "mark-end": { w: 96, h: 96 }
+    "mark-end": { w: 96, h: 96 },
+    // 時系列のやり取り (#578)。 実寸は中身から決まる (`sequenceBoardMetrics`) ので、
+    // ここは書かなかった時の受け皿
+    "sequence-board": { w: 960, h: 640 }
   },
   // row gap (stack 間の vertical gap、 lane 内 / 跨ぎ共通)
   // edge label が node の上 36 px に配置されるため、 boxH 68 + 36 + 余裕 = 100 必要。
@@ -15070,8 +15084,12 @@ function requiredRowsWidth(rows, kind) {
 function autoStorageHeight(n, defaultH) {
   if (n.kind !== "storage") return n.h ?? defaultH;
   if (n.h != null) return n.h;
-  if (!n.rows || n.rows.length === 0) return 150;
-  return Math.max(defaultH, requiredRowsHeight("storage", n.rows.length) ?? defaultH);
+  const \u5370\u3042\u308A = n.rowMarks !== void 0;
+  const \u547C\u3073\u540D\u306E\u5206 = \u5370\u3042\u308A && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
+  if (!n.rows || n.rows.length === 0) return 150 + \u547C\u3073\u540D\u306E\u5206;
+  const \u5FC5\u8981 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
+  if (\u5370\u3042\u308A) return \u5FC5\u8981 + \u547C\u3073\u540D\u306E\u5206;
+  return Math.max(defaultH, \u5FC5\u8981);
 }
 function autoRowsWidth(n, defaultW) {
   if (n.w != null) return n.w;
@@ -15159,8 +15177,11 @@ function layoutNodes(diag, lanes) {
       continue;
     }
     const cx = lane.x + lane.width / 2;
-    const cy = rowCy.get(n.stack);
-    const h = n.h ?? rowH.get(n.stack);
+    const \u6BB5\u306E\u82AF = rowCy.get(n.stack);
+    const \u6BB5\u306E\u9AD8\u3055 = rowH.get(n.stack);
+    const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0;
+    const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? autoStorageHeight(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
+    const cy = \u6BB5\u306E\u82AF;
     const w = autoRowsWidth(n, size.w);
     out.push({
       ...n,
@@ -15489,10 +15510,25 @@ var NODE_KINDS = [
   // 流れの始まりと終わりの印 2 種 (#560) ... 塗った丸と輪で囲んだ丸。
   // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
   "mark-start",
-  "mark-end"
+  "mark-end",
+  // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
+  "sequence-board"
 ];
+var EDGE_STYLES = ["solid", "dotted-flow", "dashed"];
 var EDGE_HEAD_DEFAULT = "triangle";
-var EDGE_HEADS = ["triangle", "diamond", "open", "crow"];
+var EDGE_HEADS = [
+  "none",
+  "triangle",
+  "diamond",
+  "open",
+  "crow",
+  "one",
+  "zero-one",
+  "many",
+  "zero-many"
+];
+var EDGE_HEAD_FILL_DEFAULT = "solid";
+var EDGE_HEAD_FILLS = ["solid", "hollow"];
 
 // src/anim/core/easing.ts
 function cubicBezier(x1, y1, x2, y2) {
@@ -15987,7 +16023,7 @@ function pathSubpath(d, progress) {
 }
 
 // src/render/template-fields.ts
-var TEXT_FIELDS = ["title", "eyebrow", "subtitle", "value", "wBind", "hBind", "visibleIf"];
+var TEXT_FIELDS = ["title", "eyebrow", "subtitle", "value", "wBind", "hBind", "visibleIf", "sequenceStep"];
 var LIST_FIELDS = ["rows"];
 var NUMERIC_FIELDS = ["opacity", "renderOffsetX", "renderOffsetY"];
 var SHAPE_TEMPLATE_FIELDS = ["source", "radius", "fillProgress", "angle", "level", "rotation", "fill"];
@@ -18312,6 +18348,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
     if (!isRenderedNode(n)) continue;
     for (const row of n.rows) {
       if (DIVIDER_ONLY.test(row)) continue;
+      if (n.rowMarks !== void 0) continue;
       if (!ROW_FORMAT.test(row)) {
         push("row-format", `node "${n.id}" row "${row}" \u304C "key: value" \u5F62\u5F0F\u3067\u306A\u3044`);
       }
@@ -19702,7 +19739,16 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       const maxGap = Math.max(...gaps);
       const minGap = Math.min(...gaps);
       const variance = maxGap - minGap;
-      if (variance > COLUMN_GAP_VARIANCE_TOL) {
+      const \u683C\u5B50\u306B\u7F6E\u304F = group.every((n) => n.rowMarks !== void 0);
+      const \u7AEF\u304C\u8DB3\u308A\u3066\u3044\u308B = minGap >= requiredNearClearance("node", "node");
+      if (\u683C\u5B50\u306B\u7F6E\u304F) {
+        if (!\u7AEF\u304C\u8DB3\u308A\u3066\u3044\u308B) {
+          push(
+            "column-gap-uniform",
+            `lane "${laneId}" \u5185 node \u9593\u306E\u7AEF\u9593 gap ${minGap.toFixed(0)} world \u304C\u4E0B\u9650 ${requiredNearClearance("node", "node")} \u3092\u5272\u308B`
+          );
+        }
+      } else if (variance > COLUMN_GAP_VARIANCE_TOL) {
         push(
           "column-gap-uniform",
           `lane "${laneId}" \u5185 node \u9593\u306E\u7AEF\u9593 gap variance ${variance.toFixed(1)} world \u304C spec ${COLUMN_GAP_VARIANCE_TOL} \u8D85\u904E (min=${minGap.toFixed(0)} max=${maxGap.toFixed(0)})`
@@ -21176,14 +21222,42 @@ function StateDiffCard({
 
 // src/render/edge-head.ts
 var EDGE_HEAD_SHAPE = {
-  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
+  }
 };
-function edgeHeadMarkerId(tone, head, small) {
+function edgeHeadMarkerId(tone, head, small, fill = EDGE_HEAD_FILL_DEFAULT) {
   const \u5C0F = small ? "-sm" : "";
-  return head === EDGE_HEAD_DEFAULT ? `cdl-arrow-${tone}${\u5C0F}` : `cdl-arrow-${tone}-${head}${\u5C0F}`;
+  const \u5857 = fill === EDGE_HEAD_FILL_DEFAULT || !EDGE_HEAD_SHAPE[head].filled ? "" : `-${fill}`;
+  return head === EDGE_HEAD_DEFAULT && \u5857 === "" ? `cdl-arrow-${tone}${\u5C0F}` : `cdl-arrow-${tone}-${head}${\u5857}${\u5C0F}`;
+}
+function edgeHeadPaint(head, fill, color) {
+  const \u5F62 = EDGE_HEAD_SHAPE[head];
+  if (!\u5F62.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" };
 }
 function opacityAttr(opacity) {
   return opacity < 1 ? opacity : void 0;
@@ -21198,7 +21272,13 @@ function CdlEdgeView({
   stateValues
 }) {
   const color = toneColor(edge.tone);
-  const marker = hasTone(edge.tone) ? edgeHeadMarkerId(edge.tone, edge.head ?? EDGE_HEAD_DEFAULT, !active) : "cdl-arrow-muted";
+  const \u7AEF\u306E\u540D\u524D = (h, f) => {
+    const \u5F62 = h ?? EDGE_HEAD_DEFAULT;
+    if (\u5F62 === "none") return void 0;
+    return hasTone(edge.tone) ? edgeHeadMarkerId(edge.tone, \u5F62, !active, f ?? EDGE_HEAD_FILL_DEFAULT) : "cdl-arrow-muted";
+  };
+  const marker = \u7AEF\u306E\u540D\u524D(edge.head, edge.headFill);
+  const tailMarker = edge.tailHead === void 0 ? void 0 : \u7AEF\u306E\u540D\u524D(edge.tailHead, edge.tailHeadFill);
   const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";
   const isPassThrough = isDotted && Boolean(edge.dThrough);
@@ -21246,6 +21326,8 @@ function CdlEdgeView({
             progress,
             color,
             marker,
+            tailMarker,
+            dashed: style === "dashed",
             stateValues
           }
         ),
@@ -21271,6 +21353,8 @@ function SolidEdgePath({
   progress,
   color,
   marker,
+  tailMarker,
+  dashed,
   stateValues
 }) {
   const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
@@ -21278,7 +21362,7 @@ function SolidEdgePath({
   const boundWidth = edge.widthBind && stateValues ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth) : defaultWidth;
   const boundStroke = edge.strokeBind && stateValues ? interpolate(edge.strokeBind, stateValues) : color;
   const boundDashOffset = edge.dashOffsetBind && stateValues ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0) : void 0;
-  const dashArray = active ? boundDashOffset !== void 0 ? "8 6" : void 0 : "4 5";
+  const dashArray = dashed ? "10 8" : active ? boundDashOffset !== void 0 ? "8 6" : void 0 : "4 5";
   return /* @__PURE__ */ jsx(
     "path",
     {
@@ -21291,7 +21375,8 @@ function SolidEdgePath({
       strokeDasharray: dashArray,
       strokeDashoffset: boundDashOffset,
       strokeLinecap: "round",
-      markerEnd: `url(#${marker})`,
+      markerEnd: marker === void 0 ? void 0 : `url(#${marker})`,
+      markerStart: tailMarker === void 0 ? void 0 : `url(#${tailMarker})`,
       style: {
         transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease"
       }
@@ -21503,7 +21588,8 @@ function CardNode({ node, active }) {
     return /* @__PURE__ */ jsx("g", { transform: `translate(${x} ${y})` });
   }
   const compact = isCompactBox(node.h);
-  const titleY = compact ? node.h / 2 + 8 : 86;
+  const \u5C0F\u578B\u306B\u547C\u3073\u540D = compact && Boolean(node.subtitle);
+  const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86;
   const titleX = compact ? node.w / 2 : 26;
   const paddingX = compact ? 16 : 52;
   const availableW = node.w - paddingX;
@@ -21540,9 +21626,262 @@ function CardNode({ node, active }) {
         children: node.title
       }
     ),
-    !compact && node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    !compact && node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 124, fontSize: subtitleSize, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle }),
+    \u5C0F\u578B\u306B\u547C\u3073\u540D && /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "node-subtitle",
+        x: node.w / 2,
+        y: node.h / 2 + 24,
+        fontSize: Math.min(subtitleSize, 18),
+        textAnchor: "middle",
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: node.subtitle
+      }
+    )
   ] });
 }
+
+// src/kinds/sequence-board-metrics.ts
+var SEQ_EDGE = 16;
+var SEQ_ROW = 64;
+var SEQ_GUTTER_PAD = 40;
+var SEQ_GUTTER_GAP = 40;
+var SEQ_HEAD = 96;
+var SEQ_ROW_PAD = 56;
+var SEQ_COL_PAD = 80;
+var SEQ_BAND_W = 52;
+var SEQ_BAND_PAD = 24;
+var SEQ_NAME = 24;
+var SEQ_SUB = 20;
+var SEQ_LABEL = 26;
+var SEQ_DOT = 7;
+var SEQ_SELF_W = 52;
+var SEQ_COL_MIN = 200;
+var g4 = (v) => Math.round(v / 4) * 4;
+function sequenceStepId() {
+  return "seq_step";
+}
+function sequenceBoardMetrics(data) {
+  const \u540D\u5E45 = 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, ...\u540D\u5E45) + SEQ_COL_PAD));
+  const \u8A9E\u5E45 = Math.max(0, ...data.messages.map((m) => textWidth(m.label, SEQ_LABEL)));
+  const gutter = g4(SEQ_EDGE + SEQ_GUTTER_PAD + \u8A9E\u5E45 + SEQ_GUTTER_GAP);
+  const headY = SEQ_EDGE + SEQ_HEAD;
+  const rowY = (i) => headY + SEQ_ROW_PAD + i * SEQ_ROW;
+  const \u6700\u7D42 = data.messages.length > 0 ? rowY(data.messages.length - 1) : headY;
+  const bottom = \u6700\u7D42 + SEQ_ROW_PAD;
+  const cx = (i) => 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 };
+}
+function SequenceBoardNode({
+  node,
+  stateValues
+}) {
+  const data = node.sequenceData;
+  if (!data) return /* @__PURE__ */ jsx("g", { "data-cdl-role": "sequence-board" });
+  const m = sequenceBoardMetrics(data);
+  const x = node.cx - node.w / 2;
+  const y = node.cy - node.h / 2;
+  const \u73FE\u5728 = (() => {
+    if (!node.sequenceStep) return null;
+    const v = Number.parseInt(interpolate(node.sequenceStep, stateValues ?? {}).trim(), 10);
+    return Number.isFinite(v) ? v : null;
+  })();
+  const \u6731 = "var(--cdl-now, var(--cdl-tone-accent, #2d6a8f))";
+  const \u58A8 = "var(--cdl-text-2, #4a5162)";
+  const \u898B\u305F\u76EE = (i) => {
+    if (\u73FE\u5728 === null) return { opacity: 1, color: \u6731 };
+    if (i > \u73FE\u5728) return { opacity: 0, color: \u6731 };
+    return i === \u73FE\u5728 ? { opacity: 1, color: \u6731 } : { opacity: 1, color: \u58A8 };
+  };
+  return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "sequence-board", transform: `translate(${x} ${y})`, children: [
+    data.bands.map((b, i) => {
+      if (\u73FE\u5728 !== null && b.from > \u73FE\u5728) return null;
+      const \u4E0B = \u73FE\u5728 === null ? b.to : Math.min(b.to, \u73FE\u5728);
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "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(\u4E0B) - m.rowY(b.from) + SEQ_BAND_PAD,
+          rx: 4,
+          fill: \u6731,
+          fillOpacity: 0.12
+        },
+        `band-${i}`
+      );
+    }),
+    data.actors.map((_, i) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        "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
+      },
+      `thread-${i}`
+    )),
+    data.actors.map((a, i) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "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" },
+          children: a.name
+        }
+      ),
+      a.subtitle && /* @__PURE__ */ jsx(
+        "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)",
+          children: a.subtitle
+        }
+      )
+    ] }, `head-${i}`)),
+    /* @__PURE__ */ jsx(
+      "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) => /* @__PURE__ */ jsx(SequenceRow, { msg, yy: m.rowY(i), cx: m.cx, ...\u898B\u305F\u76EE(i) }, `msg-${i}`))
+  ] });
+}
+function SequenceRow({
+  msg,
+  yy,
+  cx,
+  opacity,
+  color
+}) {
+  const \u7834 = msg.kind === "return";
+  const \u5857\u308B = msg.kind === "call";
+  const \u51FA = cx(msg.from);
+  const \u81EA\u5206\u3078 = msg.from === msg.to;
+  const dir = \u81EA\u5206\u3078 ? 1 : Math.sign(cx(msg.to) - \u51FA);
+  return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "sequence-message", "data-cdl-message-kind": msg.kind, opacity, children: [
+    /* @__PURE__ */ jsx(
+      "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)",
+        children: msg.label
+      }
+    ),
+    \u81EA\u5206\u3078 ? (
+      // 自分宛て。 相手がいないので糸の右へ小さく回して戻る
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          "data-cdl-role": "sequence-line",
+          d: `M ${\u51FA + 10} ${yy - 16} H ${\u51FA + SEQ_SELF_W - 16} Q ${\u51FA + SEQ_SELF_W} ${yy - 16} ${\u51FA + SEQ_SELF_W} ${yy} Q ${\u51FA + SEQ_SELF_W} ${yy + 16} ${\u51FA + SEQ_SELF_W - 16} ${yy + 16} H ${\u51FA + 22}`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 2.5,
+          strokeLinecap: "round"
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-cdl-role": "sequence-line",
+        d: `M ${\u51FA + dir * 12} ${yy} H ${cx(msg.to) - dir * 14}`,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2.5,
+        strokeLinecap: "round",
+        strokeDasharray: \u7834 ? "10 8" : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Arrow,
+      {
+        x: \u81EA\u5206\u3078 ? \u51FA + 14 : cx(msg.to),
+        y: \u81EA\u5206\u3078 ? yy + 16 : yy,
+        dir: \u81EA\u5206\u3078 ? -1 : dir,
+        filled: \u5857\u308B,
+        color
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        "data-cdl-role": "sequence-source",
+        cx: \u51FA,
+        cy: \u81EA\u5206\u3078 ? yy - 16 : yy,
+        r: SEQ_DOT,
+        fill: color
+      }
+    )
+  ] });
+}
+function Arrow({
+  x,
+  y,
+  dir,
+  filled,
+  color
+}) {
+  const \u4E08 = 18;
+  const \u534A = 8.5;
+  const \u5148 = x;
+  const \u80F4 = x - dir * \u4E08;
+  return filled ? /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-cdl-role": "sequence-head",
+      "data-cdl-head-fill": "solid",
+      d: `M ${\u5148} ${y} L ${\u80F4} ${y - \u534A} L ${\u80F4} ${y + \u534A} Z`,
+      fill: color,
+      stroke: color,
+      strokeWidth: 3,
+      strokeLinejoin: "round"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-cdl-role": "sequence-head",
+      "data-cdl-head-fill": "open",
+      d: `M ${\u80F4} ${y - \u534A} L ${\u5148} ${y} L ${\u80F4} ${y + \u534A}`,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  );
+}
 function EventNode({
   node,
   active,
@@ -21644,6 +21983,29 @@ function FunctionNode({ node, active }) {
     node.subtitle && /* @__PURE__ */ jsx("text", { x: 26, y: 126, fontSize: 20, fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
   ] });
 }
+var ROW_GLYPH_HALF = 7;
+var ROW_GLYPH_CX = ROW_PAD_X_PX + ROW_GLYPH_HALF + 1;
+var ROW_GLYPH_LEAD = 40;
+var ROW_TYPE_FONT = 22;
+var SUBTITLE_BASELINE = 118;
+var SUBTITLE_FONT = 20;
+var UNDERLINE_DROP = 7;
+function RowGlyph({ mark, x, y, color }) {
+  const \u534A = ROW_GLYPH_HALF;
+  const d = mark.shape === "square" ? `M ${x - \u534A} ${y - \u534A} H ${x + \u534A} V ${y + \u534A} H ${x - \u534A} Z` : `M ${x - \u534A} ${y - \u534A} L ${x + \u534A} ${y} L ${x - \u534A} ${y + \u534A} Z`;
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-cdl-role": "node-row-glyph",
+      "data-cdl-row-glyph": `${mark.shape}-${mark.filled ? "filled" : "hollow"}`,
+      d,
+      fill: mark.filled ? color : "var(--cdl-node-fill, #ffffff)",
+      stroke: color,
+      strokeWidth: mark.filled ? 0 : 2.4,
+      strokeLinejoin: "round"
+    }
+  );
+}
 function StorageNode({
   node,
   active,
@@ -21653,7 +22015,7 @@ function StorageNode({
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: 22 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: STORAGE_TITLE_FONT }, { hasEyebrow: Boolean(node.eyebrow) });
   const splits = rows.map((r) => splitRow(r));
   const leftMaxWidth = splits.reduce((m, s) => Math.max(m, displayWidth(s.left)), 0);
   const rightColX = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX + STORAGE_COL_GAP_PX;
@@ -21661,6 +22023,8 @@ function StorageNode({
   const leftEndDrawn = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX;
   const columnDividerX = (leftEndDrawn + rightColX) / 2;
   const columnDividerFits = columnDividerX <= node.w - ROW_PAD_X_PX;
+  const \u5370\u3067\u5206\u3051\u308B = node.rowMarks !== void 0;
+  const \u884C\u306E\u4E0B\u3052 = \u5370\u3067\u5206\u3051\u308B && 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
@@ -21681,6 +22045,19 @@ function StorageNode({
       }
     ),
     node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
+    \u5370\u3067\u5206\u3051\u308B && node.subtitle && // 呼び名は **印で分ける箱でだけ** 出す (#578)。 従来の箱は題の下に区切り線が来るので
+    // 置き場が無い
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "node-subtitle",
+        x: ROW_PAD_X_PX,
+        y: SUBTITLE_BASELINE,
+        fontSize: SUBTITLE_FONT,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: node.subtitle
+      }
+    ),
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -21695,7 +22072,7 @@ function StorageNode({
         children: node.title
       }
     ),
-    rows.length > 0 && /* @__PURE__ */ jsx(
+    rows.length > 0 && !\u5370\u3067\u5206\u3051\u308B && /* @__PURE__ */ jsx(
       "line",
       {
         "data-cdl-role": "node-row-divider",
@@ -21707,7 +22084,7 @@ function StorageNode({
         strokeWidth: 1.25
       }
     ),
-    rows.length > 0 && hasRightColumn && columnDividerFits && /* @__PURE__ */ jsx(
+    rows.length > 0 && hasRightColumn && columnDividerFits && !\u5370\u3067\u5206\u3051\u308B && /* @__PURE__ */ jsx(
       "line",
       {
         "data-cdl-role": "node-column-divider",
@@ -21720,15 +22097,37 @@ function StorageNode({
       }
     ),
     splits.map((s, idx) => {
-      return /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${rowBaselineY("storage", idx)})`, children: [
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${(rowBaselineY("storage", idx) ?? 0) + \u884C\u306E\u4E0B\u3052})`, children: [
+        \u5370\u3067\u5206\u3051\u308B && node.rowMarks?.[idx] != null && /* @__PURE__ */ jsx(
+          RowGlyph,
+          {
+            mark: node.rowMarks[idx],
+            x: ROW_GLYPH_CX,
+            y: -8,
+            color: "var(--cdl-text, #1a1f2a)"
+          }
+        ),
+        \u5370\u3067\u5206\u3051\u308B && node.rowMarks?.[idx]?.underline === true && // 主キーの下線 (#578)。 印の 2 軸とは別の段に載るので、外部キーの山形と重ねられる
+        /* @__PURE__ */ jsx(
+          "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
+          }
+        ),
         /* @__PURE__ */ jsx(
           "text",
           {
             "data-cdl-role": "node-row",
             "data-cdl-row-index": idx,
-            x: ROW_PAD_X_PX,
+            x: \u5370\u3067\u5206\u3051\u308B ? ROW_PAD_X_PX + ROW_GLYPH_LEAD : ROW_PAD_X_PX,
             fontSize: 26,
-            fontWeight: 600,
+            fontWeight: \u5370\u3067\u5206\u3051\u308B ? 500 : 600,
             fill: "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
             children: s.left
@@ -21739,11 +22138,11 @@ function StorageNode({
           {
             "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: \u5370\u3067\u5206\u3051\u308B ? node.w - ROW_PAD_X_PX : rightColX,
+            fontSize: \u5370\u3067\u5206\u3051\u308B ? ROW_TYPE_FONT : 26,
+            fontWeight: \u5370\u3067\u5206\u3051\u308B ? 500 : highlightRows ? 700 : 600,
+            textAnchor: \u5370\u3067\u5206\u3051\u308B ? "end" : "start",
+            fill: \u5370\u3067\u5206\u3051\u308B ? "var(--cdl-text-dim, #5a6270)" : highlightRows ? accent : "var(--cdl-text, #1a1f2a)",
             style: { fontFamily: "'JetBrains Mono', monospace" },
             children: s.right
           }
@@ -28099,6 +28498,9 @@ function CdlNodeView({
         return /* @__PURE__ */ jsx(EventNode, { node: resolvedNode, active, progress });
       case "card":
         return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active });
+      // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
+      case "sequence-board":
+        return /* @__PURE__ */ jsx(SequenceBoardNode, { node: resolvedNode, stateValues });
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -28426,36 +28828,47 @@ function CdlStage({
           /* @__PURE__ */ jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
               ([tone, color]) => [["", 14], ["-sm", 10]].flatMap(
-                ([suffix, size]) => EDGE_HEADS.map((head) => {
-                  const \u5F62 = EDGE_HEAD_SHAPE[head];
-                  return /* @__PURE__ */ jsx(
-                    "marker",
-                    {
-                      id: edgeHeadMarkerId(tone, head, suffix === "-sm"),
-                      viewBox: "0 0 10 10",
-                      refX: \u5F62.refX,
-                      refY: "5",
-                      markerWidth: size,
-                      markerHeight: size,
-                      markerUnits: "userSpaceOnUse",
-                      orient: "auto-start-reverse",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
+                ([suffix, size]) => EDGE_HEADS.flatMap(
+                  (head) => (
+                    // 塗り方は形と別の軸 (#578)。 塗らない形では 2 つが同じ名前に畳まれるので、
+                    // `edgeHeadMarkerId` が返す名前で重複を外す
+                    EDGE_HEAD_FILLS.map((fill) => {
+                      const \u5F62 = EDGE_HEAD_SHAPE[head];
+                      const id = edgeHeadMarkerId(tone, head, suffix === "-sm", fill);
+                      if (\u5F62.d === "") return null;
+                      if (fill !== EDGE_HEAD_FILL_DEFAULT && !\u5F62.filled) return null;
+                      const \u5857 = edgeHeadPaint(head, fill, color);
+                      return /* @__PURE__ */ jsx(
+                        "marker",
                         {
-                          "data-cdl-role": "edge-arrowhead",
-                          "data-cdl-edge-head": head,
-                          d: \u5F62.d,
-                          fill: \u5F62.filled ? color : "none",
-                          stroke: \u5F62.filled ? "none" : color,
-                          strokeWidth: \u5F62.filled ? void 0 : 1.6,
-                          strokeLinecap: \u5F62.filled ? void 0 : "round",
-                          strokeLinejoin: \u5F62.filled ? void 0 : "round"
-                        }
-                      )
-                    },
-                    `${tone}${suffix}-${head}`
-                  );
-                })
+                          id,
+                          viewBox: `0 0 ${\u5F62.w} ${\u5F62.h}`,
+                          refX: \u5F62.refX,
+                          refY: \u5F62.h / 2,
+                          markerWidth: size * (\u5F62.scale ?? 1) * \u5F62.w / \u5F62.h,
+                          markerHeight: size * (\u5F62.scale ?? 1),
+                          markerUnits: "userSpaceOnUse",
+                          orient: "auto-start-reverse",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              "data-cdl-role": "edge-arrowhead",
+                              "data-cdl-edge-head": head,
+                              "data-cdl-edge-head-fill": fill,
+                              d: \u5F62.d,
+                              fill: \u5857.fill,
+                              stroke: \u5857.stroke,
+                              strokeWidth: \u5857.strokeWidth,
+                              strokeLinecap: \u5857.strokeWidth === void 0 ? void 0 : "round",
+                              strokeLinejoin: \u5857.strokeWidth === void 0 ? void 0 : "round"
+                            }
+                          )
+                        },
+                        id
+                      );
+                    })
+                  )
+                )
               )
             ),
             /* @__PURE__ */ jsx(
@@ -29144,65 +29557,58 @@ function flow(preset) {
   };
   return api;
 }
+var SEQUENCE_MESSAGE_LOOK = {
+  call: { style: "solid", head: "triangle" },
+  return: { style: "dashed", head: "open" },
+  fire: { style: "solid", head: "open" }
+};
 function sequence(preset) {
-  const laneW = preset.laneWidth ?? 340;
   const tone = preset.defaultTone ?? "accent";
-  const style = preset.defaultStyle ?? "solid";
   const b = diagram(preset.id, { topic: preset.topic });
-  const actorIds = /* @__PURE__ */ new Map();
-  const headerNodeIds = [];
-  preset.actors.forEach((label, i) => {
-    const id = slugify(label) || `actor-${i}`;
-    actorIds.set(label, id);
-    actorIds.set(id, id);
-    b.lane(id, { width: laneW, label, lifeline: true });
-    const actorW = Math.max(140, label.length * 22 + 52);
-    const headerId = `${id}-header`;
-    b.node(headerId, { lane: id, stack: 0, kind: "card", title: label, w: actorW, h: 72 });
-    headerNodeIds.push(headerId);
-    const spacerId = `${id}-spacer`;
-    b.node(spacerId, { lane: id, stack: 1, kind: "card", title: "", w: 2, h: 40 });
+  const \u9762\u3005 = preset.actors.map(
+    (a) => typeof a === "string" ? { name: a } : { name: a.name, ...a.subtitle ? { subtitle: a.subtitle } : {} }
+  );
+  const \u756A\u53F7 = /* @__PURE__ */ new Map();
+  \u9762\u3005.forEach((a, i) => {
+    \u756A\u53F7.set(a.name, i);
+    \u756A\u53F7.set(slugify(a.name) || `actor-${i}`, i);
   });
-  const phaseActivate = [...headerNodeIds];
-  let stepIdx = 0;
+  const \u8A00\u3065\u3066 = [];
+  const \u8A9E = /* @__PURE__ */ new Map();
   const api = {
-    step(s) {
-      const fromLaneId = actorIds.get(s.from) ?? s.from;
-      const toLaneId = actorIds.get(s.to) ?? s.to;
-      const stack = stepIdx + 2;
-      const fromBoxId = `s${stepIdx}-${fromLaneId}`;
-      const toBoxId = `s${stepIdx}-${toLaneId}`;
-      b.node(fromBoxId, { lane: fromLaneId, stack, kind: "card", title: "", w: 2, h: 2 });
-      if (fromLaneId !== toLaneId) {
-        b.node(toBoxId, { lane: toLaneId, stack, kind: "card", title: "", w: 2, h: 2 });
-      }
-      const edgeId = `e${stepIdx}-${fromLaneId}-${toLaneId}`;
-      b.edge(fromBoxId, fromLaneId === toLaneId ? fromBoxId : toBoxId, {
-        id: edgeId,
-        label: s.label,
-        ...s.sub ? { sub: s.sub } : {},
-        tone: s.tone ?? tone,
-        style: s.style ?? style
-      });
-      phaseActivate.push(fromBoxId);
-      if (fromLaneId !== toLaneId) phaseActivate.push(toBoxId);
-      phaseActivate.push(edgeId);
-      stepIdx += 1;
+    step(s2) {
+      const from = \u756A\u53F7.get(s2.from) ?? 0;
+      const to = \u756A\u53F7.get(s2.to) ?? 0;
+      const kind = s2.kind ?? ((s2.style ?? preset.defaultStyle) === "dotted-flow" ? "return" : "call");
+      \u8A00\u3065\u3066.push({ label: s2.label, from, to, kind });
+      if (s2.sub) \u8A9E.set(\u8A00\u3065\u3066.length - 1, s2.sub);
       return api;
     },
     build() {
-      const footerStack = stepIdx + 2;
-      preset.actors.forEach((label) => {
-        const laneId = actorIds.get(label) ?? slugify(label);
-        const footerId = `${laneId}-footer`;
-        const actorW = Math.max(140, label.length * 22 + 52);
-        b.node(footerId, { lane: laneId, stack: footerStack, kind: "card", title: label, w: actorW, h: 72, role: "lifeline-footer" });
-        phaseActivate.push(footerId);
+      const \u5E2F = preset.bands ? preset.bands.map((x) => ({ actor: \u756A\u53F7.get(x.actor) ?? 0, from: x.from, to: x.to })) : \u9762\u3005.map((_, i) => {
+        const \u51FA\u756A = \u8A00\u3065\u3066.map((m2, idx) => m2.from === i || m2.to === i ? idx : -1).filter((idx) => idx >= 0);
+        return \u51FA\u756A.length > 0 ? { actor: i, from: \u51FA\u756A[0], to: \u51FA\u756A[\u51FA\u756A.length - 1] } : null;
+      }).filter((x) => x !== null);
+      const data = { actors: \u9762\u3005, messages: \u8A00\u3065\u3066, bands: \u5E2F };
+      const m = sequenceBoardMetrics(data);
+      const laneId = "seq";
+      b.lane(laneId, { width: m.w + LANE_PAD_MIN * 2 });
+      b.node(preset.id, {
+        lane: laneId,
+        stack: 0,
+        kind: "sequence-board",
+        w: m.w,
+        h: m.h,
+        title: "",
+        sequenceData: data,
+        // 段が進むと濃さが移る。 書かない図では全部を濃く出す
+        sequenceStep: `{${sequenceStepId()}}`,
+        tone
       });
       b.phase(
-        "seq",
+        "sequence",
         { duration: 2400, title: preset.topic, body: "sequence \u306E\u5168 message \u3092\u6642\u7CFB\u5217\u5C55\u958B\u3002" },
-        (p) => p.activate(...phaseActivate).badge("sequence")
+        (p) => p.activate(preset.id).badge("sequence")
       );
       return b.build();
     }
@@ -29270,6 +29676,14 @@ function topology(preset) {
   };
   return api;
 }
+var ER_CARDINALITY_HEAD = {
+  "1:1": { tail: "one", head: "one" },
+  "1:N": { tail: "one", head: "many" },
+  "N:1": { tail: "many", head: "one" },
+  "N:M": { tail: "many", head: "many" },
+  "0..1": { tail: "one", head: "zero-one" },
+  "1..*": { tail: "one", head: "many" }
+};
 function er(preset) {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone = preset.defaultTone ?? "info";
@@ -29280,7 +29694,27 @@ function er(preset) {
   const api = {
     entity(e) {
       const laneId = `lane-${e.id}`;
-      const boxW = fitRowsWidth(entityW, e.rows);
+      const \u9375 = (e.columns ?? []).filter((c) => c.pk === true);
+      const \u5024 = (e.columns ?? []).filter((c) => c.pk !== true);
+      const \u884C = [];
+      const \u5370 = [];
+      const \u8DB3\u3059 = (c) => {
+        \u884C.push(`${c.name}: ${c.type}`);
+        \u5370.push({
+          shape: c.fk === true ? "chevron" : "square",
+          filled: c.optional !== true,
+          ...c.pk === true ? { underline: true } : {}
+        });
+      };
+      \u9375.forEach(\u8DB3\u3059);
+      if (\u9375.length > 0 && \u5024.length > 0) {
+        \u884C.push("");
+        \u5370.push(null);
+      }
+      \u5024.forEach(\u8DB3\u3059);
+      const \u8A2D\u8A08\u306E\u5F62 = \u884C.length > 0;
+      const rows = \u8A2D\u8A08\u306E\u5F62 ? \u884C : e.rows ?? [];
+      const boxW = fitRowsWidth(entityW, rows);
       b.lane(laneId, { width: boxLaneW(boxW) });
       b.node(e.id, {
         lane: laneId,
@@ -29288,8 +29722,12 @@ function er(preset) {
         kind: "storage",
         w: boxW,
         title: e.title,
-        eyebrow: "\u30A8\u30F3\u30C6\u30A3\u30C6\u30A3",
-        rows: e.rows
+        // 種類の札は設計の形では出さない (#578)。 「エンティティ」 と書いた札は全ての箱に
+        // 同じ字が並ぶだけで、代わりに表の呼び名を題の下へ置く
+        ...\u8A2D\u8A08\u306E\u5F62 ? {} : { eyebrow: "\u30A8\u30F3\u30C6\u30A3\u30C6\u30A3" },
+        ...\u8A2D\u8A08\u306E\u5F62 && e.subtitle ? { subtitle: e.subtitle } : {},
+        rows,
+        ...\u8A2D\u8A08\u306E\u5F62 ? { rowMarks: \u5370 } : {}
       });
       entities.push(e.id);
       phaseActivate.push(e.id);
@@ -29298,14 +29736,19 @@ function er(preset) {
     relation(r) {
       const currentIdx = relIdx++;
       const edgeId = `rel-${currentIdx}-${r.from}-${r.to}`;
-      const label = r.label ?? r.cardinality;
-      const sub = r.label ? r.cardinality : void 0;
+      const label = r.label ?? r.cardinality ?? "";
+      const \u5370\u304C\u793A\u3059 = r.tailHead !== void 0 || r.head !== void 0;
+      const sub = r.label && r.cardinality && !\u5370\u304C\u793A\u3059 ? r.cardinality : void 0;
+      const \u65E2\u5B9A = r.cardinality ? ER_CARDINALITY_HEAD[r.cardinality] : void 0;
       b.edge(r.from, r.to, {
         id: edgeId,
         label,
         ...sub ? { sub } : {},
         tone: r.tone ?? tone,
-        style: "solid"
+        style: r.style ?? "solid",
+        // 端の印は両端に立つ (#578)。 箱に近い側が個数、その外側が任意か
+        ...r.head ?? \u65E2\u5B9A?.head ? { head: r.head ?? \u65E2\u5B9A.head } : {},
+        ...r.tailHead ?? \u65E2\u5B9A?.tail ? { tailHead: r.tailHead ?? \u65E2\u5B9A.tail } : {}
       });
       phaseActivate.push(edgeId);
       return api;
@@ -29321,49 +29764,114 @@ function er(preset) {
   };
   return api;
 }
+var MARK_BOX = 96;
+var FSM_ACTION_MARK = {
+  entry: { shape: "chevron", filled: true },
+  exit: { shape: "chevron", filled: false },
+  do: { shape: "square", filled: true },
+  internal: { shape: "square", filled: false }
+};
 function stateMachine(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
-  const laneW = boxLaneW(stateW);
   const tone = preset.defaultTone ?? "accent";
   const b = diagram(preset.id, { topic: preset.topic });
   const phaseActivate = [];
-  let transIdx = 0;
   const stateOrder = /* @__PURE__ */ new Map();
+  const \u72B6\u614B = [];
+  const \u7BC0\u70B9 = [];
+  const \u9077\u79FB = [];
+  const \u4E26\u3073 = [];
   const api = {
     state(s) {
-      const laneId = `lane-${s.id}`;
-      b.lane(laneId, { width: laneW });
-      const eyebrow = s.initial ? "\u521D\u671F" : s.final ? "\u6700\u7D42" : "\u72B6\u614B";
-      b.node(s.id, {
-        lane: laneId,
-        stack: 0,
-        kind: "card",
-        w: stateW,
-        title: s.title,
-        eyebrow
-      });
+      \u4E26\u3073.push({ \u7A2E: "\u72B6\u614B", i: \u72B6\u614B.length });
+      \u72B6\u614B.push(s);
       stateOrder.set(s.id, stateOrder.size);
-      phaseActivate.push(s.id);
+      return api;
+    },
+    mark(m) {
+      \u4E26\u3073.push({ \u7A2E: "\u7BC0\u70B9", i: \u7BC0\u70B9.length });
+      \u7BC0\u70B9.push(m);
+      stateOrder.set(m.id, stateOrder.size);
       return api;
     },
     transition(t) {
-      const currentIdx = transIdx++;
-      const edgeId = `t${currentIdx}-${t.from}-${t.to}`;
-      const fromIdx = stateOrder.get(t.from) ?? 0;
-      const toIdx = stateOrder.get(t.to) ?? 0;
-      const isBack = toIdx < fromIdx;
-      b.edge(t.from, t.to, {
-        id: edgeId,
-        label: t.trigger,
-        ...t.guard ? { sub: t.guard } : {},
-        tone: t.tone ?? tone,
-        style: "solid",
-        ...isBack ? { routing: "back-detour" } : {}
-      });
-      phaseActivate.push(edgeId);
+      \u9077\u79FB.push(t);
       return api;
     },
     build() {
+      const \u8A2D\u8A08\u306E\u5F62 = \u72B6\u614B.some((s) => s.actions !== void 0 || s.subtitle !== void 0) || \u7BC0\u70B9.length > 0;
+      const \u683C\u5B50 = \u72B6\u614B.some((s) => s.col !== void 0) || \u7BC0\u70B9.some((m) => m.col !== void 0);
+      const \u4E2D\u8EAB = \u72B6\u614B.map((s) => {
+        const \u884C = (s.actions ?? []).map((a) => a.note ? `${a.label}: ${a.note}` : a.label);
+        const \u5370 = (s.actions ?? []).map((a) => FSM_ACTION_MARK[a.when]);
+        const laneId = \u683C\u5B50 && s.col !== void 0 ? `col-${s.col}` : `lane-${s.id}`;
+        const boxW = \u8A2D\u8A08\u306E\u5F62 ? fitRowsWidth(stateW, \u884C) : stateW;
+        return { s, \u884C, \u5370, laneId, boxW, stack: \u683C\u5B50 ? s.row ?? 0 : 0 };
+      });
+      const \u7BC0\u70B9\u306E\u4E2D\u8EAB = \u7BC0\u70B9.map((m) => ({
+        m,
+        laneId: \u683C\u5B50 && m.col !== void 0 ? `col-${m.col}` : `lane-${m.id}`,
+        stack: \u683C\u5B50 ? m.row ?? 0 : 0
+      }));
+      const \u5E2F\u5E45 = /* @__PURE__ */ new Map();
+      for (const c of \u4E2D\u8EAB) \u5E2F\u5E45.set(c.laneId, Math.max(\u5E2F\u5E45.get(c.laneId) ?? 0, c.boxW));
+      for (const c of \u7BC0\u70B9\u306E\u4E2D\u8EAB) \u5E2F\u5E45.set(c.laneId, Math.max(\u5E2F\u5E45.get(c.laneId) ?? 0, MARK_BOX));
+      const \u6E08 = /* @__PURE__ */ new Set();
+      const \u5E2F\u3092\u4F5C\u308B = (laneId) => {
+        if (\u6E08.has(laneId)) return;
+        \u6E08.add(laneId);
+        b.lane(laneId, { width: boxLaneW(\u5E2F\u5E45.get(laneId) ?? stateW) });
+      };
+      for (const c of \u7BC0\u70B9\u306E\u4E2D\u8EAB) if (c.stack === 0) \u5E2F\u3092\u4F5C\u308B(c.laneId);
+      for (const c of \u4E2D\u8EAB) \u5E2F\u3092\u4F5C\u308B(c.laneId);
+      for (const c of \u7BC0\u70B9\u306E\u4E2D\u8EAB) \u5E2F\u3092\u4F5C\u308B(c.laneId);
+      for (const o of \u4E26\u3073) {
+        if (o.\u7A2E === "\u7BC0\u70B9") {
+          const c2 = \u7BC0\u70B9\u306E\u4E2D\u8EAB[o.i];
+          b.node(c2.m.id, {
+            lane: c2.laneId,
+            stack: c2.stack,
+            kind: c2.m.kind === "start" ? "mark-start" : "mark-end",
+            w: MARK_BOX,
+            h: MARK_BOX,
+            title: ""
+          });
+          phaseActivate.push(c2.m.id);
+          continue;
+        }
+        const c = \u4E2D\u8EAB[o.i];
+        const eyebrow = \u7BC0\u70B9.length > 0 ? void 0 : c.s.initial ? "\u521D\u671F" : c.s.final ? "\u6700\u7D42" : "\u72B6\u614B";
+        b.node(c.s.id, {
+          lane: c.laneId,
+          stack: c.stack,
+          kind: \u8A2D\u8A08\u306E\u5F62 ? "storage" : "card",
+          w: c.boxW,
+          title: c.s.title,
+          ...eyebrow ? { eyebrow } : {},
+          ...c.s.subtitle ? { subtitle: c.s.subtitle } : {},
+          // 行を持たない状態でも欄を書く (#578)。 書かないとその箱だけ従来の意匠に落ち、
+          // 呼び名が消える
+          ...\u8A2D\u8A08\u306E\u5F62 ? { rows: c.\u884C, rowMarks: c.\u5370 } : {}
+        });
+        phaseActivate.push(c.s.id);
+      }
+      \u9077\u79FB.forEach((t, currentIdx) => {
+        const edgeId = `t${currentIdx}-${t.from}-${t.to}`;
+        const fromIdx = stateOrder.get(t.from) ?? 0;
+        const toIdx = stateOrder.get(t.to) ?? 0;
+        const isBack = toIdx < fromIdx;
+        b.edge(t.from, t.to, {
+          id: edgeId,
+          label: t.trigger,
+          ...t.guard ? { sub: t.guard } : {},
+          tone: t.tone ?? tone,
+          style: "solid",
+          // 遷移の印は 1 種類だけ = 実線に開いた矢 (#578)。 線と印が分かれず、違いは語の中に入る
+          head: t.head ?? "open",
+          ...isBack ? { routing: "back-detour" } : {}
+        });
+        phaseActivate.push(edgeId);
+      });
       b.phase(
         "fsm",
         { duration: 2400, title: preset.topic, body: "FSM \u306E\u5168 state + transition \u3092 visible \u5316\u3002" },
@@ -29427,72 +29935,103 @@ function infrastructure(preset) {
   };
   return api;
 }
-var CLASS_RELATION_HEAD = {
-  extends: "triangle",
-  implements: "triangle",
-  uses: "open",
-  aggregates: "diamond",
-  composes: "diamond"
+var CLASS_RELATION_LOOK = {
+  extends: { head: "triangle", fill: "hollow", tailHead: "none", tailFill: "solid", style: "solid" },
+  implements: { head: "triangle", fill: "hollow", tailHead: "none", tailFill: "solid", style: "dashed" },
+  aggregates: { head: "none", fill: "solid", tailHead: "diamond", tailFill: "hollow", style: "solid" },
+  composes: { head: "none", fill: "solid", tailHead: "diamond", tailFill: "solid", style: "solid" },
+  associates: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "solid" },
+  uses: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "dashed" }
 };
+Object.fromEntries(
+  Object.entries(CLASS_RELATION_LOOK).map(([k, v]) => [k, v.head])
+);
+function isPublic(row) {
+  return !row.startsWith("-") && !row.startsWith("#");
+}
+function stripAccess(row) {
+  const \u672C\u4F53 = isPublic(row) && !row.startsWith("+") ? row : row.slice(1);
+  return \u672C\u4F53.replace("()", "");
+}
 function classDiagram(preset) {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   const tone = preset.defaultTone ?? "info";
   const b = diagram(preset.id, { topic: preset.topic });
   const classes = [];
   const phaseActivate = [];
-  let relIdx = 0;
+  const \u7BB1 = [];
+  const \u95A2\u4FC2 = [];
   const api = {
     class(c) {
-      const laneId = `lane-${c.id}`;
-      const rows = [];
-      if (c.attributes && c.attributes.length > 0) {
-        rows.push(...c.attributes);
-      }
-      if (c.methods && c.methods.length > 0) {
-        if (rows.length > 0) rows.push("\u2500\u2500\u2500");
-        rows.push(...c.methods);
-      }
-      const boxW = fitRowsWidth(classW, rows);
-      b.lane(laneId, { width: boxLaneW(boxW) });
-      b.node(c.id, {
-        lane: laneId,
-        stack: 0,
-        kind: "storage",
-        w: boxW,
-        title: c.title,
-        eyebrow: c.stereotype ?? "\u30AF\u30E9\u30B9",
-        ...rows.length > 0 ? { rows } : {}
-      });
-      classes.push(c.id);
-      phaseActivate.push(c.id);
+      \u7BB1.push(c);
       return api;
     },
     relation(r) {
-      const currentIdx = relIdx++;
-      const edgeId = `cr-${currentIdx}-${r.from}-${r.to}`;
-      const label = r.label ?? r.type;
-      const sub = r.cardinality;
-      b.edge(r.from, r.to, {
-        id: edgeId,
-        label,
-        ...sub ? { sub } : {},
-        tone: r.tone ?? tone,
-        style: "solid",
-        // 関係の種類から端の形を決める (cdl#574)。 書いた形が勝つ
-        head: r.head ?? CLASS_RELATION_HEAD[r.type]
-        // CAR-531 SSOT ... 旧実装は `labelOffsetY: currentIdx % 2 === 0 ? -60 : 60` で
-        // 複数 relation label の path 沿い集中を強制分散していた。 CAR-430 で導入した
-        // engine 側 fan offset (FAN_STEP 40 world) が同 from / to 群を自動分散する現在、
-        // author 指定 ±60 は engine 分散と二重発火して extends label が SSOT
-        // LABEL_INIT_CLEARANCE (34、 CAR-630 で 26 → 34 復帰) を大幅に超える 114 world 離れる bug の直接原因になっていた。
-        // author 指定 offset を削除、 engine 側の LABEL_INIT_CLEARANCE + fan offset に一任する。
-        // 個別 relation で offset を再導入したい author は future extension (UmlRelation に
-        // labelOffsetY? を追加) で明示的に指定する経路を残す。
-      });
-      phaseActivate.push(edgeId);
+      \u95A2\u4FC2.push(r);
       return api;
     },
     build() {
+      const \u4E2D\u8EAB = \u7BB1.map((c) => {
+        const rows = [];
+        const rowMarks = [];
+        for (const a of c.attributes ?? []) {
+          rows.push(stripAccess(a));
+          rowMarks.push({ shape: "square", filled: isPublic(a) });
+        }
+        if ((c.attributes?.length ?? 0) > 0 && (c.methods?.length ?? 0) > 0) {
+          rows.push("");
+          rowMarks.push(null);
+        }
+        for (const m of c.methods ?? []) {
+          rows.push(stripAccess(m));
+          rowMarks.push({ shape: "chevron", filled: isPublic(m) });
+        }
+        const boxW = fitRowsWidth(classW, rows);
+        const laneId = c.col !== void 0 ? `col-${c.col}` : `lane-${c.id}`;
+        return { c, rows, rowMarks, boxW, laneId, stack: c.col !== void 0 ? c.row ?? 0 : 0 };
+      });
+      const \u5E2F\u5E45 = /* @__PURE__ */ new Map();
+      for (const m of \u4E2D\u8EAB) \u5E2F\u5E45.set(m.laneId, Math.max(\u5E2F\u5E45.get(m.laneId) ?? 0, m.boxW));
+      const \u6E08 = /* @__PURE__ */ new Set();
+      for (const m of \u4E2D\u8EAB) {
+        if (\u6E08.has(m.laneId)) continue;
+        \u6E08.add(m.laneId);
+        b.lane(m.laneId, { width: boxLaneW(\u5E2F\u5E45.get(m.laneId) ?? m.boxW) });
+      }
+      for (const m of \u4E2D\u8EAB) {
+        b.node(m.c.id, {
+          lane: m.laneId,
+          stack: m.stack,
+          kind: "storage",
+          w: m.boxW,
+          title: m.c.title,
+          // 種類の札は **書いた時だけ** 出す (#578)。 「クラス」 と書いた札は箱がクラスで
+          // あることしか言わず、図の中の全ての箱に同じ字が並ぶ
+          ...m.c.stereotype ? { eyebrow: m.c.stereotype } : {},
+          ...m.rows.length > 0 ? { rows: m.rows, rowMarks: m.rowMarks } : {}
+        });
+        classes.push(m.c.id);
+        phaseActivate.push(m.c.id);
+      }
+      \u95A2\u4FC2.forEach((r, currentIdx) => {
+        const edgeId = `cr-${currentIdx}-${r.from}-${r.to}`;
+        const \u898B\u305F\u76EE = CLASS_RELATION_LOOK[r.type];
+        b.edge(r.from, r.to, {
+          id: edgeId,
+          label: r.label ?? r.type,
+          ...r.cardinality ? { sub: r.cardinality } : {},
+          tone: r.tone ?? tone,
+          // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
+          style: r.style ?? \u898B\u305F\u76EE.style,
+          head: r.head ?? \u898B\u305F\u76EE.head,
+          headFill: r.headFill ?? \u898B\u305F\u76EE.fill,
+          tailHead: r.tailHead ?? \u898B\u305F\u76EE.tailHead,
+          tailHeadFill: \u898B\u305F\u76EE.tailFill
+          // CAR-531 SSOT ... label の分散は engine 側 (LABEL_INIT_CLEARANCE + fan offset) に
+          // 一任する。 author 指定 ±60 は engine 分散と二重発火して label が大きく離れる
+        });
+        phaseActivate.push(edgeId);
+      });
       b.phase(
         "class",
         { duration: 2400, title: preset.topic, body: "UML class \u5168 class + relation \u3092 visible \u5316\u3002" },
@@ -30002,6 +30541,6 @@ function slugify(s) {
   return s.toLowerCase().replace(/[^a-z0-9぀-ゟ゠-ヿ一-龯]+/g, "-").replace(/^-|-$/g, "");
 }
 
-export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_HEADS, EDGE_HEAD_DEFAULT, EDGE_LABEL_TEXT, EDGE_STUB_OUT, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, ROW_GAP_VARIANCE_TOL, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeStateValues, computeViewportScale, computed, countEdgeCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect2 as segmentsIntersect, sequence, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx };
+export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_HEADS, EDGE_HEAD_DEFAULT, EDGE_HEAD_FILLS, EDGE_HEAD_FILL_DEFAULT, EDGE_LABEL_TEXT, EDGE_STUB_OUT, EDGE_STYLES, ER_CARDINALITY_HEAD, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, ROW_GAP_VARIANCE_TOL, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeStateValues, computeViewportScale, computed, countEdgeCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect2 as segmentsIntersect, sequence, sequenceBoardMetrics, sequenceStepId, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map