@cardenelabs/cdl 0.10.0 → 0.12.0

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,
+      });
     }
   }
 

package/src/kinds/tree.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
 import { 箱に積む, type 積んだ行 } from "../kinds/box-lines";
+import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 /**
  * tree-hierarchy kind ... 1 node に tree node 配列 (treeData) を保持し、
@@ -53,10 +54,16 @@ export function TreeNode({
   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;
@@ -72,6 +79,16 @@ export function TreeNode({
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
 
   const layout = computeTreeLayout(treeNodes, 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;
   const depthColors = [TONE.accent, TONE.teal, TONE.success, TONE.warning, TONE.info];
 
   return (
@@ -106,6 +123,10 @@ export function TreeNode({
         const y2 = PAD_TOP + e.y2;
         const midY = (y1 + y2) / 2;
         const path = `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`;
+        // 循環を閉じる枝は根から外へ向かう枝ではないため、全 node が出てから表示する
+        const 枝の伸び = e.deferUntilComplete
+          ? (伸び >= 1 ? 1 : 0)
+          : 段の伸び(伸び, e.depth, 最大深さ);
         return (
           <g key={`edge-${i}`}>
             <path
@@ -116,13 +137,19 @@ export function TreeNode({
               strokeOpacity={0.55}
               strokeWidth={1.5}
               strokeLinejoin="round"
+              {...伸ばすdash(drawing, 枝の伸び)}
             />
-            <circle cx={x1} cy={midY} r={2.5} fill={TONE.accent} fillOpacity={0.75} />
+            {/* 曲がり角の点は枝が届いてから出す。 先に出ると線の無い場所に点が浮く */}
+            {(!drawing || 枝の伸び >= 1) && (
+              <circle cx={x1} cy={midY} r={2.5} fill={TONE.accent} fillOpacity={0.75} />
+            )}
           </g>
         );
       })}
 
       {layout.nodes.map((n) => {
+        // 枝が届いてから箱を出す。 届く前に出すと、繋がっていない箱が宙に浮く
+        if (!箱が出る(n.depth)) return null;
         const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0]!;
         const isRoot = n.depth === 0;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
@@ -232,13 +259,23 @@ type LayoutNode = {
   unresolved?: true;
 };
 
+type LayoutEdge = {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  depth: number;
+  /** 循環により、元の親が layout 上で子と同じ深さか深くなった枝 */
+  deferUntilComplete: boolean;
+};
+
 export function computeTreeLayout(
   treeNodes: TreeNodePayload[],
   canvasW: number,
   canvasH: number,
 ): {
   nodes: LayoutNode[];
-  edges: Array<{ x1: number; y1: number; x2: number; y2: number }>;
+  edges: LayoutEdge[];
 } {
   // parent が実在しない node は root 扱いにする。 そうしないと root からの再帰で辿れず、
   // node が silent に消える (旧実装は全 node を列挙していたので消えなかった)。
@@ -357,7 +394,9 @@ export function computeTreeLayout(
   }
   const hById = new Map(nodes.map((n) => [n.id, n.h]));
 
-  const edges: Array<{ x1: number; y1: number; x2: number; y2: number }> = [];
+  // 枝の段数は「その枝の先 (子)」 の段数 (cdl#520)。 段ごとに順に伸ばすのに使う
+  const 段数 = new Map(nodes.map((n) => [n.id, n.depth]));
+  const edges: LayoutEdge[] = [];
   for (const n of treeNodes) {
     if (!n.parent) continue;
     const parent = posOf.get(n.parent);
@@ -365,7 +404,16 @@ export function computeTreeLayout(
     if (!parent || !child) continue;
     const parentH = hById.get(n.parent) ?? nodeH;
     const childH = hById.get(n.id) ?? nodeH;
-    edges.push({ x1: parent.x, y1: parent.y + parentH / 2, x2: child.x, y2: child.y - childH / 2 });
+    const parentDepth = 段数.get(n.parent) ?? 0;
+    const childDepth = 段数.get(n.id) ?? 1;
+    edges.push({
+      x1: parent.x,
+      y1: parent.y + parentH / 2,
+      x2: child.x,
+      y2: child.y - childH / 2,
+      depth: Math.max(parentDepth, childDepth),
+      deferUntilComplete: parentDepth >= childDepth,
+    });
   }
 
   return { nodes, edges };

package/src/kinds/user-journey.tsx

@@ -2,6 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode, JourneyEmotion } from "../types";
 import { TONE } from "../render/tone";
 import { resolveJourneyData } from "../render/payload-binding";
+import { 進みを畳む, 伸ばすdash, ベジエの累積割合 } from "./draw-progress";
 
 /**
  * journey-map kind ... 1 node に step 配列 (journeyData) を保持し、 UX journey map を SVG 描画する。
@@ -18,10 +19,16 @@ export function UserJourneyNode({
   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;
@@ -70,6 +77,21 @@ export function UserJourneyNode({
 
   // smooth curve for emotion path
   const pts = steps.map((s, i) => ({ x: xAt(i), y: yAt(s.emotion) }));
+  /**
+   * 線がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全長。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+  /**
+   * 各段までの累積割合。 **点番号の比率ではなく実際の経路長で測る** (#513 の指摘)。
+   * 気持ちの上下で区間の長さが変わるため、比率で判定すると先端と丸がずれる。
+   */
+  const 段までの割合 = ベジエの累積割合(pts, (前, 後) => {
+    const midX = (前.x + 後.x) / 2;
+    return [{ x: midX, y: 前.y }, { x: midX, y: 後.y }];
+  });
+  /** その段まで線の先が届いたか。 左端は進み 0 でも出す (そこが線の起点) */
+  const 線の先が届いた = (idx: number): boolean => !drawing || 伸び >= (段までの割合[idx] ?? 0);
+
   const smoothPath = pts.length > 1
     ? pts.reduce((acc, p, i) => {
         if (i === 0) return `M ${p.x} ${p.y}`;
@@ -144,6 +166,10 @@ export function UserJourneyNode({
 
       {steps.length > 1 && (
         <>
+          {/*
+            影と本体は同じ進みで伸ばす。 片方だけ先行すると、線の先に影だけが伸びた
+            形になる (cdl#520)
+          */}
           <path
             data-cdl-role="journey-line-glow"
             d={smoothPath}
@@ -152,6 +178,7 @@ export function UserJourneyNode({
             strokeOpacity={0.18}
             strokeWidth={10}
             strokeLinecap="round"
+            {...伸ばすdash(drawing, 伸び)}
           />
           <path
             data-cdl-role="journey-line"
@@ -161,11 +188,12 @@ export function UserJourneyNode({
             strokeWidth={2.75}
             strokeLinejoin="round"
             strokeLinecap="round"
+            {...伸ばすdash(drawing, 伸び)}
           />
         </>
       )}
 
-      {steps.map((s, idx) => (
+      {steps.map((s, idx) => !線の先が届いた(idx) ? null : (
         <g
           key={`step-${s.id}`}
           data-cdl-role="journey-step"

package/src/render/nodes.tsx

@@ -170,21 +170,77 @@ export function CdlNodeView({
           />
         );
       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} />;
+        return (
+          <GanttNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "mind-map":
-        return <MindMapNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <MindMapNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "funnel-stages":
-        return <FunnelNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <FunnelNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "quadrant-matrix":
         return <QuadrantNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "tree-hierarchy":
-        return <TreeHierarchyNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <TreeHierarchyNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "journey-map":
-        return <UserJourneyNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        return (
+          <UserJourneyNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "shape-file":
         return <ShapeFileNode node={resolvedNode} active={active} />;
       case "shape-folder":

package/src/types.ts

@@ -2128,8 +2128,20 @@ export type CdlPhase = {
    * この phase で「左の起点から描き始める」 node の id (cdl#512)。
    *
    * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
-   * 描かれ、 進みが 1 に達した時点で全体が出る。 現在の対象は `chart-line` だけで、
-   * 折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる。
+   * 描かれ、 進みが 1 に達した時点で全体が出る。 起点は種別ごとに違う。
+   *
+   * | kind | 起点 | 動き | 添える値 |
+   * |---|---|---|---|
+   * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+   * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+   * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+   * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
+   * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
+   * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
+   * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
+   * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+   *
+   * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
    *
    * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
    * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら

package/src/validate.ts

@@ -5,6 +5,34 @@ import { nodeTemplateTexts } from "./render/template-fields";
 import { derivedRefIds } from "./render/derived-values";
 
 const TONES = new Set<string>(TONE_NAMES);
+
+/**
+ * phase の `draw` が効く kind (cdl#512 / cdl#516)。
+ *
+ * **一覧を 1 箇所で持つ**。 知らせの文面もここから組み立てる = 対応種別が増えた時に
+ * 片方だけ古くなる形を作らない。
+ *
+ * | kind | 起点 | 動き |
+ * |---|---|---|
+ * | `chart-line` | 左端 | 線が右へ伸びる |
+ * | `chart-bar` | 横軸 | 棒が上へ伸びる |
+ * | `chart-pie` | 12 時 | 扇が時計回りに開く |
+ * | `journey-map` | 左端 | 気持ちの線が右へ伸びる |
+ * | `mind-map` | 中心 | 枝が中心から外へ伸びる |
+ * | `tree-hierarchy` | 根 | 枝が上の段から下の段へ伸びる |
+ * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる |
+ * | `funnel-stages` | 上端 | 段が上から順に積まれる |
+ */
+export const DRAW_KINDS: ReadonlySet<string> = new Set([
+  "chart-line",
+  "chart-bar",
+  "chart-pie",
+  "journey-map",
+  "mind-map",
+  "tree-hierarchy",
+  "gantt-timeline",
+  "funnel-stages",
+]);
 const KINDS = new Set<string>(NODE_KINDS);
 const ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
 
@@ -166,8 +194,10 @@ export function validate(diag: CdlDiagram): void {
       // 描き方を持たない種別を指しても図は出るが、 書いた指定は何もしない。
       // 黙って捨てると「書いたのに伸びない」 が手掛かりなしで起きる
       const kind = diag.nodes.find((n) => n.id === id)?.kind;
-      if (kind !== "chart-line") {
-        warnings.push(`phase "${p.id}" の draw "${id}" は kind "${kind}" で、 左から描く動きを持たない (対象は chart-line)`);
+      if (!DRAW_KINDS.has(String(kind))) {
+        warnings.push(
+          `phase "${p.id}" の draw "${id}" は kind "${kind}" で、 起点から描く動きを持たない (対象は ${[...DRAW_KINDS].join(" / ")})`,
+        );
       }
     }
     for (const t of p.tweens) {