@cardenelabs/cdl 0.52.0 → 0.54.0

package/dist/{render-C0PJ2weJ.d.cts → render-Cp41meYv.d.cts}

@@ -105,7 +105,7 @@ type Side = "top" | "right" | "bottom" | "left";
  * - "dashed" ... 刻んだ線。 **光っていても刻みのまま**。
  *
  * `"dashed"` が要るのは、`"solid"` の刻みが「光っていない」 を表す合図に使われているため。
- * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「満たす」 と「使う」、
+ * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「実装」 と「依存」、
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
@@ -139,8 +139,8 @@ declare const EDGE_STYLES: readonly EdgeStyle[];
  * 4 通りを 2 つの欄に分けないのは、**端の印は 1 つの記号として読まれる**ため。 欄を分けると
  * 片方だけ書いた形 (個数はあるが任意かが無い) を許すことになり、描けない組み合わせが増える。
  *
- * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
- * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
+ * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継承) と
+ * 破線 × 三角 (実装) は線種で分かれ、実線 × 三角 (継承) と実線 × 菱 (集約) は端で分かれる。
  * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
  */
 type EdgeHead = "none" | "triangle" | "diamond" | "open" | "crow" | "one" | "zero-one" | "many" | "zero-many";
@@ -154,7 +154,8 @@ declare const EDGE_HEADS: readonly EdgeHead[];
  * - `"solid"` ... 墨で塗る。 **既定**。 書かなければ形ごとの既定 (`EDGE_HEAD_SHAPE.filled`) に従う
  * - `"hollow"` ... 紙の色で塗り、輪郭だけを線で描く
  *
- * UML は同じ形を塗りで分ける = 白抜きの菱が「持つ」、塗った菱が「抱える」 (命が同じ)。
+ * UML は同じ形を塗りで分ける = 白抜きの菱が「集約」、塗った菱が「コンポジション」
+ * (部分が全体と寿命を共にする)。
  * 形を増やして表そうとすると、塗りの軸を持つ全ての形について語が倍になる。
  *
  * 塗らない形 (`"open"` / `"crow"`) には効かない。 元から輪郭しか無いため。
