@cardenelabs/cdl 0.11.0 → 0.12.0

package/dist/{render-DwH8v5Mb.d.cts → render-C7FKvMqq.d.cts}

@@ -2058,6 +2058,11 @@ type CdlPhase = {
      * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
      * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
      * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
+     * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
+     * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
+     * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
+     * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/dist/{render-DwH8v5Mb.d.ts → render-C7FKvMqq.d.ts}

@@ -2058,6 +2058,11 @@ type CdlPhase = {
      * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
      * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
      * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
+     * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
+     * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
+     * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
+     * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.11.0",
+  "version": "0.12.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/kinds/chart-bar.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { resolveChartData } from "../render/payload-binding";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * chart-bar kind ... 1 node に datum 配列 (chartData) を保持し、 SVG rect で棒グラフ描画する。
@@ -54,13 +55,8 @@ export function ChartBarNode({
     return { y: yAt(v), value: v };
   });
 
-  /**
-   * 棒がどこまで伸びたか (0..1、 cdl#516)。 描く指定が無ければ常に 1 = 全高。
-   *
-   * 進みは呼出側から来る値なので範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま倍率に
-   * 渡すと棒が上下反転したり突き抜けたりするため、 ここで畳む。
-   */
-  const 伸び = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  /** 棒がどこまで伸びたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
   /** 棒の足元。 ここを動かさない点として上へ伸ばす */
   const 横軸のy = PAD_TOP + canvasH;
 

package/src/kinds/chart-line.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { resolveChartData } from "../render/payload-binding";
+import { 進みを畳む, 伸ばすdash } from "./draw-progress";
 
 /**
  * chart-line kind ... 1 node に datum 配列 (chartData) を保持し、 SVG polyline で折れ線描画する。
@@ -73,13 +74,8 @@ export function ChartLineNode({
     前の点 = 今の点;
   }
 
-  /**
-   * 線がどこまで伸びたか (0..1、 cdl#512)。 描く指定が無ければ常に 1 = 全長。
-   *
-   * 進みは呼出側から来る値なので、 範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま
-   * `strokeDashoffset` に渡すと線が消えたり逆向きに縮んだりするため、 ここで畳む。
-   */
-  const 伸び = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  /** 線がどこまで伸びたか (0..1、 cdl#512)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
 
   /**
    * その点まで線の先が届いたか。
@@ -173,9 +169,7 @@ export function ChartLineNode({
           // 測れないため。 長さを 1 に正規化すれば進みをそのまま offset に使える。
           //
           // 描く指定が無い図には属性を 1 つも足さない = 既存の図の DOM を変えない
-          {...(drawing
-            ? { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - 伸び }
-            : {})}
+          {...伸ばすdash(drawing, 伸び)}
         />
       )}
       {data.map((d, idx) => {

package/src/kinds/chart-pie.tsx

@@ -2,6 +2,7 @@ import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
@@ -64,13 +65,8 @@ export function ChartPieNode({
     return { d, frac, path, startFrac };
   });
 
-  /**
-   * 円がどこまで開いたか (0..1、 cdl#516)。 描く指定が無ければ常に 1 = 全周。
-   *
-   * 進みは呼出側から来る値なので範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま角度に
-   * 掛けると 1 周を超えて切り抜きが壊れるため、 ここで畳む。
-   */
-  const 開き = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  /** 円がどこまで開いたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
+  const 開き = 進みを畳む(drawing, progress);
   // SVG の id は document 全体の名前空間。 node id ではなく instance id で分ける
   const 切り抜きid = `cdl-pie-draw-${instanceId}`;
   /** その扇が開き始めたか。 開き始めた扇の凡例だけを出す */

package/src/kinds/draw-progress.ts

@@ -0,0 +1,100 @@
+/**
+ * 段の `draw` で図形を起点から現す時の、共通の計算 (cdl#520)。
+ *
+ * `chart-line` (#513) と `chart-bar` / `chart-pie` (#517) が同じ形を各 file に持っていた。
+ * 対応種別が 6 つに増えるため、**進みの畳み方と dash の当て方を 1 箇所に集める**。
+ *
+ * ここに置くのは「どの図形にも同じ意味で効く計算」 だけ。 起点の取り方 (左端 / 横軸 /
+ * 12 時 / 根) は種別ごとに違うため各 file が持つ。
+ */
+
+/**
+ * 進みを 0..1 に畳む。 描く指定が無ければ常に 1 = 全体が出ている。
+ *
+ * 進みは呼出側から来る値なので範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま倍率や
+ * 角度に渡すと、図形が反転したり 1 周を超えて切り抜きが壊れたりする。
+ */
+export function 進みを畳む(drawing: boolean, progress: number): number {
+  if (!drawing) return 1;
+  return Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1));
+}
+
+/**
+ * `path` を起点から伸ばす dash の属性。 描く指定が無い時は **何も返さない**。
+ *
+ * `pathLength` を 1 に正規化するため、進みをそのまま残り (`strokeDashoffset`) に使える。
+ * 実長を測るには DOM の ref が要り、静的な書き出しでは測れない。
+ *
+ * **`d` は触らない**。 経路を切り詰めると、形から位置や量を測る利用側が進みの途中で
+ * 別の値を読む (#513 で `points` について決めたのと同じ)。
+ */
+export function 伸ばすdash(
+  drawing: boolean,
+  伸び: number,
+): { pathLength: number; strokeDasharray: number; strokeDashoffset: number } | Record<string, never> {
+  if (!drawing) return {};
+  return { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - 伸び };
+}
+
+/**
+ * 段 (深さ) ごとに区切った進み (cdl#520)。
+ *
+ * 枝が複数ある図 (`mind-map` / `tree-hierarchy`) で、全部を同時に伸ばすと離れた枝が
+ * 宙に浮いたまま伸びる。 **根 / 中心に近い段から順に伸ばす**。
+ *
+ * 深さ 1..`最大深さ` を等分し、その段の区間に入ってから出るまでを 0→1 で返す。
+ * 区間より手前なら 0、通り過ぎていれば 1。
+ *
+ * 経路長で順を決める案は採らない。 枝は別々の `path` なので、累積経路長で並べると
+ * 1 本ずつ順に伸びる形になり、放射状の図では育ち方が読めなくなる (深さで区切ると
+ * 同じ世代が一緒に伸びる)。
+ */
+export function 段の伸び(伸び: number, 深さ: number, 最大深さ: number): number {
+  if (最大深さ <= 0 || 深さ <= 0) return 1;
+  const 幅 = 1 / 最大深さ;
+  const 始まり = (深さ - 1) * 幅;
+  return Math.min(1, Math.max(0, (伸び - 始まり) / 幅));
+}
+
+/**
+ * 3 次ベジエでつないだ折れ線の、各点までの累積割合 (cdl#520)。
+ *
+ * 返すのは 0..1 の並びで、先頭は必ず 0、末尾は必ず 1。 点が 1 つ以下なら `[0]` 相当。
+ *
+ * **点番号の比率では代用できない**。 dash は実際の経路長で進むため、区間の長さが違うと
+ * 先端と点がずれる (#513 で実測、急傾斜から始まる並びで 2 点目が線の先より先に出た)。
+ *
+ * 曲線の長さは折れ線で近似する。 区間を `分割数` で刻んで弦の長さを足す = 実長との差は
+ * 0.1% 未満 (区間 16 分割、実測)。 `getTotalLength()` は DOM の ref が要り、静的な
+ * 書き出しでは測れないため使わない。
+ */
+export function ベジエの累積割合(
+  点: ReadonlyArray<{ x: number; y: number }>,
+  制御点: (前: { x: number; y: number }, 後: { x: number; y: number }) => [
+    { x: number; y: number },
+    { x: number; y: number },
+  ],
+  分割数 = 16,
+): number[] {
+  if (点.length <= 1) return 点.map(() => 0);
+  const 長さ: number[] = [0];
+  let 合計 = 0;
+  for (let i = 1; i < 点.length; i++) {
+    const p0 = 点[i - 1]!;
+    const p3 = 点[i]!;
+    const [p1, p2] = 制御点(p0, p3);
+    let 前 = p0;
+    for (let s = 1; s <= 分割数; s++) {
+      const t = s / 分割数;
+      const u = 1 - t;
+      const x = u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x;
+      const y = u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y;
+      合計 += Math.hypot(x - 前.x, y - 前.y);
+      前 = { x, y };
+    }
+    長さ.push(合計);
+  }
+  // 全長 0 (同じ点が並ぶ) では割れない。 その時は全点を起点扱いにする
+  if (合計 === 0) return 点.map(() => 0);
+  return 長さ.map((l) => l / 合計);
+}

