@cardenelabs/cdl 0.9.0 → 0.11.0

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

@@ -2047,6 +2047,27 @@ type CdlPhase = {
     title: string;
     body: string;
     activate: string[];
+    /**
+     * この phase で「左の起点から描き始める」 node の id (cdl#512)。
+     *
+     * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
+     * 描かれ、 進みが 1 に達した時点で全体が出る。 起点は種別ごとに違う。
+     *
+     * | kind | 起点 | 動き | 添える値 |
+     * |---|---|---|---|
+     * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+     * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+     * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     *
+     * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
+     *
+     * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
+     * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら
+     * 描く」 にすると、 値が動くだけの phase でも線を引き直すことになる。
+     *
+     * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
+     */
+    draw?: string[];
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tweens: Array<{
         stateId: string;

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

@@ -2047,6 +2047,27 @@ type CdlPhase = {
     title: string;
     body: string;
     activate: string[];
+    /**
+     * この phase で「左の起点から描き始める」 node の id (cdl#512)。
+     *
+     * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
+     * 描かれ、 進みが 1 に達した時点で全体が出る。 起点は種別ごとに違う。
+     *
+     * | kind | 起点 | 動き | 添える値 |
+     * |---|---|---|---|
+     * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+     * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+     * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     *
+     * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
+     *
+     * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
+     * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら
+     * 描く」 にすると、 値が動くだけの phase でも線を引き直すことになる。
+     *
+     * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
+     */
+    draw?: string[];
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tweens: Array<{
         stateId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.9.0",
+  "version": "0.11.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/builder.ts

@@ -1355,6 +1355,11 @@ export type InputChain = {
 
 export type PhaseBuilder = {
   activate: (...ids: string[]) => PhaseBuilder;
+  /**
+   * この phase で左の起点から描き始める node を指定する (cdl#512)。
+   * 対象は phase の進み (0→1) に合わせて描かれる。 現在の対象種別は `chart-line`。
+   */
+  draw: (...ids: string[]) => PhaseBuilder;
   /** 数値 state の線形補間 (write phase で 100→90 等) */
   tween: (stateId: string, from: number, to: number) => PhaseBuilder;
   /** 任意型 state を即時切替 (この phase 到達で value 上書き、 lerp なし) */
@@ -1364,6 +1369,7 @@ export type PhaseBuilder = {
 
 type PhaseAcc = {
   activate: string[];
+  draw: string[];
   tweens: Array<{ stateId: string; from: number; to: number }>;
   sets: Array<{ stateId: string; value: string | number }>;
   badge?: string;
@@ -1375,6 +1381,10 @@ function makePhaseBuilder(acc: PhaseAcc): PhaseBuilder {
       acc.activate.push(...ids);
       return api;
     },
+    draw(...ids) {
+      acc.draw.push(...ids);
+      return api;
+    },
     tween(stateId, from, to) {
       acc.tweens.push({ stateId, from, to });
       return api;
@@ -3690,7 +3700,7 @@ export function diagram(
       },
     },
     phase(phaseId, opts, build) {
-      const acc: PhaseAcc = { activate: [], tweens: [], sets: [] };
+      const acc: PhaseAcc = { activate: [], draw: [], tweens: [], sets: [] };
       build(makePhaseBuilder(acc));
       phases.push({
         id: phaseId,
@@ -3698,6 +3708,8 @@ export function diagram(
         title: opts.title,
         body: opts.body,
         activate: acc.activate,
+        // 空なら欄ごと置かない。 置くと `draw` を使わない図の JSON の形が変わる
+        ...(acc.draw.length > 0 ? { draw: acc.draw } : {}),
         tweens: acc.tweens,
         sets: acc.sets,
         badge: acc.badge,

package/src/kinds/chart-bar.tsx

@@ -6,15 +6,26 @@ import { resolveChartData } from "../render/payload-binding";
  * chart-bar kind ... 1 node に datum 配列 (chartData) を保持し、 SVG rect で棒グラフ描画する。
  * layout は node bbox 内側の canvas に縦棒を等間隔配置、 縦軸 = value 0-max、 横軸 = datum label。
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび棒の高さが追随する。
+ *
+ * phase の `draw` にこの node の id が載っている間は、 棒が横軸から上へ伸びる (cdl#516)。
+ * 伸ばすのは棒を包む `<g>` の `transform` で、 `rect` の `x` / `y` / `width` / `height` は
+ * 進みに関わらず実値のまま。 値の数字は棒の頭に付いて動く。
+ * 軸 / 格子 / 横軸の名前は最初から出る。
  */
 export function ChartBarNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#516) */
+  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;
@@ -43,6 +54,16 @@ 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;
+  /** 棒の足元。 ここを動かさない点として上へ伸ばす */
+  const 横軸のy = PAD_TOP + canvasH;
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -93,22 +114,38 @@ export function ChartBarNode({
         const bx = xAt(idx);
         const by = yAt(d.value);
         const bh = PAD_TOP + canvasH - by;
+        // 見えている棒の頭。 数字はここに付いて動く = 空いた場所に数字だけ浮かない
+        const 見えている頭 = 横軸のy - (横軸のy - by) * 伸び;
+        /**
+         * **`rect` の属性は触らない** (cdl#516)。 高さを直接動かすと、棒の高さで値を測る
+         * 利用側の検査が進みの途中で別の値を読む。 足元を動かさない点にした倍率で包む。
+         */
+        const 棒 = (
+          <rect
+            data-cdl-role="chart-bar"
+            data-cdl-unresolved={d.unresolved ? "true" : undefined}
+            x={bx}
+            y={by}
+            width={barW}
+            height={bh}
+            rx={2}
+            fill="var(--cdl-tone-accent, #2d6a8f)"
+            fillOpacity={0.9}
+          />
+        );
         return (
           <g key={`bar-${idx}`}>
-            <rect
-              data-cdl-role="chart-bar"
-              data-cdl-unresolved={d.unresolved ? "true" : undefined}
-              x={bx}
-              y={by}
-              width={barW}
-              height={bh}
-              rx={2}
-              fill="var(--cdl-tone-accent, #2d6a8f)"
-              fillOpacity={0.9}
-            />
+            {/* 描く指定が無い図には包みを足さない = 既存の図の DOM を 1 要素も変えない */}
+            {drawing ? (
+              <g transform={`translate(0 ${横軸のy}) scale(1 ${伸び}) translate(0 ${-横軸のy})`}>
+                {棒}
+              </g>
+            ) : (
+              棒
+            )}
             <text
               x={bx + barW / 2}
-              y={by - 6}
+              y={見えている頭 - 6}
               fontSize={11}
               textAnchor="middle"
               fill="var(--cdl-text, #1a1f2a)"

package/src/kinds/chart-line.tsx

@@ -7,15 +7,29 @@ import { resolveChartData } from "../render/payload-binding";
  * layout は node bbox (node.w × node.h) 内側に padding (top/right/bottom/left) を確保し、
  * その内側 rect を chart canvas とみなす。 縦軸 = value min-max、 横軸 = datum index。
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび折れ線が追随する。
+ *
+ * phase の `draw` にこの node の id が載っている間は、 折れ線が左の起点から伸びる (cdl#512)。
+ * 伸ばし方は dash (`pathLength` / `strokeDasharray` / `strokeDashoffset`) で、 `points` は
+ * 進みに関わらず全点を持つ。 点と値の数字は線の先が自分の位置に届いた時に現れ、
+ * 軸 / 格子 / 横軸の名前は最初から出る。
  */
 export function ChartLineNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /**
+   * この phase の `draw` に載っているか (cdl#512)。 true の間だけ折れ線が左の起点から
+   * 伸び、 点と値の数字は線の先が自分の位置に届いた時に現れる。
+   */
+  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;
@@ -45,6 +59,44 @@ export function ChartLineNode({
 
   const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
 
+  // dash は polyline の実際の経路長で進むため、 点の表示判定も同じ経路長に揃える。
+  // 点番号の比率では、 急傾斜と平坦な区間が混ざる線で先端と点がずれる。
+  const 点までの長さ: number[] = [];
+  let 線の全長 = 0;
+  let 前の点: { x: number; y: number } | undefined;
+  for (const [idx, datum] of data.entries()) {
+    const 今の点 = { x: xAt(idx), y: yAt(datum.value) };
+    if (前の点) {
+      線の全長 += Math.hypot(今の点.x - 前の点.x, 今の点.y - 前の点.y);
+    }
+    点までの長さ.push(線の全長);
+    前の点 = 今の点;
+  }
+
+  /**
+   * 線がどこまで伸びたか (0..1、 cdl#512)。 描く指定が無ければ常に 1 = 全長。
+   *
+   * 進みは呼出側から来る値なので、 範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま
+   * `strokeDashoffset` に渡すと線が消えたり逆向きに縮んだりするため、 ここで畳む。
+   */
+  const 伸び = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+
+  /**
+   * その点まで線の先が届いたか。
+   *
+   * 点の位置は polyline の累積経路長で判定する。 **左端は進み 0 でも出す** = そこが
+   * 線の起点で、 起点が無いと線がどこから伸びているのか読めない。
+   *
+   * 点が 1 つの図では線を引かない (下の `data.length > 1`) ため、 割り算の分母が 0 に
+   * なる形には入らないが、 呼出の順に依らず成り立つよう先に返す。
+   */
+  const 線の先が届いた = (idx: number): boolean => {
+    if (!drawing) return true;
+    if (data.length <= 1) return true;
+    if (線の全長 === 0) return true;
+    return 伸び >= (点までの長さ[idx] ?? 0) / 線の全長;
+  };
+
   const gridCount = 4;
   const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
     const v = vMin + (vRange * i) / gridCount;
@@ -114,6 +166,16 @@ export function ChartLineNode({
           strokeWidth={2.5}
           strokeLinejoin="round"
           strokeLinecap="round"
+          // 伸ばすのは dash で行い、 **`points` は触らない** (cdl#512)。 点を削る形にすると
+          // 利用側が数えている点の数が進みの途中で変わる (dragon の `kind-geometry-check`)。
+          //
+          // `pathLength={1}` を置くのは、 実長を測るには DOM の ref が要り、 静的な書き出しでは
+          // 測れないため。 長さを 1 に正規化すれば進みをそのまま offset に使える。
+          //
+          // 描く指定が無い図には属性を 1 つも足さない = 既存の図の DOM を変えない
+          {...(drawing
+            ? { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - 伸び }
+            : {})}
         />
       )}
       {data.map((d, idx) => {
@@ -129,33 +191,40 @@ export function ChartLineNode({
           (prev === undefined || d.value <= prev) && (next === undefined || d.value <= next);
         const labelAbove = !isValley;
         const labelY = labelAbove ? cy - 12 : cy + 18;
+        // 点と値の数字は線の先に合わせて現れる。 **横軸の名前は最初から出す** =
+        // 名前は図の枠 (軸 / 格子) の側で、 これが順に増えると軸そのものが伸びて見える
+        const 出す = 線の先が届いた(idx);
         return (
           <g key={`pt-${idx}`} data-cdl-unresolved={d.unresolved ? "true" : undefined}>
-            <circle
-              cx={cx}
-              cy={cy}
-              r={5}
-              fill="var(--cdl-node-fill, #ffffff)"
-              stroke="var(--cdl-tone-accent, #2d6a8f)"
-              strokeWidth={2.5}
-            />
-            <circle
-              cx={cx}
-              cy={cy}
-              r={2.5}
-              fill="var(--cdl-tone-accent, #2d6a8f)"
-            />
-            <text
-              data-cdl-role="chart-line-value"
-              x={cx}
-              y={labelY}
-              fontSize={11}
-              fontWeight={600}
-              textAnchor="middle"
-              fill="var(--cdl-text, #1a1f2a)"
-            >
-              {d.value.toLocaleString()}
-            </text>
+            {出す && (
+              <>
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={5}
+                  fill="var(--cdl-node-fill, #ffffff)"
+                  stroke="var(--cdl-tone-accent, #2d6a8f)"
+                  strokeWidth={2.5}
+                />
+                <circle
+                  cx={cx}
+                  cy={cy}
+                  r={2.5}
+                  fill="var(--cdl-tone-accent, #2d6a8f)"
+                />
+                <text
+                  data-cdl-role="chart-line-value"
+                  x={cx}
+                  y={labelY}
+                  fontSize={11}
+                  fontWeight={600}
+                  textAnchor="middle"
+                  fill="var(--cdl-text, #1a1f2a)"
+                >
+                  {d.value.toLocaleString()}
+                </text>
+              </>
+            )}
             <text
               x={cx}
               y={PAD_TOP + canvasH + 20}

package/src/kinds/chart-pie.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from "react";
+import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
@@ -7,16 +7,29 @@ import { resolveChartData } from "../render/payload-binding";
  * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
  * layout は node bbox 内側の左半分に円を配置、 右半分に凡例 (label + %) を stack 表示する。
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび扇の角度が追随する。
+ *
+ * phase の `draw` にこの node の id が載っている間は、 円が 12 時から時計回りに開く (cdl#516)。
+ * 開き方は扇形の切り抜き (`clipPath`) で、 各扇の `d` は進みに関わらず実値のまま。
+ * 凡例はその扇が開き始めた時に出る。
  */
 export function ChartPieNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#516) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
+  // node id は diagram 内だけで一意。 同じ page に複数 diagram がある時も SVG の参照先が
+  // ぶつからないよう、 React が component instance ごとに割り当てる id を使う。
+  const instanceId = useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
@@ -31,12 +44,16 @@ export function ChartPieNode({
   const cy = PAD_TOP + chartAreaH / 2;
 
   let cumAngle = -Math.PI / 2;
+  /** その扇が始まるまでの取り分の累計。 開き始めたかの判定に使う (cdl#516) */
+  let cumFrac = 0;
   const slices = data.map((d) => {
     const frac = d.value / total;
     const angle = frac * Math.PI * 2;
     const a0 = cumAngle;
     const a1 = cumAngle + angle;
     cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
 
     const x1 = cx + radius * Math.cos(a0);
     const y1 = cy + radius * Math.sin(a0);
@@ -44,9 +61,21 @@ export function ChartPieNode({
     const y2 = cy + radius * Math.sin(a1);
     const large = angle > Math.PI ? 1 : 0;
     const path = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
-    return { d, frac, path };
+    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;
+  // SVG の id は document 全体の名前空間。 node id ではなく instance id で分ける
+  const 切り抜きid = `cdl-pie-draw-${instanceId}`;
+  /** その扇が開き始めたか。 開き始めた扇の凡例だけを出す */
+  const 開き始めた = (startFrac: number): boolean => !drawing || 開き > startFrac;
+
   const legendX = pieAreaW + 8;
   const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
   const legendStartY = PAD_TOP + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
@@ -64,20 +93,40 @@ export function ChartPieNode({
         stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
         strokeWidth={active ? 3 : 1.25}
       />
-      {slices.map((s, idx) => (
-        <path
-          key={`slice-${idx}`}
-          data-cdl-role="chart-pie-slice"
-          data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
-          d={s.path}
-          fill={sliceColor(s.d.tone, idx)}
-          fillOpacity={active ? 0.95 : 0.85}
-          stroke="var(--cdl-node-fill, #ffffff)"
-          strokeWidth={1.5}
-        />
-      ))}
+      {drawing && (
+        <defs>
+          <clipPath id={切り抜きid}>{扇形の切り抜き(cx, cy, radius + 2, 開き)}</clipPath>
+        </defs>
+      )}
+      {/*
+        **扇の `d` は触らない** (cdl#516)。 進みで再計算すると、扇の形から取り分を測る
+        利用側が進みの途中で別の値を読む。 見える範囲だけを切り抜きで変える。
+
+        描く指定が無い図には包みも `clip-path` も足さない = 既存の図の DOM を変えない
+      */}
+      <g {...(drawing ? { clipPath: `url(#${切り抜きid})` } : {})}>
+        {slices.map((s, idx) => (
+          <path
+            key={`slice-${idx}`}
+            data-cdl-role="chart-pie-slice"
+            data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
+            d={s.path}
+            fill={sliceColor(s.d.tone, idx)}
+            fillOpacity={active ? 0.95 : 0.85}
+            stroke="var(--cdl-node-fill, #ffffff)"
+            strokeWidth={1.5}
+          />
+        ))}
+      </g>
 
-      {slices.map((s, idx) => (
+      {/*
+        行の位置は `idx` から決まる。 いまの開き方は必ず先頭からの連続なので、開いた扇だけを
+        `filter` で抜いても位置は同じになる (変異試験で実測 = 差が出ない)。
+
+        それでも `idx` を保つ形で書くのは、位置の計算が抜き方に依存しないため。 開く順が
+        先頭からでなくなった時に、この場所を直し忘れても位置がずれない
+      */}
+      {slices.map((s, idx) => !開き始めた(s.startFrac) ? null : (
         <g key={`legend-${idx}`} transform={`translate(${legendX} ${legendStartY + idx * legendGap})`}>
           <rect
             x={0}
@@ -110,6 +159,22 @@ export function ChartPieNode({
 }
 
 
+/**
+ * 12 時から時計回りに開く扇形 (cdl#516)。 円を切り抜く形に使う。
+ *
+ * 1 周ちょうどは扇形で表せない (始点と終点が同じ点になり、 弧の向きが決まらない)。
+ * その時だけ円をそのまま返す = 進み 1 で図が消える形を避ける。
+ */
+function 扇形の切り抜き(cx: number, cy: number, r: number, 開き: number): JSX.Element | null {
+  if (開き <= 0) return null;
+  if (開き >= 1) return <circle cx={cx} cy={cy} r={r} />;
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + 開き * Math.PI * 2;
+  const large = 開き > 0.5 ? 1 : 0;
+  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
+  return <path d={d} />;
+}
+
 const FALLBACK_ORDER: Tone[] = ["accent", "teal", "warning", "success", "info", "error"];
 
 function sliceColor(tone: Tone | undefined, idx: number): string {

package/src/render/nodes.tsx

@@ -84,12 +84,18 @@ import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
 export function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId,
 }: {
   node: LaidNode;
   active: boolean;
+  /**
+   * この phase の `draw` に載っているか (cdl#512)。 true の間だけ、 対象の種別が
+   * phase の進み (`progress`) に合わせて左の起点から描かれる。
+   */
+  drawing?: boolean;
   progress: number;
   stateValues: Record<string, string>;
   currentPhaseId: string | undefined;
@@ -154,11 +160,35 @@ export function CdlNodeView({
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
       // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
-        return <ChartLineNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <ChartLineNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-pie":
-        return <ChartPieNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <ChartPieNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-bar":
-        return <ChartBarNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <ChartBarNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "gantt-timeline":
         return <GanttNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "mind-map":

package/src/render/stage.tsx

@@ -25,6 +25,9 @@ export function CdlStage({
   svgRef?: React.RefObject<SVGSVGElement | null>;
 }): JSX.Element {
   const activeSet = new Set(currentPhase?.activate ?? []);
+  // この phase で左の起点から描き始める node (cdl#512)。 `activate` とは別集合で持つ =
+  // 焦点が当たり続ける図で毎 phase 引き直すことになるため、 光っているかを引き金にしない
+  const drawSet = new Set(currentPhase?.draw ?? []);
   // 縦線の終点は全 lane で 1 つに揃える (等長保証)。 値の決め方と、 1 lane の異常が図全体から
   // 縦線を消していた形の対処は `uniformLifelineEndY` の説明。
   //
@@ -208,6 +211,7 @@ export function CdlStage({
             <CdlNodeView
               node={node}
               active={activeSet.has(node.id)}
+              drawing={drawSet.has(node.id)}
               progress={progress}
               stateValues={stateValues}
               currentPhaseId={currentPhase?.id}

package/src/types.ts

@@ -2124,6 +2124,27 @@ export type CdlPhase = {
   title: string;
   body: string;
   activate: string[];
+  /**
+   * この phase で「左の起点から描き始める」 node の id (cdl#512)。
+   *
+   * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
+   * 描かれ、 進みが 1 に達した時点で全体が出る。 起点は種別ごとに違う。
+   *
+   * | kind | 起点 | 動き | 添える値 |
+   * |---|---|---|---|
+   * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+   * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+   * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+   *
+   * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
+   *
+   * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
+   * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら
+   * 描く」 にすると、 値が動くだけの phase でも線を引き直すことになる。
+   *
+   * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
+   */
+  draw?: string[];
   /** 数値 state の線形補間 (write phase で 100→90 等) */
   tweens: Array<{ stateId: string; from: number; to: number }>;
   /** 任意型 state の即時切替 (この phase に到達したら値を上書き、 lerp なし) */