@cardenelabs/cdl 0.27.0 → 0.29.0

package/dist/{render-ViWKnlu1.d.cts → render-CabTMeao.d.cts}

@@ -2453,6 +2453,17 @@ type CdlDiagram = {
      * 既定の図にも当たる。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 書かない図は種類を持たない。
+     *
+     * **`cdl` は種類の名前だけを出す**。 名前を `data-cdl-type` として図の根に出すだけで、
+     * 太さや色などの見た目は消費側が決める。 見た目を `cdl` に持たせると、消費側の表現を
+     * 変えるたびに `cdl` の更新が要る。
+     *
+     * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-type]` が
+     * 種類を書いていない図にも当たる。
+     */
+    type?: string;
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2652,6 +2663,8 @@ type LaidDiagram = {
     topic: string;
     /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
     palette?: string;
+    /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
+    type?: string;
     viewBox: {
         x: number;
         y: number;

package/dist/{render-ViWKnlu1.d.ts → render-CabTMeao.d.ts}

@@ -2453,6 +2453,17 @@ type CdlDiagram = {
      * 既定の図にも当たる。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 書かない図は種類を持たない。
+     *
+     * **`cdl` は種類の名前だけを出す**。 名前を `data-cdl-type` として図の根に出すだけで、
+     * 太さや色などの見た目は消費側が決める。 見た目を `cdl` に持たせると、消費側の表現を
+     * 変えるたびに `cdl` の更新が要る。
+     *
+     * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-type]` が
+     * 種類を書いていない図にも当たる。
+     */
+    type?: string;
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2652,6 +2663,8 @@ type LaidDiagram = {
     topic: string;
     /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
     palette?: string;
+    /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
+    type?: string;
     viewBox: {
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.27.0",
+  "version": "0.29.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

@@ -1642,6 +1642,10 @@ export function diagram(
      * この図をどの配色で描くか (#1553)。 詳細は `CdlDiagram.palette` の doc 参照。
      */
     palette?: string;
+    /**
+     * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
+     */
+    type?: string;
   },
 ): DiagramBuilder {
   const lanes: CdlLane[] = [];
@@ -3780,6 +3784,8 @@ export function diagram(
         ...(options.structuredData === "exclude" ? { structuredData: "exclude" as const } : {}),
         // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
         ...(options.palette !== undefined ? { palette: options.palette } : {}),
+        // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
+        ...(options.type !== undefined ? { type: options.type } : {}),
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...(inputs.length > 0 ? { inputs: [...inputs] } : {}),
         ...(formulas.length > 0 ? { formulas: [...formulas] } : {}),

package/src/layout.ts

@@ -403,6 +403,8 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...(diag.palette ? { palette: diag.palette } : {}),
+    // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
+    ...(diag.type ? { type: diag.type } : {}),
     bboxes,
     collisions,
     nearCollisions,

package/src/presets.ts

@@ -217,7 +217,7 @@ export type SwimlaneResult = DiagramBuilder & {
 
 export function swimlane(preset: SwimlanePreset): SwimlaneResult {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "swimlane" });
   const labelToId = new Map<string, string>();
   const idsInOrder: string[] = [];
   for (const label of preset.lanes) {
@@ -297,7 +297,7 @@ export type FlowBuilder = {
  */
 export function flow(preset: FlowPreset): FlowBuilder {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flow" });
   b.lane("flow", { width: w, ...(preset.laneLabel ? { label: preset.laneLabel } : {}) });
   const tone: Tone = preset.defaultTone ?? "accent";
   const style: EdgeStyle = preset.defaultStyle ?? "dotted-flow";
@@ -451,7 +451,7 @@ export type SequenceBuilder = {
  */
 export function sequence(preset: SequencePreset): SequenceBuilder {
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
 
   // 名前だけの文字列と、呼び名を添えた物の両方を受ける (#578)
   const 面々: SequenceBoardActor[] = preset.actors.map((a) =>
@@ -591,7 +591,7 @@ export function topology(preset: TopologyPreset): TopologyBuilder {
   const groupW = preset.groupWidth ?? 460;
   const tone: Tone = preset.defaultTone ?? "accent";
   const style: EdgeStyle = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "topology" });
 
   const groupOrder: string[] = [];
   const groupStackCount = new Map<string, number>();
@@ -803,7 +803,7 @@ export function er(preset: ErPreset): ErBuilder {
   const tone: Tone = preset.defaultTone ?? "info";
   const 縞を敷く = preset.rowStripe ?? true;
   // 配色の名前は素通しする。 空文字の遮断は `diagram` が持つ = ここで重ねると到達しない分岐になる
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "er" });
 
   const entities: string[] = [];
   const phaseActivate: string[] = [];
@@ -1030,7 +1030,7 @@ export type StateMachineBuilder = {
 export function stateMachine(preset: StateMachinePreset): StateMachineBuilder {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
 
   const phaseActivate: string[] = [];
   const stateOrder = new Map<string, number>();
@@ -1236,7 +1236,7 @@ export function infrastructure(preset: InfrastructurePreset): InfrastructureBuil
   const laneW = preset.laneWidth ?? 380;
   const tone: Tone = preset.defaultTone ?? "accent";
   const style: EdgeStyle = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "infrastructure" });
 
   // col → laneId、 col の数で lane を auto 作成
   const colLaneIds = new Map<number, string>();
@@ -1347,6 +1347,38 @@ export const CLASS_RELATION_LOOK: Record<
   uses: { head: "open", fill: "solid", tailHead: "none", tailFill: "solid", style: "dashed" },
 };
 
+/**
+ * 関係の 6 種を 3 群に寄せた色み (#641)。
+ *
+ * 足す前は 6 種とも 1 色で、種類の違いが色に出なかった。 見分けを担うのは 線 / 印の形 /
+ * 印が付く側 の 3 軸だけで、6 種を 1 枚に並べると印の形まで見ないとどれがどれか判らない。
+ *
+ * **群の中は色を分けない**。 群の中の 2 種は既に線か印の塗りで分かれているので、色まで足すと
+ * 同じことを 2 回言うことになる。 色が担うのは群の見分けだけ。
+ *
+ * | 群 | 種類 | 群の中の見分け |
+ * |---|---|---|
+ * | 縦の関係 | `extends` / `implements` | 線 (実線 / 破線) |
+ * | 所有 | `aggregates` / `composes` | 印の塗り (白抜き / 塗る) |
+ * | 向きだけ | `associates` / `uses` | 線 (実線 / 破線) |
+ *
+ * 群の分け方は `CLASS_RELATION_LOOK` と同じ = あちらの 印の形 が群を表しており、
+ * 三角 = 縦の関係 / 菱 = 所有 / 開いた矢 = 向きだけ に 1 対 1 で対応する。
+ *
+ * **色の値は持たない**。 描き手は名前だけを図に載せ、実際の色は消費側が `data-cdl-tone` を
+ * 見て当てる。 値を持たせると、色を変えるたびに描き手を出し直すことになる。
+ *
+ * `Record<ClassRelationType, Tone>` なので、種類を足すと色みも要る。
+ */
+export const CLASS_RELATION_TONE: Record<ClassRelationType, Tone> = {
+  extends: "accent",
+  implements: "accent",
+  aggregates: "teal",
+  composes: "teal",
+  associates: "success",
+  uses: "success",
+};
+
 /** 端の形だけを引く経路 (cdl#574 からの名前を残す)。 実体は `CLASS_RELATION_LOOK` */
 export const CLASS_RELATION_HEAD: Record<ClassRelationType, EdgeHead> = Object.fromEntries(
   Object.entries(CLASS_RELATION_LOOK).map(([k, v]) => [k, v.head]),
@@ -1457,10 +1489,16 @@ export type ClassDiagramBuilder = {
  */
 export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
-  const tone: Tone = preset.defaultTone ?? "info";
+  /**
+   * 図ぜんぶに効く色み (#641)。 **書かなければ種類ごとに決まる**。
+   *
+   * 書いた図は「全部同じ色みにする」 と宣言しているので、種類の既定より勝たせる。
+   * 優先順位は 関係に書いた色み > 図に書いた既定 > 種類から決まる既定 の 3 段。
+   */
+  const 図の既定 = preset.defaultTone;
   // 縞と配色は `er()` と同じ扱い (#627)。 箱の作りが同じなので、既定も揃える
   const 縞を敷く = preset.rowStripe ?? true;
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette });
+  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "class" });
 
   const classes: string[] = [];
   const phaseActivate: string[] = [];
@@ -1536,7 +1574,7 @@ export function classDiagram(preset: ClassDiagramPreset): ClassDiagramBuilder {
           id: edgeId,
           label: r.label ?? r.type,
           ...(r.cardinality ? { sub: r.cardinality } : {}),
-          tone: r.tone ?? tone,
+          tone: r.tone ?? 図の既定 ?? CLASS_RELATION_TONE[r.type],
           // 関係の種類から線と端の形を決める (cdl#574 / #578)。 書いた値が勝つ
           style: r.style ?? 見た目.style,
           head: r.head ?? 見た目.head,
@@ -1602,7 +1640,7 @@ export type TreeBuilder = {
 export function tree(preset: TreePreset): TreeBuilder {
   const canvasW = preset.nodeWidth ? preset.nodeWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
   const treeNodes: TreeNode[] = [];
 
   const api: TreeBuilder = {
@@ -1684,7 +1722,7 @@ export type UserJourneyBuilder = {
 export function userJourney(preset: UserJourneyPreset): UserJourneyBuilder {
   const canvasW = preset.stepWidth ? preset.stepWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "journey" });
   const steps: JourneyStep[] = [];
 
   const api: UserJourneyBuilder = {
@@ -1767,7 +1805,7 @@ export type MindMapBuilder = {
 export function mindMap(preset: MindMapPreset): MindMapBuilder {
   const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "mindmap" });
   const branches: MindBranch[] = [];
 
   const api: MindMapBuilder = {
@@ -1849,7 +1887,7 @@ export type FunnelBuilder = {
 export function funnel(preset: FunnelPreset): FunnelBuilder {
   const canvasW = toGridSize(preset.stageWidth ?? 560);
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "funnel" });
   const stages: FunnelStage[] = [];
 
   const api: FunnelBuilder = {
@@ -1936,7 +1974,7 @@ export type QuadrantBuilder = {
 export function quadrant(preset: QuadrantPreset): QuadrantBuilder {
   const canvasW = 640;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "quadrant" });
   const items: QuadrantItem[] = [];
 
   const api: QuadrantBuilder = {
@@ -2050,7 +2088,7 @@ export function chart(preset: ChartPreset): ChartBuilder {
       ? 320
       : 360,
   );
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
   const data: ChartDatum[] = [];
 
   const kindMap = {
@@ -2161,7 +2199,7 @@ export function gantt(preset: GanttPreset): GanttBuilder {
   const canvasW = preset.laneWidth ? preset.laneWidth * 2 : 720;
   const canvasH = 360;
   const tone: Tone = preset.defaultTone ?? "teal";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "gantt" });
   const tasks: GanttTask[] = [];
 
   const api: GanttBuilder = {
@@ -2288,7 +2326,7 @@ const SHAPE_EYEBROW: Record<FlowchartNodeShape, string> = {
 export function flowchart(preset: FlowchartPreset): FlowchartBuilder {
   const laneW = preset.laneWidth ?? 380;
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
 
   const laneToId = new Map<string, string>();
   const laneStackCount = new Map<string, number>();
@@ -2405,7 +2443,7 @@ const NET_KIND_MAP: Record<NetworkDeviceKind, NodeKind> = {
 export function network(preset: NetworkPreset): NetworkBuilder {
   const laneW = preset.laneWidth ?? 320;
   const tone: Tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "network" });
 
   const colLaneIds = new Map<number, string>();
   const phaseActivate: string[] = [];
@@ -2522,7 +2560,7 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
   const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
   const laneW = boxLaneW(stateW);
   const tone: Tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
 
   const stateOrder = new Map<string, number>();
   const phaseActivate: string[] = [];

package/src/render/stage.tsx

@@ -151,6 +151,7 @@ export function CdlStage({
         // 通るため、空文字は `layout` が既に落としている。 ここにも守りを置くと、
         // どの入力でも通らない分岐が残る
         data-cdl-palette={laid.palette}
+        data-cdl-type={laid.type}
       >
         <defs>
           {/* CAR-643 = cdl は geometry only。 shadow / border effect の filter は cdl SVG 内に

package/src/types.ts

@@ -2528,6 +2528,17 @@ export type CdlDiagram = {
    * 既定の図にも当たる。
    */
   palette?: string;
+  /**
+   * この図がどの種類か (#645)。 書かない図は種類を持たない。
+   *
+   * **`cdl` は種類の名前だけを出す**。 名前を `data-cdl-type` として図の根に出すだけで、
+   * 太さや色などの見た目は消費側が決める。 見た目を `cdl` に持たせると、消費側の表現を
+   * 変えるたびに `cdl` の更新が要る。
+   *
+   * 空文字は書かなかった扱いにする = 空を出すと消費側の `[data-cdl-type]` が
+   * 種類を書いていない図にも当たる。
+   */
+  type?: string;
   /**
    * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
    *
@@ -2734,6 +2745,8 @@ export type LaidDiagram = {
   topic: string;
   /** どの配色で描くか (#1553)。 `CdlDiagram.palette` をそのまま持ち越す */
   palette?: string;
+  /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
+  type?: string;
   viewBox: { x: number; y: number; w: number; h: number };
   /**
    * 図全体の倍率 (`CdlViewport.scale` を正規化した値)。