@cardenelabs/dragon 0.30.0 → 0.33.0

package/src/compile/quadrant.ts

@@ -1,7 +1,7 @@
 import { diagram } from "@cardenelabs/cdl";
 import type { CdlDiagram } from "@cardenelabs/cdl";
 import type { DslDocument } from "../types";
-import { 図表の大きさ, 語の欄から参照できる名前 } from "./chart-fields";
+import { 図表の大きさ, 図表の大きさを読む, 数の欄から参照できる名前, 語の欄から参照できる名前 } from "./chart-fields";
 import { 箱の題 } from "./node-title";
 import type { CompileNotice } from "./notice";
 import { slugify } from "./slug";
@@ -17,13 +17,58 @@ export function compileQuadrant(
   onNotice?: (n: CompileNotice) => void,
 ): CdlDiagram {
   const b = diagram(slugify(doc.title), { topic: doc.title, type: "quadrant" });
-  const { w: W, h: H } = 図表の大きさ.quadrant;
+  const { w: W, h: H } = 図表の大きさを読む(doc, 図表の大きさ.quadrant);
   b.lane("chart", { width: W + 64 });
   const items: NonNullable<CdlDiagram["nodes"][number]["quadrantData"]>["items"] = [];
   const 読めない: string[] = [];
   const 参照できる = 語の欄から参照できる名前(doc, 区画);
+  const 数を参照できる = 数の欄から参照できる名前(doc);
+  const 伝える = (a: DslDocument["actors"][number], message: string): void => {
+    onNotice?.({
+      kind: "chart-value-unreadable",
+      actor: a.name,
+      line: a.atPos?.line ?? a.pos?.line ?? 0,
+      message,
+    });
+    if (typeof console !== "undefined" && console.warn) console.warn(`[dragon] ${message}`);
+  };
   for (const a of doc.actors) {
     const 語 = (a.value ?? a.subtitle ?? "").trim();
+    if (a.at !== undefined) {
+      const 座標 = 四象限の座標(a.at, 数を参照できる);
+      if (座標 === null) {
+        伝える(
+          a,
+          `type: quadrant で ${a.name} の at (${a.at.raw}) が読めません (図に載せません)。 at: [0.2, 0.8] の形で 0..1 の数か {状態名} を 2 つ書いてください`,
+        );
+        continue;
+      }
+      const 範囲外 = [
+        座標.x,
+        座標.y,
+        ...[座標.x, 座標.y].flatMap((v) =>
+          typeof v === "string" ? 状態が取る値(v, doc) : [],
+        ),
+      ].filter(
+        (v): v is number => typeof v === "number" && (v < 0 || v > 1),
+      );
+      if (範囲外.length > 0) {
+        伝える(
+          a,
+          `type: quadrant で ${a.name} の at (${a.at.raw}) が 0..1 の範囲外です (描画時に最寄りの端へ寄せます)`,
+        );
+      }
+      const q = 区画.get(語);
+      const 座標の区画 = 数の象限(座標);
+      if (q !== undefined && 座標の区画 !== undefined && q !== 座標の区画) {
+        伝える(
+          a,
+          `type: quadrant で ${a.name} の区画 (${語}) と at (${a.at.raw}) の象限が食い違います (at を採ります)`,
+        );
+      }
+      items.push({ id: slugify(a.name), title: 箱の題(a), at: 座標 });
+      continue;
+    }
     const 参照 = 語.match(/^\{(\w+)\}$/);
     if (参照) {
       if (!参照できる.has(参照[1]!)) {
@@ -65,10 +110,70 @@ export function compileQuadrant(
     w: W,
     h: H,
     quadrantData: { ...軸と区画の名前(doc), items },
+    ...(doc.quadrantPointLabelSide !== undefined
+      ? { quadrantPointLabelSide: doc.quadrantPointLabelSide }
+      : {}),
+    ...(doc.quadrantLabelPosition !== undefined ? { quadrantLabelPosition: doc.quadrantLabelPosition } : {}),
+    ...(doc.quadrantSize !== undefined ? { quadrantSize: doc.quadrantSize } : {}),
   });
   return b.build();
 }
 
+function 四象限の座標(
+  at: NonNullable<DslDocument["actors"][number]["at"]>,
+  参照できる: ReadonlySet<string>,
+): { x: number | string; y: number | string } | null {
+  if (!at.raw.startsWith("[") || !at.raw.endsWith("]") || at.x === undefined || at.y === undefined)
+    return null;
+  if (at.raw.slice(1, -1).split(",").length !== 2) return null;
+  const 読める = (v: number | string): boolean => {
+    if (typeof v === "number") return Number.isFinite(v);
+    const m = v.match(/^\{([\w-]+)\}$/);
+    return m !== null && 参照できる.has(m[1]!);
+  };
+  return 読める(at.x) && 読める(at.y) ? { x: at.x, y: at.y } : null;
+}
+
+/** 座標の `{状態名}` が、記法に書かれた範囲で取り得る数を集める。 */
+function 状態が取る値(参照: string, doc: DslDocument): number[] {
+  const m = 参照.match(/^\{([\w-]+)\}$/);
+  if (m === null) return [];
+  const 名前 = m[1]!;
+  const values: number[] = [];
+  const 数を加える = (value: unknown): void => {
+    if (typeof value === "number" && Number.isFinite(value)) values.push(value);
+    else if (typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value)))
+      values.push(Number(value));
+  };
+  let 初期値: unknown;
+  let 初期値あり = false;
+  for (const state of doc.animate?.states ?? []) {
+    if (state.name !== 名前) continue;
+    初期値 = state.initial;
+    初期値あり = true;
+  }
+  if (初期値あり) 数を加える(初期値);
+  for (const phase of doc.animate?.phases ?? []) {
+    for (const tween of phase.tweens ?? []) {
+      if (tween.state !== 名前) continue;
+      数を加える(tween.from);
+      数を加える(tween.to);
+    }
+    for (const set of phase.sets ?? []) if (set.state === 名前) 数を加える(set.value);
+  }
+  return values;
+}
+
+function 数の象限(at: { x: number | string; y: number | string }):
+  | "topLeft"
+  | "topRight"
+  | "bottomLeft"
+  | "bottomRight"
+  | undefined {
+  if (typeof at.x !== "number" || typeof at.y !== "number") return undefined;
+  return `${at.y >= 0.5 ? "top" : "bottom"}${at.x >= 0.5 ? "Right" : "Left"}`;
+}
+
 /** 軸を書かなかった時の名前。 何の軸か分からないため、位置をそのまま出す */
 const 軸の既定 = {
   xAxis: { left: "小さい", right: "大きい" },
@@ -87,24 +192,74 @@ const 軸の既定 = {
  *
  * 片側だけ書いた形では、書かなかった側は既定のままにする。 空文字を渡すと名前の無い軸が描かれる。
  */
-function 軸と区画の名前(doc: DslDocument): {
+function 軸と区画の名前(
+  doc: DslDocument,
+): Omit<NonNullable<CdlDiagram["nodes"][number]["quadrantData"]>, "items"> {
+  const 端 = 軸の名前(doc);
+  const x = doc.axes?.x;
+  const y = doc.axes?.y;
+  const xAxis = x !== undefined && "direction" in x && x.direction === true
+    ? { label: x.label, direction: true as const }
+    : 端.xAxis;
+  const yAxis = y !== undefined && "direction" in y && y.direction === true
+    ? { label: y.label, direction: true as const }
+    : 端.yAxis;
+  return { xAxis, yAxis, quadrantLabels: 区画の名前(doc, 端) };
+}
+
+/** 軸の両端の名前。 書かなかった側は既定のまま = 空文字を渡すと名前の無い軸が描かれる */
+function 軸の名前(doc: DslDocument): {
   xAxis: { left: string; right: string };
   yAxis: { bottom: string; top: string };
-  quadrantLabels: { topLeft: string; topRight: string; bottomLeft: string; bottomRight: string };
 } {
-  if (doc.axes === undefined) return 軸の既定;
-  const left = doc.axes.x?.left ?? 軸の既定.xAxis.left;
-  const right = doc.axes.x?.right ?? 軸の既定.xAxis.right;
-  const bottom = doc.axes.y?.bottom ?? 軸の既定.yAxis.bottom;
-  const top = doc.axes.y?.top ?? 軸の既定.yAxis.top;
+  if (doc.axes === undefined) return { xAxis: 軸の既定.xAxis, yAxis: 軸の既定.yAxis };
+  const x = doc.axes.x;
+  const y = doc.axes.y;
   return {
-    xAxis: { left, right },
-    yAxis: { bottom, top },
-    quadrantLabels: {
-      topLeft: `${top} × ${left}`,
-      topRight: `${top} × ${right}`,
-      bottomLeft: `${bottom} × ${left}`,
-      bottomRight: `${bottom} × ${right}`,
+    xAxis: {
+      left: x !== undefined && "left" in x ? x.left ?? 軸の既定.xAxis.left : 軸の既定.xAxis.left,
+      right: x !== undefined && "right" in x ? x.right ?? 軸の既定.xAxis.right : 軸の既定.xAxis.right,
+    },
+    yAxis: {
+      bottom: y !== undefined && "bottom" in y ? y.bottom ?? 軸の既定.yAxis.bottom : 軸の既定.yAxis.bottom,
+      top: y !== undefined && "top" in y ? y.top ?? 軸の既定.yAxis.top : 軸の既定.yAxis.top,
     },
   };
 }
+
+/**
+ * 区画の中に出す名前 (#2667)。
+ *
+ * 決め方は 3 段で、書いたものが勝つ。
+ *
+ * | 何を書いたか | 出る名前 |
+ * |---|---|
+ * | `regions:` にその区画を書いた | 書いた名前 |
+ * | `axes:` を書いた | 軸の掛け合わせ (`{上} × {左}`) |
+ * | どちらも書かない | 位置の名前 (`左上` 等) |
+ *
+ * **区画ごとに独立して決める**。 `regions:` を 1 つだけ書いた図で、残り 3 つが
+ * 位置の名前に戻ると「書いた所だけ変わる」 という読み方ができなくなる。
+ */
+function 区画の名前(
+  doc: DslDocument,
+  軸: { xAxis: { left: string; right: string }; yAxis: { bottom: string; top: string } },
+): { topLeft: string; topRight: string; bottomLeft: string; bottomRight: string } {
+  const 掛け合わせ =
+    doc.axes === undefined
+      ? 軸の既定.quadrantLabels
+      : {
+          topLeft: `${軸.yAxis.top} × ${軸.xAxis.left}`,
+          topRight: `${軸.yAxis.top} × ${軸.xAxis.right}`,
+          bottomLeft: `${軸.yAxis.bottom} × ${軸.xAxis.left}`,
+          bottomRight: `${軸.yAxis.bottom} × ${軸.xAxis.right}`,
+        };
+  const r = doc.regions;
+  if (r === undefined) return { ...掛け合わせ };
+  return {
+    topLeft: r.topLeft ?? 掛け合わせ.topLeft,
+    topRight: r.topRight ?? 掛け合わせ.topRight,
+    bottomLeft: r.bottomLeft ?? 掛け合わせ.bottomLeft,
+    bottomRight: r.bottomRight ?? 掛け合わせ.bottomRight,
+  };
+}

package/src/compile/record.ts

@@ -0,0 +1,75 @@
+import { CLASS_RELATION_LOOK } from "@cardenelabs/cdl";
+import type { CdlDiagram, CdlEdge, ClassRelationType, Tone } from "@cardenelabs/cdl";
+import type { DslDocument, DslStep } from "../types";
+
+import { ERの関係の指定を作る, ERの関係の矢印 } from "./er-relation";
+import { compileGenericWithAnimate } from "./generic";
+
+/** UML の関係を、印の形と同じ 3 群の色へ寄せる。描画側の classDiagram と同じ決まり。 */
+const クラスの関係の色: Record<ClassRelationType, Tone> = {
+  extends: "accent",
+  implements: "accent",
+  aggregates: "teal",
+  composes: "teal",
+  associates: "success",
+  uses: "success",
+};
+
+/**
+ * 箱が行を持つ図の組み立て (#2782)。
+ *
+ * 畳む前は `er` と `state` の 2 つに分かれており、それぞれが **2 つの経路** を持っていた。
+ * 動きか縦列 (表の図) か種類 (移り変わりの図) を書いた図は共通の経路へ、書かない図は
+ * 組み立て器 (`er()` / `stateMachine()`) の経路へ落ちていた。
+ *
+ * **経路は共通の 1 本だけにする**。 組み立て器の経路は書いた行を捨てており
+ * (`rows: []` を渡していた)、記法に行を書いても図に出なかった。 動きを 1 段足すだけで
+ * 行が現れる形になっていたので、同じ記法が同じ図になるほうへ倒す。
+ */
+export function compileRecord(doc: DslDocument): CdlDiagram {
+  return compileGenericWithAnimate(doc, {
+    kind: "record",
+    laneWidth: 縦列の幅(doc),
+    edgeDefaults: 関係の既定,
+  });
+}
+
+/**
+ * record の関係の既定 (#2783)。
+ *
+ * `relation` がある時だけ UML の関係として読み、`sub` は行き先、`tailSub` は出どころの
+ * 多重度にする。 relation の無い `sub` は従来どおり線の名前の下の行として残す。
+ * relation の有無を境にすることで、既存の record の補足を壊さず、class から移した本文も
+ * 同じ欄のまま同じ端へ置ける。
+ */
+function 関係の既定(s: DslStep): Partial<CdlEdge> {
+  if (s.relation === undefined) {
+    return ERの関係の矢印(ERの関係の指定を作る(s));
+  }
+
+  const 見た目 = CLASS_RELATION_LOOK[s.relation];
+  return {
+    label: s.label,
+    tone: クラスの関係の色[s.relation],
+    style: 見た目.style,
+    head: 見た目.head,
+    headFill: 見た目.fill,
+    tailHead: 見た目.tailHead,
+    tailHeadFill: 見た目.tailFill,
+    ...(s.sub !== undefined ? { headLabel: s.sub } : {}),
+    ...(s.tailSub !== undefined ? { tailLabel: s.tailSub } : {}),
+  };
+}
+
+/**
+ * 縦列の幅 (#2782)。
+ *
+ * **行を持つ箱があるかで決める**。 行を持つ箱は名前と型が左右に分かれて並ぶので幅が要り、
+ * 持たない箱は題だけなので要らない。 畳む前は図種ごとに持っていた値 (表の図 450 /
+ * 移り変わりの図 360) で、どちらも「行を持つか」 の言い換えだった。
+ *
+ * 書いた `lanes:` の幅はこの既定より強い (`compile/lanes.ts` が後から重ねる)。
+ */
+function 縦列の幅(doc: DslDocument): number {
+  return doc.actors.some((a) => (a.rows?.length ?? 0) > 0) ? 450 : 360;
+}

package/src/compile/row-marks.ts

@@ -0,0 +1,128 @@
+import type { RowMark } from "@cardenelabs/cdl";
+
+/**
+ * 行頭の印を dragon の語で決める (#2782)。
+ *
+ * 描画側が持つ印は 3 軸しかない。 形 (四角 / 山形) と 塗り (塗る / 中空) と
+ * 名前の下線で、この 3 軸に 1 対 1 で当たる語を dragon 自身が持つ。
+ *
+ * | 語 | 軸 | 意味 |
+ * |---|---|---|
+ * | `鍵` | 名前に下線を引く | その行で箱を見分ける |
+ * | `外` | 行頭を山形にする | その行は箱の外とつながる |
+ * | `条件` | 行頭を中空にする | その行は条件が揃った時だけ効く |
+ *
+ * 畳む前は 図種ごとに語を持っていた (表の図は `pk` / `fk` / `opt`、移り変わりの図は
+ * `entry` / `exit` / `do` / `internal`)。 2 つの語彙は同じ 2 軸の格子を別の名前で
+ * 呼んでいただけで、格子の 4 隅は 1 対 1 に重なる。
+ *
+ * |  | 塗る | 中空 |
+ * |---|---|---|
+ * | 四角 | 語なし / `do` | `条件` / `opt` / `internal` |
+ * | 山形 | `外` / `fk` / `entry` | `外 条件` / `fk opt` / `exit` |
+ *
+ * 古い語から dragon の語への読み替えは本 file の `行頭の語へ読み替える` が持ち、
+ * 読み取りの入口 (記法 / JSON の 2 経路) が通す。 印にする時点で古い語は 1 つも残っていない。
+ */
+export const 行頭の語 = ["鍵", "外", "条件"] as const;
+
+export type 行頭の語 = (typeof 行頭の語)[number];
+
+/**
+ * 行頭の印の古い語から dragon の 3 語への読み替え (#2782)。
+ *
+ * **ここは図種の別名と向きが違う**。 図種の `er` / `state` は綴りごと消したが (畳んだ先の
+ * `record` が別の名前なので、古い綴りを残すと「名前を無くす」 という目的が達たない)、
+ * 行頭の語は残す = 語が指す印は 1 つに決まっており、`pk` と `鍵` は同じ絵になる。
+ *
+ * 読み替え先は空白区切りの語。 `exit` だけが 2 語になる = 山形 + 中空 の 2 軸を同時に動かす。
+ */
+const 行頭の語の別名: ReadonlyMap<string, string> = new Map([
+  ["pk", "鍵"],
+  ["fk", "外"],
+  ["opt", "条件"],
+  ["entry", "外"],
+  ["exit", "外 条件"],
+  ["do", ""],
+  ["internal", "条件"],
+]);
+
+/**
+ * 1 行分の印の語を dragon の 3 語に揃える (#2782)。
+ *
+ * 1 行に語を 2 つ以上書ける (`pk fk` の形) ので、語ごとに引いて繋ぎ直す。
+ * 知らない語はそのまま通す = 組み立て側が無視するため、書いた人が気付ける形は変わらない。
+ *
+ * **読み取りの入口は 3 経路ある** (縦に並べた形 / 中括弧の形 / JSON)。 3 つとも本 file の
+ * この関数を通す = 1 経路でも素通りさせると、その書き方だけ古い語が印を持たないまま通る
+ * (中括弧の形が実際にそうなっていた)。
+ */
+export function 行頭の語へ読み替える(値: string): string {
+  const 語 = 値.trim().split(/\s+/).filter(Boolean);
+  if (語.length === 0) return 値;
+  return 語
+    .map((w) => 行頭の語の別名.get(w) ?? w)
+    .filter((w) => w !== "")
+    .join(" ");
+}
+
+/**
+ * 書いた語を行頭の印にする (#2782)。
+ *
+ * **語を書かない行にも既定の印を付ける**。 四角 + 塗る + 下線なしで、箱の中で完結して
+ * 常に在る行を表す。
+ *
+ * 印なしにすると、書かなかった行だけ行頭が空いて **群の区切りと見分けが付かなくなる**
+ * (群の区切りは行頭の印が持っている)。 畳む前の表の図が同じ理由で既定を配っていた。
+ */
+export function 行頭の印にする(
+  marks: readonly (string | { mark: string; tone?: "primary" | "muted" })[],
+  行数: number,
+): (RowMark | null)[] {
+  return Array.from({ length: 行数 }, (_, i) => {
+    const 値 = marks[i] ?? "";
+    const 語 = (typeof 値 === "string" ? 値 : 値.mark).trim().split(/\s+/).filter(Boolean);
+    return {
+      shape: 語.includes("外") ? ("chevron" as const) : ("square" as const),
+      filled: !語.includes("条件"),
+      ...(typeof 値 === "object" && 値.tone !== undefined ? { tone: 値.tone } : {}),
+      ...(語.includes("鍵") ? { underline: true } : {}),
+    };
+  });
+}
+
+/**
+ * 箱を見分ける行を上にまとめる (#2782)。
+ *
+ * `鍵` を書いた行を先に、残りを後に置く。 畳む前の表の図が同じ並べ替えをしていた
+ * (組み立て器 `er()` と同じ形)。 `鍵` を 1 つも書かない図では並びが 1 行も動かない。
+ *
+ * **空の行では群を分けない**。 群の区切りは行頭の印が持っており、空の行を挟むと
+ * 行の間隔が不揃いになる (描画側が cdl 0.23.0 で空の行をやめた)。
+ */
+export function 鍵の行を上にまとめる(
+  rows: readonly string[],
+  印: readonly (RowMark | null)[],
+): { rows: string[]; rowMarks: (RowMark | null)[] } {
+  const 鍵: number[] = [];
+  const 値: number[] = [];
+  rows.forEach((_, i) => ((印[i]?.underline === true ? 鍵 : 値).push(i)));
+  const 並び = [...鍵, ...値];
+  return {
+    rows: 並び.map((i) => rows[i] ?? ""),
+    rowMarks: 並び.map((i) => 印[i] ?? null),
+  };
+}
+
+/**
+ * 行頭の印を読む図種か (#2782)。
+ *
+ * **図種の名前を案内の文に写さない**。 読む図種を足した日に案内だけが古くなるため、
+ * 知らせを組む側はここに聞く (`compile.ts` の `行頭の印を読む図種`)。
+ *
+ * 畳む前は 2 図種 (表の図 / 移り変わりの図) が別の語彙で読んでいた。 クラス図は行を
+ * 組み立て器が作るので読まない。
+ */
+export function 行頭の印を読むか(type: string): boolean {
+  return type === "record";
+}

package/src/compile/sequence.ts

@@ -1,13 +1,17 @@
 import { sequence, sequenceStepId } from "@cardenelabs/cdl";
 import type { CdlDiagram } from "@cardenelabs/cdl";
-import type { DslDocument } from "../types";
+import type { DslActor, DslDocument } from "../types";
 
 import { parseFocusEntry } from "../focus";
+import { 並べ替えた文書 } from "./order";
 import { 箱の題 } from "./node-title";
 
 import { slugify } from "./slug";
 
 export function compileSequence(doc: DslDocument): CdlDiagram {
+  // **書いた並び順を先に当てる** (#2655)。 以降は並べ替え済の箱で組む = 板の見出しも
+  // 端の番号も同じ並びから決まる。 書かなかった図は同じ文書がそのまま返る
+  doc = 並べ替えた文書(doc);
   // v0.3 ... アニメーション 有無で経路を分岐。
   // 有り = builder 直接経路で state / 複数 phase を注入。
   /*
@@ -16,31 +20,24 @@ export function compileSequence(doc: DslDocument): CdlDiagram {
    * 順序図は 1 つの箱が図を丸ごと描く形になり、言づては箱の中の行になった。 段ごとに
    * 別経路で箱と縦線を組む形 (`compileSequenceWithAnimate`) では、その骨格が出ない。
    */
-  const seqBuilder = sequence({
-    id: slugify(doc.title),
-    topic: doc.title,
-    /*
-     * 見出しに出すのは **書いた題** (#1466)。 名前は矢印の端として指すためのもので、
-     * `title:` を書いたらそちらを出す (`箱の題`)。 板でも他の図種と同じ規約にする。
-     */
-    actors: doc.actors.map((a) =>
-      a.subtitle ? { name: 箱の題(a), subtitle: a.subtitle } : 箱の題(a),
-    ),
-    ...(doc.bands && doc.bands.length > 0 ? { bands: doc.bands } : {}),
-  });
-  for (const s of doc.flow) {
-    seqBuilder.step({
-      from: s.from,
-      to: s.to,
-      label: s.label,
-      ...(s.sub ? { sub: s.sub } : {}),
-      ...(s.side ? { side: s.side } : {}),
-      ...(s.tone ? { tone: s.tone } : {}),
-      ...(s.style ? { style: s.style } : {}),
-      ...(s.msgKind ? { kind: s.msgKind } : {}),
-    });
-  }
-  const built = seqBuilder.build();
+  /*
+   * **見出しと端の番号を別の組み立てで決める** (#2408)。
+   *
+   * 見出しに出すのは書いた題 (#1466)、 矢印の端と帯は名前で指す (`箱の題` の doc comment)。
+   * 組み立て器は渡された面の名前 1 つから「見出し」 と「端を引く表」 の両方を作るため、
+   * 題を渡すと名前で指した端が 1 度も見つからず、 番号 0 (先頭の面) に倒れる
+   * (実測 = 全ての面に題を付けると、 言づてが全て先頭の面の自分宛てになった)。
+   *
+   * 板の幅と高さは見出しの字幅と言づての文字と件数から決まり、 端の番号には依らない
+   * (組み立て器の `sequenceBoardMetrics`)。 そこで題で組んだ板を土台にし、 端の番号と帯だけを
+   * 名前で組んだ板から写す。 名前は図の中で 1 つに決まるので、 題が重なる図でも番号は正しい。
+   *
+   * 題と名前がどの面でも同じなら 2 回目は組まない = 題を書かない図は組み上がりが変わらない。
+   */
+  const 見出しの板 = 板を組む(doc, 箱の題);
+  const built = doc.actors.some((a) => 箱の題(a) !== a.name)
+    ? 端を写す(見出しの板, 板を組む(doc, (a) => a.name))
+    : 見出しの板;
   const 段 = doc.animate?.phases ?? [];
   if (段.length === 0) return built;
   /*
@@ -79,6 +76,88 @@ export function compileSequence(doc: DslDocument): CdlDiagram {
   };
 }
 
+/**
+ * 順序図の板を 1 枚組む。 面の名前として組み立て器へ渡すものだけを `面の名` で差し替える。
+ *
+ * 組み立て器はこの名前から見出しと「端を引く表」 を作る。 言づての端と帯は書いた名前のまま渡す。
+ */
+function 板を組む(doc: DslDocument, 面の名: (a: DslActor) => string): CdlDiagram {
+  const b = sequence({
+    id: slugify(doc.title),
+    topic: doc.title,
+    actors: doc.actors.map((a) =>
+      a.subtitle ? { name: 面の名(a), subtitle: a.subtitle } : 面の名(a),
+    ),
+    ...(doc.bands && doc.bands.length > 0 ? { bands: doc.bands } : {}),
+    ...(doc.sequenceActorForm !== undefined ? { sequenceActorForm: doc.sequenceActorForm } : {}),
+    ...(doc.sequenceLabelForm !== undefined ? { sequenceLabelForm: doc.sequenceLabelForm } : {}),
+    ...(doc.sequenceReturnHead !== undefined ? { sequenceReturnHead: doc.sequenceReturnHead } : {}),
+    ...(doc.sequenceKindLabels !== undefined ? { sequenceKindLabels: doc.sequenceKindLabels } : {}),
+    ...(doc.sequenceRowGap !== undefined ? { sequenceRowGap: doc.sequenceRowGap } : {}),
+    ...(doc.sequenceGutter !== undefined ? { sequenceGutter: doc.sequenceGutter } : {}),
+    ...(doc.sequenceBandWidth !== undefined ? { sequenceBandWidth: doc.sequenceBandWidth } : {}),
+    ...(doc.sequenceSelfLoop !== undefined ? { sequenceSelfLoop: doc.sequenceSelfLoop } : {}),
+  });
+  for (const s of doc.flow) {
+    b.step({
+      from: s.from,
+      to: s.to,
+      label: s.label,
+      ...(s.sub ? { sub: s.sub } : {}),
+      ...(s.side ? { side: s.side } : {}),
+      ...(s.tone ? { tone: s.tone } : {}),
+      ...(s.style ? { style: s.style } : {}),
+      ...(s.msgKind ? { kind: s.msgKind } : {}),
+    });
+  }
+  const built = b.build();
+  if (doc.sequenceGutter === undefined || doc.viewport?.width === undefined) return built;
+  const canvasWidth = doc.viewport.width;
+
+  /*
+   * `sequenceGutter` は見本の canvas 原点から最初の糸を決める。cdl の sequence preset は
+   * 板の左右へさらに lane padding を足すため、そのままでは gutter 610 の糸が 25 右へずれ、
+   * 1800 の canvas も 1948 まで広がる。幅を書いた図では lane の左右 25 ずつを除いた幅を
+   * 板へ渡し、layout 後の lane を canvas 幅に揃える。gutter + 列幅 / 2 は板の原点から測る。
+   * 幅を書かない従来図は cdl の自動幅を保つ。
+   */
+  return {
+    ...built,
+    lanes: built.lanes.map((lane) => lane.id === "seq" ? { ...lane, width: canvasWidth } : lane),
+    nodes: built.nodes.map((node) => node.kind === "sequence-board"
+      ? { ...node, w: Math.max(1, canvasWidth - 50) }
+      : node),
+  };
+}
+
+/**
+ * 見出しで組んだ板へ、 名前で組んだ板の「言づての端」 と「帯」 を写す (#2408)。
+ *
+ * 写すのはこの 2 つだけ。 板の大きさ・見出し・言づての文字は見出しで組んだ板のものを使う。
+ * 帯は書かない時も組み立て器が言づての端から導くため、 端と一緒に写さないと導いた帯がずれる。
+ */
+function 端を写す(見出し: CdlDiagram, 名前: CdlDiagram): CdlDiagram {
+  const 名前の板 = 名前.nodes.find((n) => n.kind === "sequence-board")?.sequenceData;
+  if (!名前の板) return 見出し;
+  return {
+    ...見出し,
+    nodes: 見出し.nodes.map((n) => {
+      if (n.kind !== "sequence-board" || !n.sequenceData) return n;
+      return {
+        ...n,
+        sequenceData: {
+          ...n.sequenceData,
+          messages: n.sequenceData.messages.map((m, i) => {
+            const 正 = 名前の板.messages[i];
+            return 正 ? { ...m, from: 正.from, to: 正.to } : m;
+          }),
+          bands: 名前の板.bands,
+        },
+      };
+    }),
+  };
+}
+
 /** 名前が同じ箱を指すか。 書いた名前のほか、 id の形 (`api-gateway`) で書いた指定も受ける */
 function 同じ箱(a: string, b: string): boolean {
   return a === b || slugify(a) === slugify(b);

package/src/compile/slug.ts

@@ -16,13 +16,21 @@ export const ID_MAX = 64;
  *
  * 英数字と日本語と `-` `_` だけを残し、それ以外は `-` にまとめる。 前後の `-` は落とす。
  * 何も残らなければ `n` を返す = 空の id は図の参照先にできないため。
+ *
+ * **カタカナは伸ばす音 (`ー`) まで残す** (#2431)。 `ヶ` (U+30F6) で切ると `ー` (U+30FC) が
+ * 範囲の外へ落ち、`フロー` が `フロ-` になる。 読めない字が一覧に出るだけでなく、
+ * `ユーザー` と `ユーザ` が同じ `ユ-ザ` に潰れる (末尾の `-` も落ちるため完全に一致する)。
+ * 矢印は id で端を指すので、潰れると別の箱へ向かう。
+ *
+ * **区切りに使う記号は残さない**。 `・` (U+30FB) と `ヽヾ` (U+30FD-E) は範囲の外に置く =
+ * `東京・大阪` の `・` は名前の区切りで、字として残すと 1 つの名前に見える。
  */
 export function slugify(s: string): string {
   return (
     s
       .toLowerCase()
       .normalize("NFKC")
-      .replace(/[^a-z0-9ぁ-んァ-ヶ一-龯\-_]+/g, "-")
+      .replace(/[^a-z0-9ぁ-んァ-ヺー一-龯\-_]+/g, "-")
       .replace(/^-+|-+$/g, "")
       .slice(0, ID_MAX) || "n"
   );