@cardenelabs/cdl 0.53.0 → 0.54.0

package/CHANGELOG.md

@@ -5,6 +5,31 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.54.0] - 2026-09-11
+
+### Changed
+
+- **図の組み立て関数が自動で書き足す字を、英語から日本語にした** (#835)
+
+  組み立て関数は書き手の入力とは別に、箱の札・説明・最後の段の説明を書き足す。 そこに英語が混ざっていた。
+
+  | 組み立て関数 | 直す前 | 直した後 |
+  |---|---|---|
+  | `flowchart` の形の札 | `process` `decision` `start` `end` `loop` | 処理 / 判断 / 開始 / 終了 / 繰り返し |
+  | `network` の機器の札 | `router` `switch` `firewall` `server` `client` | ルーター / スイッチ / ファイアウォール / サーバー / 端末 |
+  | `stateMachine2` の入れ子の札 | `状態 / nested in active` (親の識別子) | `状態 / Activeの中` (親の題) |
+  | `stateMachine2` の入る時と出る時 | `entry: clearForm` / `exit: stopSpinner` | `入る時: clearForm` / `出る時: stopSpinner` |
+  | 17 種の最後の段の説明 | 「全 step 順次実行。」 「network 全 device + link を visible 化。」 など | 「すべての段を上から順に通った流れ。」 「すべての機器と接続を並べた構成。」 など |
+
+  入れ子の札は、親を後から宣言しても親の題を引く。 段の札 (`badge`) と、描く側が描かない図表の札は変えていない。
+
+- **文書で関係の種類を呼ぶ語を、見本帳と同じ UML の用語にした** (#833)
+
+  `README.md` の端の形の説明は、関係の種類を `継ぐ` `満たす` `持つ` と作った語で呼んでいた。
+  見本帳 (dragon) が 継承 / 実装 / 集約 / コンポジション / 関連 / 依存 に揃えたので、同じ語にした。
+  型と表の説明 (`EdgeStyle` / `EdgeHead` / `EdgeHeadFill` / `CLASS_RELATION_LOOK` / `SequenceMessageKind`) も同じ語にした。
+  見本帳を写した検査の関係名とテスト名も見本帳と同じ語にした。 実装は変えていない。
+
 ## [0.53.0] - 2026-09-11
 
 ### Fixed
@@ -2462,7 +2487,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.53.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.54.0...HEAD
+[0.54.0]: https://github.com/cardene777/cdl/compare/v0.53.0...v0.54.0
 [0.53.0]: https://github.com/cardene777/cdl/compare/v0.52.0...v0.53.0
 [0.52.0]: https://github.com/cardene777/cdl/compare/v0.51.0...v0.52.0
 [0.51.0]: https://github.com/cardene777/cdl/compare/v0.50.0...v0.51.0

package/README.md

@@ -200,8 +200,8 @@ export const custom = diagram("custom", { topic: "Custom" })
 | `dotted-flow` | 点線 + 進行点 glow (3 重円) が path 上を流れる、 node 貫通自動判定 |
 
 端の形 (`head`) は線の種類とは **別の軸** で、線の先端に何を置くかを決める。
-実線 × 三角 (継ぐ) と破線 × 三角 (満たす) は線種で分かれ、
-実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
+実線 × 三角 (継承) と破線 × 三角 (実装) は線種で分かれ、
+実線 × 三角 (継承) と実線 × 菱 (集約) は端で分かれる。
 
 | EdgeHead | 形 | 表すもの |
 |---|---|---|

package/dist/index.cjs

@@ -32169,7 +32169,7 @@ function flow(preset) {
     build() {
       b.phase(
         "flow",
-        { duration: 2400, title: preset.topic, body: "\u5168 step \u9806\u6B21\u5B9F\u884C\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6BB5\u3092\u4E0A\u304B\u3089\u9806\u306B\u901A\u3063\u305F\u6D41\u308C\u3002" },
         (p) => p.activate(...phaseActivate).badge("flow")
       );
       return b.build();
@@ -32227,7 +32227,7 @@ function sequence(preset) {
       });
       b.phase(
         "sequence",
-        { duration: 2400, title: preset.topic, body: "sequence \u306E\u5168 message \u3092\u6642\u7CFB\u5217\u5C55\u958B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u3084\u308A\u53D6\u308A\u3092\u6642\u9593\u306E\u9806\u306B\u4E26\u3079\u305F\u59FF\u3002" },
         (p) => p.activate(preset.id).badge("sequence")
       );
       return b.build();
@@ -32288,7 +32288,7 @@ function topology(preset) {
     build() {
       b.phase(
         "topo",
-        { duration: 2400, title: preset.topic, body: "topology \u306E\u5168 container + connection \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u69CB\u6210\u8981\u7D20\u3068\u63A5\u7D9A\u3092\u4E26\u3079\u305F\u69CB\u6210\u3002" },
         (p) => p.activate(...phaseActivate).badge("topology")
       );
       return b.build();
@@ -32376,7 +32376,7 @@ function er(preset) {
     build() {
       b.phase(
         "er",
-        { duration: 2400, title: preset.topic, body: "ER \u56F3\u306E\u5168 entity + relation \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u8868\u3068\u95A2\u4FC2\u3092\u4E26\u3079\u305F\u69CB\u9020\u3002" },
         (p) => p.activate(...phaseActivate).badge("er")
       );
       return b.build();
@@ -32494,7 +32494,7 @@ function stateMachine(preset) {
       });
       b.phase(
         "fsm",
-        { duration: 2400, title: preset.topic, body: "FSM \u306E\u5168 state + transition \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3092\u4E26\u3079\u305F\u59FF\u3002" },
         (p) => p.activate(...phaseActivate).badge("fsm")
       );
       return b.build();
@@ -32549,7 +32549,7 @@ function infrastructure(preset) {
     build() {
       b.phase(
         "infra",
-        { duration: 2400, title: preset.topic, body: "infrastructure \u5168 node + connection \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u69CB\u6210\u8981\u7D20\u3068\u63A5\u7D9A\u3092\u4E26\u3079\u305F\u69CB\u6210\u3002" },
         (p) => p.activate(...phaseActivate).badge("infrastructure")
       );
       return b.build();
@@ -32666,7 +32666,7 @@ function classDiagram(preset) {
       });
       b.phase(
         "class",
-        { duration: 2400, title: preset.topic, body: "UML class \u5168 class + relation \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u30AF\u30E9\u30B9\u3068\u95A2\u4FC2\u3092\u4E26\u3079\u305F\u69CB\u9020\u3002" },
         (p) => p.activate(...phaseActivate).badge("class")
       );
       return b.build();
@@ -32704,7 +32704,7 @@ function tree(preset) {
       });
       b.phase(
         "tree",
-        { duration: 2400, title: preset.topic, body: "tree \u306E\u5168 node + parent-child edge \u3092 hierarchical layout \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u9805\u76EE\u3092\u89AA\u5B50\u306E\u968E\u5C64\u3067\u4E26\u3079\u305F\u6728\u3002" },
         (p) => p.activate(nodeId).badge("tree")
       );
       return b.build();
@@ -32743,7 +32743,7 @@ function userJourney(preset) {
       });
       b.phase(
         "journey",
-        { duration: 2400, title: preset.topic, body: "userJourney \u5168 step \u3092\u611F\u60C5\u66F2\u7DDA + touchpoint \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6BB5\u968E\u3092\u3001\u6C17\u6301\u3061\u306E\u66F2\u7DDA\u3068\u63A5\u70B9\u3067\u4E26\u3079\u305F\u4F53\u9A13\u3002" },
         (p) => p.activate(nodeId).badge("journey")
       );
       return b.build();
@@ -32787,7 +32787,7 @@ function mindMap(preset) {
       });
       b.phase(
         "mindmap",
-        { duration: 2400, title: preset.topic, body: "mindMap \u5168 branch \u3092 visible \u5316\u3001 \u4E2D\u5FC3 + \u653E\u5C04\u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u4E2D\u5FC3\u306E\u4E3B\u984C\u304B\u3089\u3001\u3059\u3079\u3066\u306E\u679D\u3092\u653E\u5C04\u72B6\u306B\u5E83\u3052\u305F\u59FF\u3002" },
         (p) => p.activate(nodeId).badge("mindmap")
       );
       return b.build();
@@ -32825,7 +32825,7 @@ function funnel(preset) {
       });
       b.phase(
         "funnel",
-        { duration: 2400, title: preset.topic, body: "funnel \u5168 stage \u3092\u9006\u4E09\u89D2\u5F62 + count \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6BB5\u968E\u3092\u3001\u4EBA\u6570\u3068\u3068\u3082\u306B\u4E0A\u304B\u3089\u7D5E\u308A\u8FBC\u3093\u3060\u59FF\u3002" },
         (p) => p.activate(nodeId).badge("funnel")
       );
       return b.build();
@@ -32874,7 +32874,7 @@ function quadrant(preset) {
       });
       b.phase(
         "quadrant",
-        { duration: 2400, title: preset.topic, body: "quadrant \u5341\u5B57\u8EF8 + 4 \u8C61\u9650 + item \u3092\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "2 \u672C\u306E\u8EF8\u3067\u5206\u3051\u305F 4 \u3064\u306E\u67A0\u306B\u3001\u3059\u3079\u3066\u306E\u9805\u76EE\u3092\u7F6E\u3044\u305F\u59FF\u3002" },
         (p) => p.activate(nodeId).badge("quadrant")
       );
       return b.build();
@@ -32925,7 +32925,7 @@ function chart(preset) {
       });
       b.phase(
         "chart",
-        { duration: 2400, title: preset.topic, body: `${preset.type} chart \u306E\u5168 datum \u3092 visible \u5316\u3002` },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u5024\u3092\u63CF\u3044\u305F\u30B0\u30E9\u30D5\u3002" },
         (p) => p.activate(nodeId).badge(preset.type)
       );
       return b.build();
@@ -32978,7 +32978,7 @@ function gantt(preset) {
       });
       b.phase(
         "gantt",
-        { duration: 2400, title: preset.topic, body: "gantt \u5168 task \u3092 visible \u5316\u3001 \u5E2F\u72B6 timeline + \u4F9D\u5B58 arrow \u3067\u63CF\u753B\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u4F5C\u696D\u3092\u3001\u671F\u9593\u306E\u5E2F\u3068\u524D\u5F8C\u95A2\u4FC2\u306E\u77E2\u5370\u3067\u4E26\u3079\u305F\u5DE5\u7A0B\u3002" },
         (p) => p.activate(nodeId).badge("gantt")
       );
       return b.build();
@@ -32994,11 +32994,11 @@ var SHAPE_KIND = {
   loop: "card"
 };
 var SHAPE_EYEBROW = {
-  process: "process",
-  decision: "decision",
-  start: "start",
-  end: "end",
-  loop: "loop"
+  process: "\u51E6\u7406",
+  decision: "\u5224\u65AD",
+  start: "\u958B\u59CB",
+  end: "\u7D42\u4E86",
+  loop: "\u7E70\u308A\u8FD4\u3057"
 };
 function flowchart(preset) {
   const laneW = preset.laneWidth ?? 380;
@@ -33046,7 +33046,7 @@ function flowchart(preset) {
     build() {
       b.phase(
         "flowchart",
-        { duration: 2400, title: preset.topic, body: "flowchart \u5168 node + edge \u3092 visible \u5316\u3001 swimlane + decision \u3092\u8868\u73FE\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u51E6\u7406\u3068\u5206\u5C90\u3092\u3001\u62C5\u5F53\u3054\u3068\u306E\u30EC\u30FC\u30F3\u306B\u4E26\u3079\u305F\u6D41\u308C\u3002" },
         (p) => p.activate(...phaseActivate).badge("flowchart")
       );
       return b.build();
@@ -33061,6 +33061,13 @@ var NET_KIND_MAP = {
   server: "backend",
   client: "actor"
 };
+var NET_KIND_LABEL = {
+  router: "\u30EB\u30FC\u30BF\u30FC",
+  switch: "\u30B9\u30A4\u30C3\u30C1",
+  firewall: "\u30D5\u30A1\u30A4\u30A2\u30A6\u30A9\u30FC\u30EB",
+  server: "\u30B5\u30FC\u30D0\u30FC",
+  client: "\u7AEF\u672B"
+};
 function network(preset) {
   const laneW = preset.laneWidth ?? 320;
   const tone = preset.defaultTone ?? "info";
@@ -33076,7 +33083,7 @@ function network(preset) {
         b.lane(laneId, { width: laneW });
         colLaneIds.set(d.col, laneId);
       }
-      const eyebrowParts = [d.kind];
+      const eyebrowParts = [NET_KIND_LABEL[d.kind]];
       if (d.segment) eyebrowParts.push(d.segment);
       b.node(d.id, {
         lane: laneId,
@@ -33102,7 +33109,7 @@ function network(preset) {
     build() {
       b.phase(
         "network",
-        { duration: 2400, title: preset.topic, body: "network \u5168 device + link \u3092 visible \u5316\u3002" },
+        { duration: 2400, title: preset.topic, body: "\u3059\u3079\u3066\u306E\u6A5F\u5668\u3068\u63A5\u7D9A\u3092\u4E26\u3079\u305F\u69CB\u6210\u3002" },
         (p) => p.activate(...phaseActivate).badge("network")
       );
       return b.build();
@@ -33118,18 +33125,21 @@ function stateMachine2(preset) {
   const stateOrder = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let transIdx = 0;
+  const \u984C = /* @__PURE__ */ new Map();
+  const \u89AA = /* @__PURE__ */ new Map();
   const api = {
     state(s) {
       const laneId = `lane-${s.id}`;
       b.lane(laneId, { width: laneW });
+      \u984C.set(s.id, s.title);
+      if (s.parent) \u89AA.set(s.id, s.parent);
       const eyebrowParts = [];
       if (s.initial) eyebrowParts.push("\u521D\u671F");
       else if (s.final) eyebrowParts.push("\u6700\u7D42");
       else eyebrowParts.push("\u72B6\u614B");
-      if (s.parent) eyebrowParts.push(`nested in ${s.parent}`);
       const subtitleParts = [];
-      if (s.entry) subtitleParts.push(`entry: ${s.entry}`);
-      if (s.exit) subtitleParts.push(`exit: ${s.exit}`);
+      if (s.entry) subtitleParts.push(`\u5165\u308B\u6642: ${s.entry}`);
+      if (s.exit) subtitleParts.push(`\u51FA\u308B\u6642: ${s.exit}`);
       b.node(s.id, {
         lane: laneId,
         stack: 0,
@@ -33162,10 +33172,23 @@ function stateMachine2(preset) {
     build() {
       b.phase(
         "sm2",
-        { duration: 2400, title: preset.topic, body: "\u62E1\u5F35 FSM (nested + action) \u3092 visible \u5316\u3002" },
+        {
+          duration: 2400,
+          title: preset.topic,
+          body: "\u5165\u308C\u5B50\u306E\u72B6\u614B\u3068\u3001\u5165\u308B\u6642\u30FB\u51FA\u308B\u6642\u306E\u51E6\u7406\u3092\u542B\u3081\u305F\u3001\u3059\u3079\u3066\u306E\u72B6\u614B\u3068\u9077\u79FB\u3002"
+        },
         (p) => p.activate(...phaseActivate).badge("statemachine2")
       );
-      return b.build();
+      const d = b.build();
+      return {
+        ...d,
+        nodes: d.nodes.map((n) => {
+          const \u89AA\u306E\u8B58\u5225\u5B50 = \u89AA.get(n.id);
+          if (\u89AA\u306E\u8B58\u5225\u5B50 === void 0) return n;
+          const \u89AA\u306E\u984C = \u984C.get(\u89AA\u306E\u8B58\u5225\u5B50) ?? \u89AA\u306E\u8B58\u5225\u5B50;
+          return { ...n, eyebrow: `${n.eyebrow ?? "\u72B6\u614B"} / ${\u89AA\u306E\u984C}\u306E\u4E2D` };
+        })
+      };
     }
   };
   return api;