package/src/kinds/funnel.tsx

@@ -1,7 +1,8 @@
-import type { JSX } from "react";
+import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveFunnelData } from "../render/payload-binding";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * funnel-stages kind ... 1 node に stage 配列 (funnelData) を保持し、 逆三角形 funnel を SVG 描画する。
@@ -14,10 +15,16 @@ export function FunnelNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#521) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -35,6 +42,25 @@ export function FunnelNode({
   const gap = 4;
   const stageH = (canvasH - gap * (stageCount - 1)) / stageCount;
 
+  /**
+   * 段がどこまで積まれたか (0..1、 cdl#521)。 描く指定が無ければ常に 1 = 全部出ている。
+   *
+   * 上から下へ流れる図なので、切り抜きを上から広げると段が順に現れる。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-funnel-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  /**
+   * その段の下端までの割合。 **高さの累計で測る** (件数の比ではない)。
+   * 段の高さは件数に比例しないため、件数で測ると出る順が図と合わない。
+   */
+  const 段の下端の割合 = (idx: number): number => {
+    if (canvasH <= 0) return 0;
+    return ((idx + 1) * stageH + idx * gap) / canvasH;
+  };
+  /** その段が出切ったか。 出切ってから件数と離脱率を出す */
+  const 段が出切った = (idx: number): boolean => !drawing || 伸び >= 段の下端の割合(idx);
+
   const widthAtStep = (step: number): number => {
     const topRatio = 1.0;
     const bottomRatio = 0.35;
@@ -42,6 +68,67 @@ export function FunnelNode({
     return canvasW * (topRatio + (bottomRatio - topRatio) * t);
   };
 
+  const 段 = stages.map((s, idx) => {
+    const prev = idx > 0 ? stages[idx - 1]! : null;
+    // 前段が 0 件なら離脱率は決まらない (0 で割ることになる)。 静止画では起きなかったが、
+    // count が状態を読むようになると動き始めの 0 で必ず通る。
+    const dropRate = prev && prev.count > 0 ? ((prev.count - s.count) / prev.count) * 100 : 0;
+    const y = PAD_TOP + idx * (stageH + gap);
+    const topW = widthAtStep(idx);
+    const bottomW = widthAtStep(idx + 1);
+    const cx = PAD_LEFT + canvasW / 2;
+    const topX = cx - topW / 2;
+    const bottomX = cx - bottomW / 2;
+    const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
+    const tone = toneByIndex(idx);
+    const legendX = PAD_LEFT + canvasW + 24;
+    return (
+      <g key={`stage-${s.id}`}>
+        <polygon
+          data-cdl-role="funnel-stage"
+          data-cdl-unresolved={s.unresolved ? "true" : undefined}
+          points={points}
+          fill={tone}
+          fillOpacity={0.9}
+          stroke={tone}
+          strokeWidth={0}
+        />
+        <text
+          x={cx}
+          y={y + stageH / 2 + 5}
+          fontSize={14}
+          fontWeight={700}
+          textAnchor="middle"
+          fill="var(--cdl-node-fill, #ffffff)"
+        >
+          {s.title}
+        </text>
+        {/* 件数と離脱率は段が出切ってから。 切り抜きだけでは途中から見えるため自分で判定する */}
+        {段が出切った(idx) && (
+          <text
+            x={legendX}
+            y={y + stageH / 2 - 2}
+            fontSize={13}
+            fontWeight={700}
+            fill="var(--cdl-text, #1a1f2a)"
+          >
+            {s.count.toLocaleString()}
+          </text>
+        )}
+        {段が出切った(idx) && prev && (
+          <text
+            x={legendX}
+            y={y + stageH / 2 + 14}
+            fontSize={11}
+            fill={dropRate > 0 ? "var(--cdl-text-dim, #5a6270)" : "var(--cdl-text-mute, #8a8678)"}
+          >
+            {dropRate > 0 ? `↓ ${dropRate.toFixed(1)}%` : "±0%"}
+          </text>
+        )}
+      </g>
+    );
+  });
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -56,63 +143,19 @@ export function FunnelNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      {stages.map((s, idx) => {
-        const prev = idx > 0 ? stages[idx - 1]! : null;
-        // 前段が 0 件なら離脱率は決まらない (0 で割ることになる)。 静止画では起きなかったが、
-        // count が状態を読むようになると動き始めの 0 で必ず通る。
-        const dropRate = prev && prev.count > 0 ? ((prev.count - s.count) / prev.count) * 100 : 0;
-        const y = PAD_TOP + idx * (stageH + gap);
-        const topW = widthAtStep(idx);
-        const bottomW = widthAtStep(idx + 1);
-        const cx = PAD_LEFT + canvasW / 2;
-        const topX = cx - topW / 2;
-        const bottomX = cx - bottomW / 2;
-        const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
-        const tone = toneByIndex(idx);
-        const legendX = PAD_LEFT + canvasW + 24;
-        return (
-          <g key={`stage-${s.id}`}>
-            <polygon
-              data-cdl-role="funnel-stage"
-              data-cdl-unresolved={s.unresolved ? "true" : undefined}
-              points={points}
-              fill={tone}
-              fillOpacity={0.9}
-              stroke={tone}
-              strokeWidth={0}
-            />
-            <text
-              x={cx}
-              y={y + stageH / 2 + 5}
-              fontSize={14}
-              fontWeight={700}
-              textAnchor="middle"
-              fill="var(--cdl-node-fill, #ffffff)"
-            >
-              {s.title}
-            </text>
-            <text
-              x={legendX}
-              y={y + stageH / 2 - 2}
-              fontSize={13}
-              fontWeight={700}
-              fill="var(--cdl-text, #1a1f2a)"
-            >
-              {s.count.toLocaleString()}
-            </text>
-            {prev && (
-              <text
-                x={legendX}
-                y={y + stageH / 2 + 14}
-                fontSize={11}
-                fill={dropRate > 0 ? "var(--cdl-text-dim, #5a6270)" : "var(--cdl-text-mute, #8a8678)"}
-              >
-                {dropRate > 0 ? `↓ ${dropRate.toFixed(1)}%` : "±0%"}
-              </text>
-            )}
-          </g>
-        );
-      })}
+      {drawing && (
+        <defs>
+          {/*
+            上から広がる切り抜き。 **`points` は触らない** (cdl#521) = 台形の形から
+            件数を測る利用側が、進みの途中で別の値を読まないようにする
+          */}
+          <clipPath id={切り抜きid}>
+            <rect x={0} y={0} width={node.w} height={PAD_TOP + canvasH * 伸び} />
+          </clipPath>
+        </defs>
+      )}
+      {/* 描く指定が無い図には包みを足さず、従来の DOM 構造を保つ */}
+      {drawing ? <g clipPath={`url(#${切り抜きid})`}>{段}</g> : 段}
     </g>
   );
 }