@@ -664,8 +665,8 @@ type CdlEdge = {
     /**
      * 端の印の塗り方 (#578)。 書かなければ形ごとの既定。 塗らない形には効かない。
      *
-     * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 持つ /
-     * 塗った菱 = 抱える)。
+     * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 集約 /
+     * 塗った菱 = コンポジション)。
      */
     headFill?: EdgeHeadFill;
     /**

package/dist/{render-C0PJ2weJ.d.ts → render-Cp41meYv.d.ts}

@@ -105,7 +105,7 @@ type Side = "top" | "right" | "bottom" | "left";
  * - "dashed" ... 刻んだ線。 **光っていても刻みのまま**。
  *
  * `"dashed"` が要るのは、`"solid"` の刻みが「光っていない」 を表す合図に使われているため。
- * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「満たす」 と「使う」、
+ * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「実装」 と「依存」、
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
@@ -139,8 +139,8 @@ declare const EDGE_STYLES: readonly EdgeStyle[];
  * 4 通りを 2 つの欄に分けないのは、**端の印は 1 つの記号として読まれる**ため。 欄を分けると
  * 片方だけ書いた形 (個数はあるが任意かが無い) を許すことになり、描けない組み合わせが増える。
  *
- * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
- * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
+ * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継承) と
+ * 破線 × 三角 (実装) は線種で分かれ、実線 × 三角 (継承) と実線 × 菱 (集約) は端で分かれる。
  * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
  */
 type EdgeHead = "none" | "triangle" | "diamond" | "open" | "crow" | "one" | "zero-one" | "many" | "zero-many";
@@ -154,7 +154,8 @@ declare const EDGE_HEADS: readonly EdgeHead[];
  * - `"solid"` ... 墨で塗る。 **既定**。 書かなければ形ごとの既定 (`EDGE_HEAD_SHAPE.filled`) に従う
  * - `"hollow"` ... 紙の色で塗り、輪郭だけを線で描く
  *
- * UML は同じ形を塗りで分ける = 白抜きの菱が「持つ」、塗った菱が「抱える」 (命が同じ)。
+ * UML は同じ形を塗りで分ける = 白抜きの菱が「集約」、塗った菱が「コンポジション」
+ * (部分が全体と寿命を共にする)。
  * 形を増やして表そうとすると、塗りの軸を持つ全ての形について語が倍になる。
  *
  * 塗らない形 (`"open"` / `"crow"`) には効かない。 元から輪郭しか無いため。
@@ -664,8 +665,8 @@ type CdlEdge = {
     /**
      * 端の印の塗り方 (#578)。 書かなければ形ごとの既定。 塗らない形には効かない。
      *
-     * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 持つ /
-     * 塗った菱 = 抱える)。
+     * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 集約 /
+     * 塗った菱 = コンポジション)。
      */
     headFill?: EdgeHeadFill;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.52.0",
+  "version": "0.54.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/layout/head-label.ts

@@ -7,7 +7,7 @@
  * 端での線の向きで決める。 端から `端の字を戻す距離` だけ線を戻った点を基準に、線の脇へ置く。
  * 字は端に近い側の縁を基準点に揃える = 字の長さが変わっても、端から字までの隙間は変わらない。
  *
- * **線の札の反対側に置く**。 札と同じ側に置くと、札の語と多重度が続けて読まれる (「持つ」 の
+ * **線の札の反対側に置く**。 札と同じ側に置くと、札の語と多重度が続けて読まれる (「集約」 の
  * 隣に `1..*`、 英字の頃は「HAS1」)。 実測で、札と同じ側 (横向きなら上、縦向きなら右) に
  * 置く形は見本帳のクラス図で 1 本が札と重なり、 もう 1 本が札と 2 world まで寄った。
  * 札を持たない線は、横向きなら下、縦向きなら左に置く (engine が札を置く既定の側の反対)。
@@ -25,7 +25,7 @@ import { measureTextWidth } from "./text-width";
  * 端から字までの、線に沿った距離 (world)。
  *
  * 端の印の長さの最大 (光っている時の 14、 `render/stage.tsx` の marker の大きさ) に隙間 8 を足す。
- * 印を持たない端 (菱が出どころ側にある「持つ」 「抱える」 の行き先) でも同じ距離にする = 端ごとに
+ * 印を持たない端 (菱が出どころ側にある「集約」 「コンポジション」 の行き先) でも同じ距離にする = 端ごとに
  * 距離が変わると、図の中で多重度の位置が揃わない。
  */
 export const 端の字を戻す距離 = 22;
@@ -42,6 +42,30 @@ const 箱の高さ = Math.round(端の字の大きさ * 1.2);
 /** 字の大きさに対する baseline の深さ。 等幅の字の ascent が字の大きさの 8 割ほど */
 const BASELINE_RATIO = 0.8;
 
+/**
+ * 両端に字がある線で、2 つの字の間に空ける長さ (world)。
+ *
+ * 字と自分の端の間 (`端の字を戻す距離`) の 2 倍にする = 字が自分の端より相手の字の近くに
+ * 見えなくなる。 実測で、間が 10 だった短い縦の線 (長さ 100) は 2 つの字が 2 行の札のように
+ * 読まれ、どちらの端の数かが分からなかった (#829)。
+ */
+export const 両端の字の間 = 端の字を戻す距離 * 2;
+
+/**
+ * 端の字を線の同じ側に並べた時、線に沿って要る長さ (world)。 字が無い線は 0。
+ *
+ * 字は端から `端の字を戻す距離` 戻った所から、線に沿って `箱の高さ` だけ占める (縦向きの時)。
+ * 両端にあれば、その 2 つの間に `両端の字の間` を足す。 縦に隣り合う箱の間隔を決める
+ * `layout/nodes.ts` が使う = 間隔が線の長さそのものになる形だけが対象。
+ */
+export function 端の字に要る線の長さ(edge: { headLabel?: string; tailLabel?: string }): number {
+  const 一つ分 = 端の字を戻す距離 + 箱の高さ;
+  const 数 = [edge.headLabel, edge.tailLabel].filter((t) => t?.trim()).length;
+  if (数 === 0) return 0;
+  if (数 === 1) return 一つ分;
+  return 一つ分 * 2 + 両端の字の間;
+}
+
 /** どちらの端か。 `head` = 行き先 (`to`)、 `tail` = 出どころ (`from`) */
 export type 線の端 = "head" | "tail";
 

package/src/layout/nodes.ts

@@ -1,5 +1,6 @@
 import { requiredRowsWidth } from "../kinds/row-align";
 import type { CdlDiagram, LaidLane, LaidNode } from "../types";
+import { 端の字に要る線の長さ } from "./head-label";
 import {
   hasRenderedLabel,
   labelPillH,
@@ -138,9 +139,9 @@ function requiredStackGapForEdgeLabels(diag: CdlDiagram, allStacks: readonly num
 
   // 同じ隙間 (lane + 上側 row の rank) を通る label の pill 高を集める。
   const pillHsByGap = new Map<string, number[]>();
+  // 端の字 (#829) は線の端から測るので、隙間ごとに集めず線 1 本ずつの長さで足りる
+  let 端の字の要求 = 0;
   for (const e of diag.edges) {
-    // `label` が空でも `sub` があれば pill は描かれ、 その高さ (68) の分だけ隙間が要る (Issue #224)。
-    if (!hasRenderedLabel(e)) continue;
     const from = byId.get(e.from);
     const to = byId.get(e.to);
     if (!from || !to) continue;
@@ -149,11 +150,14 @@ function requiredStackGapForEdgeLabels(diag: CdlDiagram, allStacks: readonly num
     const toRank = rankOf.get(to.stack);
     if (fromRank === undefined || toRank === undefined) continue;
     if (Math.abs(fromRank - toRank) !== 1) continue;
+    端の字の要求 = Math.max(端の字の要求, 端の字に要る線の長さ(e));
+    // `label` が空でも `sub` があれば pill は描かれ、 その高さ (68) の分だけ隙間が要る (Issue #224)。
+    if (!hasRenderedLabel(e)) continue;
     const key = `${from.lane}::${Math.min(fromRank, toRank)}`;
     pillHsByGap.set(key, [...(pillHsByGap.get(key) ?? []), labelPillH(e.sub)]);
   }
 
-  let required = 0;
+  let required = 端の字の要求;
   for (const pillHs of pillHsByGap.values()) {
     required = Math.max(required, requiredVerticalLabelGap(pillHs));
   }

package/src/presets.ts

@@ -345,7 +345,7 @@ export function flow(preset: FlowPreset): FlowBuilder {
     build() {
       b.phase(
         "flow",
-        { duration: 2400, title: preset.topic, body: "全 step 順次実行。" },
+        { duration: 2400, title: preset.topic, body: "すべての段を上から順に通った流れ。" },
         (p) => p.activate(...phaseActivate).badge("flow"),
       );
       return b.build();
@@ -366,7 +366,7 @@ export function flow(preset: FlowPreset): FlowBuilder {
  * | `return` | 破線 | 開いた矢 | 呼ばれた側から戻る。 新しい仕事ではないので線を切る |
  * | `fire` | 実線 | 開いた矢 | 返事を待たない。 実線だが矢を閉じないことで待たないと示す |
  *
- * 印の形はクラス図の「継ぐ」 と「結ぶ」 で使った形そのもの。 **意味は違う** (あちらは親を
+ * 印の形はクラス図の「継承」 と「関連」 で使った形そのもの。 **意味は違う** (あちらは親を
  * 指す / こちらは返事を待つか) が、形の並びは共有できる。
  */
 export type SequenceMessageKind = "call" | "return" | "fire";
@@ -517,7 +517,7 @@ export function sequence(preset: SequencePreset): SequenceBuilder {
       });
       b.phase(
         "sequence",
-        { duration: 2400, title: preset.topic, body: "sequence の全 message を時系列展開。" },
+        { duration: 2400, title: preset.topic, body: "すべてのやり取りを時間の順に並べた姿。" },
         (p) => p.activate(preset.id).badge("sequence"),
       );
       return b.build();
@@ -653,7 +653,7 @@ export function topology(preset: TopologyPreset): TopologyBuilder {
     build() {
       b.phase(
         "topo",
-        { duration: 2400, title: preset.topic, body: "topology の全 container + connection を visible 化。" },
+        { duration: 2400, title: preset.topic, body: "すべての構成要素と接続を並べた構成。" },
         (p) => p.activate(...phaseActivate).badge("topology"),
       );
       return b.build();
@@ -883,7 +883,7 @@ export function er(preset: ErPreset): ErBuilder {
     build() {
       b.phase(
         "er",
-        { duration: 2400, title: preset.topic, body: "ER 図の全 entity + relation を visible 化。" },
+        { duration: 2400, title: preset.topic, body: "すべての表と関係を並べた構造。" },
         (p) => p.activate(...phaseActivate).badge("er"),
       );
       return b.build();
@@ -1158,7 +1158,7 @@ export function stateMachine(preset: StateMachinePreset): StateMachineBuilder {
 
       b.phase(
         "fsm",
-        { duration: 2400, title: preset.topic, body: "FSM の全 state + transition を visible 化。" },
+        { duration: 2400, title: preset.topic, body: "すべての状態と遷移を並べた姿。" },
         (p) => p.activate(...phaseActivate).badge("fsm"),
       );
       return b.build();
@@ -1291,7 +1291,7 @@ export function infrastructure(preset: InfrastructurePreset): InfrastructureBuil
     build() {
       b.phase(
         "infra",
-        { duration: 2400, title: preset.topic, body: "infrastructure 全 node + connection を visible 化。" },
+        { duration: 2400, title: preset.topic, body: "すべての構成要素と接続を並べた構成。" },
         (p) => p.activate(...phaseActivate).badge("infrastructure"),
       );
       return b.build();
@@ -1322,12 +1322,12 @@ export type ClassRelationType =
  *
  * | 種類 | 線 | 形 | 塗り | 側 | 意味 |
  * |---|---|---|---|---|---|
- * | `extends` | 実線 | 三角 | 白抜き | 行き先 | 継ぐ |
- * | `implements` | 破線 | 三角 | 白抜き | 行き先 | 満たす |
- * | `aggregates` | 実線 | 菱 | 白抜き | 出どころ | 持つ |
- * | `composes` | 実線 | 菱 | 塗る | 出どころ | 抱える |
- * | `associates` | 実線 | 開いた矢 | — | 行き先 | 結ぶ |
- * | `uses` | 破線 | 開いた矢 | — | 行き先 | 使う |
+ * | `extends` | 実線 | 三角 | 白抜き | 行き先 | 継承 |
+ * | `implements` | 破線 | 三角 | 白抜き | 行き先 | 実装 |
+ * | `aggregates` | 実線 | 菱 | 白抜き | 出どころ | 集約 |
+ * | `composes` | 実線 | 菱 | 塗る | 出どころ | コンポジション |
+ * | `associates` | 実線 | 開いた矢 | — | 行き先 | 関連 |
+ * | `uses` | 破線 | 開いた矢 | — | 行き先 | 依存 |
  *
  * **側が種で割れるのが要点**。 三角は「この先が親」 を指すので行き先に立ち、菱は
  * 「この箱が持っている」 を指すので出どころに立つ。 1 つの決まりで書こうとするとどちらかが
@@ -1594,7 +1594,7 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
 
       b.phase(
         "class",
-        { duration: 2400, title: preset.topic, body: "UML class 全 class + relation を visible 化。" },
+        { duration: 2400, title: preset.topic, body: "すべてのクラスと関係を並べた構造。" },
         (p) => p.activate(...phaseActivate).badge("class"),
       );
       return b.build();
@@ -1673,7 +1673,7 @@ export function tree(preset: TreePreset): TreeBuilder {
       });
       b.phase(
         "tree",
-        { duration: 2400, title: preset.topic, body: "tree の全 node + parent-child edge を hierarchical layout で描画。" },
+        { duration: 2400, title: preset.topic, body: "すべての項目を親子の階層で並べた木。" },
         (p) => p.activate(nodeId).badge("tree"),
       );
       return b.build();
@@ -1756,7 +1756,7 @@ export function userJourney(preset: UserJourneyPreset): UserJourneyBuilder {
       });
       b.phase(
         "journey",
-        { duration: 2400, title: preset.topic, body: "userJourney 全 step を感情曲線 + touchpoint で描画。" },
+        { duration: 2400, title: preset.topic, body: "すべての段階を、気持ちの曲線と接点で並べた体験。" },
         (p) => p.activate(nodeId).badge("journey"),
       );
       return b.build();
@@ -1844,7 +1844,7 @@ export function mindMap(preset: MindMapPreset): MindMapBuilder {
       });
       b.phase(
         "mindmap",
-        { duration: 2400, title: preset.topic, body: "mindMap 全 branch を visible 化、 中心 + 放射で描画。" },
+        { duration: 2400, title: preset.topic, body: "中心の主題から、すべての枝を放射状に広げた姿。" },
         (p) => p.activate(nodeId).badge("mindmap"),
       );
       return b.build();
@@ -1920,7 +1920,7 @@ export function funnel(preset: FunnelPreset): FunnelBuilder {
       });
       b.phase(
         "funnel",
-        { duration: 2400, title: preset.topic, body: "funnel 全 stage を逆三角形 + count で描画。" },
+        { duration: 2400, title: preset.topic, body: "すべての段階を、人数とともに上から絞り込んだ姿。" },
         (p) => p.activate(nodeId).badge("funnel"),
       );
       return b.build();
@@ -2018,7 +2018,7 @@ export function quadrant(preset: QuadrantPreset): QuadrantBuilder {
       });
       b.phase(
         "quadrant",
-        { duration: 2400, title: preset.topic, body: "quadrant 十字軸 + 4 象限 + item を描画。" },
+        { duration: 2400, title: preset.topic, body: "2 本の軸で分けた 4 つの枠に、すべての項目を置いた姿。" },
         (p) => p.activate(nodeId).badge("quadrant"),
       );
       return b.build();
@@ -2134,7 +2134,7 @@ export function chart(preset: ChartPreset): ChartBuilder {
       });
       b.phase(
         "chart",
-        { duration: 2400, title: preset.topic, body: `${preset.type} chart の全 datum を visible 化。` },
+        { duration: 2400, title: preset.topic, body: "すべての値を描いたグラフ。" },
         (p) => p.activate(nodeId).badge(preset.type),
       );
       return b.build();
@@ -2254,7 +2254,7 @@ export function gantt(preset: GanttPreset): GanttBuilder {
       });
       b.phase(
         "gantt",
-        { duration: 2400, title: preset.topic, body: "gantt 全 task を visible 化、 帯状 timeline + 依存 arrow で描画。" },
+        { duration: 2400, title: preset.topic, body: "すべての作業を、期間の帯と前後関係の矢印で並べた工程。" },
         (p) => p.activate(nodeId).badge("gantt"),
       );
       return b.build();
@@ -2307,12 +2307,16 @@ const SHAPE_KIND: Record<FlowchartNodeShape, NodeKind> = {
   loop: "card",
 };
 
+/**
+ * 箱の上に出す形の名前 (#835)。 流れ図の記号の呼び方 (JIS X 0121 の 処理 / 判断 / 端子) に合わせる。
+ * 端子は始まりと終わりで分けて書く = 同じ「端子」 では、どちらの端かが読めない。
+ */
 const SHAPE_EYEBROW: Record<FlowchartNodeShape, string> = {
-  process: "process",
-  decision: "decision",
-  start: "start",
-  end: "end",
-  loop: "loop",
+  process: "処理",
+  decision: "判断",
+  start: "開始",
+  end: "終了",
+  loop: "繰り返し",
 };
 
 /**
@@ -2381,7 +2385,7 @@ export function flowchart(preset: FlowchartPreset): FlowchartBuilder {
     build() {
       b.phase(
         "flowchart",
-        { duration: 2400, title: preset.topic, body: "flowchart 全 node + edge を visible 化、 swimlane + decision を表現。" },
+        { duration: 2400, title: preset.topic, body: "すべての処理と分岐を、担当ごとのレーンに並べた流れ。" },
         (p) => p.activate(...phaseActivate).badge("flowchart"),
       );
       return b.build();
@@ -2434,6 +2438,15 @@ const NET_KIND_MAP: Record<NetworkDeviceKind, NodeKind> = {
   client: "actor",
 };
 
+/** 箱の上に出す機器の呼び名 (#835)。 種類の英語をそのまま出すと、日本語の図の中で浮く */
+const NET_KIND_LABEL: Record<NetworkDeviceKind, string> = {
+  router: "ルーター",
+  switch: "スイッチ",
+  firewall: "ファイアウォール",
+  server: "サーバー",
+  client: "端末",
+};
+
 /**
  * network preset ... NW topology (router / switch / firewall / server / client) を col × row 配置、
  * link で接続 (protocol / VLAN を label)。 On-prem / hybrid NW 構成図向け。
@@ -2464,7 +2477,7 @@ export function network(preset: NetworkPreset): NetworkBuilder {
         b.lane(laneId, { width: laneW });
         colLaneIds.set(d.col, laneId);
       }
-      const eyebrowParts: string[] = [d.kind];
+      const eyebrowParts: string[] = [NET_KIND_LABEL[d.kind]];
       if (d.segment) eyebrowParts.push(d.segment);
       b.node(d.id, {
         lane: laneId,
@@ -2490,7 +2503,7 @@ export function network(preset: NetworkPreset): NetworkBuilder {
     build() {
       b.phase(
         "network",
-        { duration: 2400, title: preset.topic, body: "network 全 device + link を visible 化。" },
+        { duration: 2400, title: preset.topic, body: "すべての機器と接続を並べた構成。" },
         (p) => p.activate(...phaseActivate).badge("network"),
       );
       return b.build();
@@ -2572,19 +2585,25 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
   const stateOrder = new Map<string, number>();
   const phaseActivate: string[] = [];
   let transIdx = 0;
+  // 状態の題と親 (#835)。 入れ子の札は親の題で書くので、親が後から宣言されても引けるよう
+  // 札は `build()` で決める
+  const 題 = new Map<string, string>();
+  const 親 = new Map<string, string>();
 
   const api: StateMachine2Builder = {
     state(s) {
       const laneId = `lane-${s.id}`;
       b.lane(laneId, { width: laneW });
+      題.set(s.id, s.title);
+      if (s.parent) 親.set(s.id, s.parent);
       const eyebrowParts: string[] = [];
       if (s.initial) eyebrowParts.push("初期");
       else if (s.final) eyebrowParts.push("最終");
       else eyebrowParts.push("状態");
-      if (s.parent) eyebrowParts.push(`nested in ${s.parent}`);
+      // 入る時と出る時の呼び方は `types.ts` の行頭の印の説明と揃える
       const subtitleParts: string[] = [];
-      if (s.entry) subtitleParts.push(`entry: ${s.entry}`);
-      if (s.exit) subtitleParts.push(`exit: ${s.exit}`);
+      if (s.entry) subtitleParts.push(`入る時: ${s.entry}`);
+      if (s.exit) subtitleParts.push(`出る時: ${s.exit}`);
       b.node(s.id, {
         lane: laneId,
         stack: 0,
@@ -2620,10 +2639,24 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
     build() {
       b.phase(
         "sm2",
-        { duration: 2400, title: preset.topic, body: "拡張 FSM (nested + action) を visible 化。" },
+        {
+          duration: 2400,
+          title: preset.topic,
+          body: "入れ子の状態と、入る時・出る時の処理を含めた、すべての状態と遷移。",
+        },
         (p) => p.activate(...phaseActivate).badge("statemachine2"),
       );
-      return b.build();
+      const d = b.build();
+      // 入れ子の札に親の題を足す。 識別子 (`active`) を出すと、図のどこにも無い字になる
+      return {
+        ...d,
+        nodes: d.nodes.map((n) => {
+          const 親の識別子 = 親.get(n.id);
+          if (親の識別子 === undefined) return n;
+          const 親の題 = 題.get(親の識別子) ?? 親の識別子;
+          return { ...n, eyebrow: `${n.eyebrow ?? "状態"} / ${親の題}の中` };
+        }),
+      };
     },
   };
 

package/src/render/relation-focus.ts

@@ -6,7 +6,7 @@
  * 問いにその場で答えられる。
  *
  * 集合は 3 つで作る = 触れた箱 / その箱に繋がる線 / 線の相手の箱。
- * **線の向きは問わない** = クラス図の「継ぐ」 は子から親へ、 ER の「持つ」 は親から子へ向くが、
+ * **線の向きは問わない** = クラス図の「継承」 は子から親へ、 ER の「注文する」 は利用者から注文へ向くが、
  * 読み手にとってはどちらも「この箱の関係」 で、向きで見え方が変わる理由が無い。
  */
 

package/src/types.ts

@@ -130,7 +130,7 @@ export type Side = "top" | "right" | "bottom" | "left";
  * - "dashed" ... 刻んだ線。 **光っていても刻みのまま**。
  *
  * `"dashed"` が要るのは、`"solid"` の刻みが「光っていない」 を表す合図に使われているため。
- * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「満たす」 と「使う」、
+ * 光ると実線に戻るので、線の種類として刻みを持たせられない。 UML の「実装」 と「依存」、
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 export type EdgeStyle = "solid" | "dotted-flow" | "dashed";
@@ -167,8 +167,8 @@ export const EDGE_STYLES: readonly EdgeStyle[] = ["solid", "dotted-flow", "dashe
  * 4 通りを 2 つの欄に分けないのは、**端の印は 1 つの記号として読まれる**ため。 欄を分けると
  * 片方だけ書いた形 (個数はあるが任意かが無い) を許すことになり、描けない組み合わせが増える。
  *
- * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
- * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
+ * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継承) と
+ * 破線 × 三角 (実装) は線種で分かれ、実線 × 三角 (継承) と実線 × 菱 (集約) は端で分かれる。
  * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
  */
 export type EdgeHead =
@@ -204,7 +204,8 @@ export const EDGE_HEADS: readonly EdgeHead[] = [
  * - `"solid"` ... 墨で塗る。 **既定**。 書かなければ形ごとの既定 (`EDGE_HEAD_SHAPE.filled`) に従う
  * - `"hollow"` ... 紙の色で塗り、輪郭だけを線で描く
  *
- * UML は同じ形を塗りで分ける = 白抜きの菱が「持つ」、塗った菱が「抱える」 (命が同じ)。
+ * UML は同じ形を塗りで分ける = 白抜きの菱が「集約」、塗った菱が「コンポジション」
+ * (部分が全体と寿命を共にする)。
  * 形を増やして表そうとすると、塗りの軸を持つ全ての形について語が倍になる。
  *
  * 塗らない形 (`"open"` / `"crow"`) には効かない。 元から輪郭しか無いため。
@@ -736,8 +737,8 @@ export type CdlEdge = {
   /**
    * 端の印の塗り方 (#578)。 書かなければ形ごとの既定。 塗らない形には効かない。
    *
-   * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 持つ /
-   * 塗った菱 = 抱える)。
+   * 形と分けて持つのは、UML が同じ形を塗りで分けるため (白抜きの菱 = 集約 /
+   * 塗った菱 = コンポジション)。
    */
   headFill?: EdgeHeadFill;
   /**