@cardenelabs/cdl 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -5,6 +5,35 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.29.0] - 2026-09-04
+
+### Added
+
+- **図の種類を絵の根に出すようにした** (#645)
+
+  これまで絵の根に出ていたのは `data-cdl-stage` と `data-cdl-scale` と `data-cdl-palette` の
+  3 つだけで、図の種類が出ていなかった。 そのため消費側が図の種類で描き分けられない。
+
+  実際に困った例は、消費側の dragon でクラス図の関係の線だけを太くしようとした時。
+  線の規則は `[data-cdl-role="edge-line"]` 1 つしかなく、直すと ER 図 ・ 状態遷移図 ・
+  流れ図 ・ 並び図 の線まで同時に太くなる。
+
+  `data-cdl-palette` では選び分けられない = クラス図と ER 図がどちらも `kinari` を出すため。
+
+  `palette` (#1553) と同じ形にした = **cdl は名前だけを出し、見た目は消費側が決める**。
+  値を engine に持たせると、消費側が表現を変えるたびに engine の release が要る。
+
+  種類名は組み立て器の名前をそのまま小文字で使う。 例外は 4 件。
+
+  | 組み立て器 | 種類名 | なぜ |
+  |---|---|---|
+  | `classDiagram` | `class` | 消費側の記法が `class` を使う |
+  | `userJourney` | `journey` | 同上 |
+  | `mindMap` | `mindmap` | 大文字小文字を混ぜない |
+  | `stateMachine` と `stateMachine2` | どちらも `state` | 後者は入れ子と動作を足した拡張で、図の種類としては同じ |
+
+  組み立て器を通さず `diagram()` を直に呼んだ図と、空文字を渡した図には属性を出さない。
+
 ## [0.28.0] - 2026-09-04
 
 ### Changed
@@ -1411,7 +1440,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.28.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.29.0...HEAD
+[0.29.0]: https://github.com/cardene777/cdl/compare/v0.28.0...v0.29.0
 [0.28.0]: https://github.com/cardene777/cdl/compare/v0.27.0...v0.28.0
 [0.27.0]: https://github.com/cardene777/cdl/compare/v0.26.0...v0.27.0
 [0.26.0]: https://github.com/cardene777/cdl/compare/v0.25.0...v0.26.0

package/dist/index.cjs

@@ -11486,6 +11486,8 @@ function diagram(id, options) {
         ...options.structuredData === "exclude" ? { structuredData: "exclude" } : {},
         // 配色の名前は素通しする。 空文字の遮断は `layout` が持つ (後段が必ず通るため)
         ...options.palette !== void 0 ? { palette: options.palette } : {},
+        // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
+        ...options.type !== void 0 ? { type: options.type } : {},
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...inputs.length > 0 ? { inputs: [...inputs] } : {},
         ...formulas.length > 0 ? { formulas: [...formulas] } : {},
@@ -20282,6 +20284,8 @@ function layout(diag) {
     // **遮断はここだけに置く**。 描画は必ず組み立てを通り、組み立て API も `er` も
     // 素通しにしてある。 上流にも置くと、どの入力でも通らない分岐が残る
     ...diag.palette ? { palette: diag.palette } : {},
+    // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
+    ...diag.type ? { type: diag.type } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -29701,6 +29705,7 @@ function CdlStage({
         "data-cdl-stage": "",
         "data-cdl-scale": diagramScale === 1 ? void 0 : diagramScale,
         "data-cdl-palette": laid.palette,
+        "data-cdl-type": laid.type,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
@@ -30370,7 +30375,7 @@ function fitRowsWidth(boxW, rows) {
 }
 function swimlane(preset) {
   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 = /* @__PURE__ */ new Map();
   const idsInOrder = [];
   for (const label of preset.lanes) {
@@ -30390,7 +30395,7 @@ function swimlane(preset) {
 }
 function flow(preset) {
   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 = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "dotted-flow";
@@ -30451,7 +30456,7 @@ var SEQUENCE_MESSAGE_LOOK = {
 };
 function sequence(preset) {
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
   const \u9762\u3005 = preset.actors.map(
     (a) => typeof a === "string" ? { name: a } : { name: a.name, ...a.subtitle ? { subtitle: a.subtitle } : {} }
   );
@@ -30506,7 +30511,7 @@ function topology(preset) {
   const groupW = preset.groupWidth ?? 460;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "topology" });
   const groupOrder = [];
   const groupStackCount = /* @__PURE__ */ new Map();
   const phaseActivate = [];
@@ -30575,7 +30580,7 @@ function er(preset) {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone = preset.defaultTone ?? "info";
   const \u7E1E\u3092\u6577\u304F = 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: "er" });
   const entities = [];
   const phaseActivate = [];
   let relIdx = 0;
@@ -30661,7 +30666,7 @@ var FSM_ACTION_MARK = {
 function stateMachine(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
   const phaseActivate = [];
   const stateOrder = /* @__PURE__ */ new Map();
   const \u72B6\u614B = [];
@@ -30773,7 +30778,7 @@ function infrastructure(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "infrastructure" });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let connIdx = 0;
@@ -30854,7 +30859,7 @@ function classDiagram(preset) {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   const \u56F3\u306E\u65E2\u5B9A = preset.defaultTone;
   const \u7E1E\u3092\u6577\u304F = 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 = [];
   const phaseActivate = [];
   const \u7BB1 = [];
@@ -30941,7 +30946,7 @@ function classDiagram(preset) {
 function tree(preset) {
   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 = [];
   const api = {
     node(n) {
@@ -30979,7 +30984,7 @@ function tree(preset) {
 function userJourney(preset) {
   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 = [];
   const api = {
     step(s) {
@@ -31018,7 +31023,7 @@ function userJourney(preset) {
 function mindMap(preset) {
   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 = [];
   const api = {
     branch(br) {
@@ -31062,7 +31067,7 @@ function mindMap(preset) {
 function funnel(preset) {
   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 = [];
   const api = {
     stage(s) {
@@ -31100,7 +31105,7 @@ function funnel(preset) {
 function quadrant(preset) {
   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 = [];
   const api = {
     item(it) {
@@ -31151,7 +31156,7 @@ function chart(preset) {
   const canvasH = toGridSize(
     preset.type === "pie" || preset.type === "gauge" || preset.type === "radial" || preset.type === "stat" || preset.type === "waffle" || preset.type === "stacked-bar" ? 320 : 360
   );
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
   const data = [];
   const kindMap = {
     line: "chart-line",
@@ -31200,7 +31205,7 @@ function gantt(preset) {
   const canvasW = preset.laneWidth ? preset.laneWidth * 2 : 720;
   const canvasH = 360;
   const tone = preset.defaultTone ?? "teal";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "gantt" });
   const tasks = [];
   const api = {
     task(t) {
@@ -31266,7 +31271,7 @@ var SHAPE_EYEBROW = {
 function flowchart(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
   const laneToId = /* @__PURE__ */ new Map();
   const laneStackCount = /* @__PURE__ */ new Map();
   for (const label of preset.lanes) {
@@ -31327,7 +31332,7 @@ var NET_KIND_MAP = {
 function network(preset) {
   const laneW = preset.laneWidth ?? 320;
   const tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "network" });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let edgeIdx = 0;
@@ -31377,7 +31382,7 @@ function stateMachine2(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine2");
   const laneW = boxLaneW(stateW);
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic });
+  const b = diagram(preset.id, { topic: preset.topic, type: "state" });
   const stateOrder = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let transIdx = 0;