package/src/kinds/gantt.tsx

@@ -2,6 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveGanttData } from "../render/payload-binding";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * gantt-timeline kind ... 1 node に task 配列 (ganttData) を保持し、 帯状 timeline を SVG 描画する。
@@ -13,10 +14,16 @@ export function GanttNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#521) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -166,6 +173,14 @@ export function GanttNode({
   const 帯の左 = (idx: number): number => xAt(idx) + 帯の余白 / 2;
   const 帯の右 = (idx: number): number => xAt(idx) + cellW - 帯の余白 / 2;
 
+  /**
+   * 帯がどこまで伸びたか (0..1、 cdl#521)。 描く指定が無ければ常に 1 = 全長。
+   *
+   * **帯ごとに始端が違う**。 棒グラフは全部が同じ横軸から伸びるが、工程表は工程ごとに
+   * 始まる位置が違うため、包みも帯ごとに作って不動点をその帯の左端に置く。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+
   const taskById = new Map(整えた.map((t) => [t.id, t]));
   const rowOf = new Map(整えた.map((t, i) => [t.id, i]));
 
@@ -243,7 +258,12 @@ export function GanttNode({
         // 余白の決め方を変えた時に負の幅を出さないために残す
         const bw = Math.max(0, 帯の右(t.endIdx) - bx);
         return (
-          <g key={`bar-${t.id}`}>
+          <g
+            key={`bar-${t.id}`}
+            {...(drawing
+              ? { transform: `translate(${bx} 0) scale(${伸び} 1) translate(${-bx} 0)` }
+              : {})}
+          >
             <rect
               data-cdl-role="gantt-bar"
               data-cdl-unresolved={t.unresolved ? "true" : undefined}
@@ -304,6 +324,9 @@ export function GanttNode({
               ` L ${enterX} ${(parentMidY + tipY) / 2} L ${enterX} ${tipY} L ${tipX} ${tipY}`;
           const arrowHeadPath = `M ${tipX + arrowHeadSize} ${tipY} L ${tipX} ${tipY - arrowHeadSize / 2} L ${tipX} ${tipY + arrowHeadSize / 2} Z`;
           return (
+            // 矢印は両端の帯が出てから描く。 帯が無い場所へ矢印だけが伸びると、
+            // 指す先の無い線になる (cdl#521)
+            (drawing && 伸び < 1) ? null : (
             <g key={`dep-${parent.id}-${t.id}`} data-cdl-role="gantt-arrow">
               <path
                 d={path}
@@ -321,6 +344,7 @@ export function GanttNode({
                 strokeLinejoin="round"
               />
             </g>
+            )
           );
         })}
     </g>

package/src/kinds/mind-map.tsx

@@ -3,6 +3,7 @@ import { 箱に積む } from "./box-lines";
 import type { LaidNode, Tone, MindBranchNode } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
+import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "error"];
 
@@ -31,10 +32,16 @@ export function MindMapNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#520) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -50,6 +57,16 @@ export function MindMapNode({
 
   const layout = computeMindMapLayout(mindData, canvasCx, canvasCy, canvasW, canvasH);
 
+  /**
+   * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
+   *
+   * 中心に近い段から順に伸ばす。 全部を同時に伸ばすと、離れた枝が宙に浮いたまま伸びる。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+  const 最大深さ = layout.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
+  /** その箱が出るか。 中心 (深さ 0) は起点なので進み 0 でも出す */
+  const 箱が出る = (深さ: number): boolean => !drawing || 段の伸び(伸び, 深さ, 最大深さ) >= 1;
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -64,20 +81,29 @@ export function MindMapNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      {layout.edges.map((e, i) => (
-        <path
-          key={`edge-${i}`}
-          data-cdl-role="mind-edge"
-          d={e.d}
-          fill="none"
-          stroke={toneColor(e.tone)}
-          strokeWidth={2.5}
-          strokeOpacity={0.55}
-          strokeLinecap="round"
-        />
-      ))}
+      {layout.edges.map((e, i) => {
+        // 循環を閉じる枝は根から外へ向かう枝ではないため、全 node が出てから表示する
+        const 枝の伸び = e.deferUntilComplete
+          ? (伸び >= 1 ? 1 : 0)
+          : 段の伸び(伸び, e.depth, 最大深さ);
+        return (
+          <path
+            key={`edge-${i}`}
+            data-cdl-role="mind-edge"
+            d={e.d}
+            fill="none"
+            stroke={toneColor(e.tone)}
+            strokeWidth={2.5}
+            strokeOpacity={0.55}
+            strokeLinecap="round"
+            {...伸ばすdash(drawing, 枝の伸び)}
+          />
+        );
+      })}
 
       {layout.nodes.map((n) => {
+        // 枝が届いてから箱を出す。 届く前に出すと、繋がっていない箱が宙に浮く
+        if (!箱が出る(n.depth)) return null;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
         const 行 = 箱に積む(
           [
@@ -150,6 +176,8 @@ type LayoutNode = {
   h: number;
   tone?: Tone;
   isRoot: boolean;
+  /** 中心からの段数 (中心が 0、 cdl#520)。 段ごとに順に伸ばすのに使う */
+  depth: number;
   /** 名前を状態から解決できなかった項目に付く印 (#467) */
   unresolved?: true;
 };
@@ -157,6 +185,10 @@ type LayoutNode = {
 type LayoutEdge = {
   d: string;
   tone?: Tone;
+  /** 枝の先 (子) の段数 (cdl#520)。 段ごとに順に伸ばすのに使う */
+  depth: number;
+  /** 循環により、元の親が layout 上で子と同じ深さか深くなった枝 */
+  deferUntilComplete: boolean;
 };
 
 export function computeMindMapLayout(
@@ -179,6 +211,8 @@ export function computeMindMapLayout(
     w: rootW,
     h: rootH,
     isRoot: true,
+    // 中心は起点なので段数 0 (cdl#520)
+    depth: 0,
     ...((mindData as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
   });
 
@@ -339,6 +373,8 @@ export function computeMindMapLayout(
       y,
       w,
       h,
+      // 第 1 階層が段数 1 (`subDepth` は 0 始まり、 cdl#520)
+      depth: subDepth + 1,
       tone: myTone,
       isRoot: false,
       ...((node as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
@@ -388,6 +424,9 @@ export function computeMindMapLayout(
     }
   }
 
+  // 枝の段数は「その枝の先 (子)」 の段数にする (cdl#520)。 箱を置き終えた後に引く
+  const 段数 = new Map(nodes.map((n) => [n.id, n.depth]));
+
   // edge = 親の辺 → 子の辺。 root → 第 1 branch は root の辺から。
   for (const br of mindData.branches) {
     const childPos = nodePos.get(br.id);
@@ -395,17 +434,29 @@ export function computeMindMapLayout(
     const isLeft = nodeSide.get(br.id) === "left";
     const childHalfW = nodeHalfW.get(br.id) ?? subBranchW / 2;
     const tone = nodeTone.get(br.id);
+    const childDepth = 段数.get(br.id) ?? 1;
+    const parentDepth = 段数.get(br.parent) ?? 0;
     if (br.parent === mindData.rootId) {
       const startX = rootEdgeXFor(isLeft);
       const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
-      edges.push({ d: makeCurve(startX, cy, endX, childPos.y, isLeft), tone });
+      edges.push({
+        d: makeCurve(startX, cy, endX, childPos.y, isLeft),
+        tone,
+        depth: childDepth,
+        deferUntilComplete: false,
+      });
     } else {
       const parentPos = nodePos.get(br.parent);
       if (!parentPos) continue;
       const parentHalfW = nodeHalfW.get(br.parent) ?? branchW / 2;
       const startX = parentPos.x + (isLeft ? -parentHalfW : parentHalfW);
       const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
-      edges.push({ d: makeCurve(startX, parentPos.y, endX, childPos.y, isLeft), tone });
+      edges.push({
+        d: makeCurve(startX, parentPos.y, endX, childPos.y, isLeft),
+        tone,
+        depth: Math.max(parentDepth, childDepth),
+        deferUntilComplete: parentDepth >= childDepth,
+      });
     }
   }