@cardenelabs/dragon 0.15.0 → 0.16.0

package/dist/index.d.cts

@@ -269,7 +269,7 @@ type DslEventBinding = {
     handlerId: string;
     pos: Position;
 };
-type PresetType = "sequence" | "flow" | "swimlane" | "er" | "state" | "topology" | "solidity" | "gantt" | "class" | "pie" | "bar" | "line" | "funnel" | "tree" | "journey" | "quadrant" | "c4" | "mind";
+type PresetType = "sequence" | "flow" | "swimlane" | "er" | "state" | "topology" | "solidity" | "gantt" | "class" | "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked" | "funnel" | "tree" | "journey" | "quadrant" | "c4" | "mind";
 type Position = {
     line: number;
     column?: number;
@@ -407,6 +407,16 @@ type DslActor = {
     subtitle?: string;
     eyebrow?: string;
     value?: string;
+    /**
+     * 前の時点の値 (#1450)。
+     *
+     * 内訳の変化を帯で示す図 (`type: stacked`) が 2 本目の帯として描き、値 1 つを大きく示す図
+     * (`type: stat`) が差として出す。 書かない図は 1 本のまま (従来と同じ)。
+     *
+     * **3 時点以上は持たない**。 描画側が 2 時点で設計されており (`cdl#551`)、足すなら欄の形ごと
+     * 決め直すことになる。
+     */
+    previous?: string;
     rows?: string[];
     /**
      * 箱の中に描く図形 (`shape:`、 #1374)。 水位や角度を状態で動かせる。
@@ -727,6 +737,20 @@ type DslPhase = {
      * 相手の名前は書かせない = 対象の 8 図種はいずれも図全体を 1 箱で描くため相手が決まる。
      */
     draw?: string;
+    /**
+     * 描き終えるまでに段の何割を使うか (#1441)。
+     *
+     * `draw: line 0.4` のように語の後ろに書く。 0 より大きく 1 以下。
+     * 書かなければ段の終わりに描き終わる (従来どおり)。
+     *
+     * **段の長さと描く速さを切り離すための欄**。 伸び具合は段の進みそのものなので、
+     * これが無いと「線はゆっくり引きたいが値の移りは短くしたい」 が書けず、描く速さのために
+     * 段の長さを動かすことになる。 段の長さを動かすと同じ段の `tween` まで遅くなる。
+     *
+     * **`draw` と同じ行に書かせる**。 別の項目にすると「割合だけ書いて `draw` が無い段」 が
+     * 書けてしまい、何も起きない指定になる。 同じ行なら書けない。
+     */
+    drawRatio?: number;
     /**
      * `draw` を書いた行 (#1312)。 知らせの行番号に使う。
      *
@@ -1511,6 +1535,13 @@ interface JsonActor {
     subtitle?: string;
     eyebrow?: string;
     value?: string;
+    /**
+     * 前の時点の値 (#1450)。 記法の `{ value: "320", previous: "280" }` と同じ。
+     *
+     * 内訳の変化を帯で示す図 (`type: stacked`) が 2 本目の帯として描き、
+     * 値 1 つを大きく示す図 (`type: stat`) が差として出す。 書かない図は 1 本のまま。
+     */
+    previous?: string;
     rows?: string[];
     lane?: string;
     stack?: number;
@@ -1655,6 +1686,13 @@ interface JsonPhase {
      * 受ける 8 語は `DRAW_WORDS` が持つ。 語と同じ図種で、その段の間に図が起点から現れる。
      */
     draw?: string;
+    /**
+     * 描き終えるまでに段の何割を使うか (#1441)。 記法の `draw: line 0.4` の後半と同じ。
+     *
+     * 0 より大きく 1 以下。 書かなければ段の終わりに描き終わる。 `draw` が無い段に書いても
+     * 何も起きない (描く相手が決まらないため、写す時に外す)。
+     */
+    drawRatio?: number;
     /**
      * 段の中で値を動かす (#1186)。 記法の `tween: name 100 -> 90` と同じ。
      *
@@ -1825,6 +1863,10 @@ declare const diagramJsonSchema: {
                             type: string;
                             description: string;
                         };
+                        previous: {
+                            type: string;
+                            description: string;
+                        };
                         rows: {
                             type: string;
                             items: {
@@ -2232,6 +2274,12 @@ declare const diagramJsonSchema: {
                         enum: string[];
                         description: string;
                     };
+                    drawRatio: {
+                        type: string;
+                        exclusiveMinimum: number;
+                        maximum: number;
+                        description: string;
+                    };
                     tween: {
                         type: string;
                         description: string;

package/dist/index.d.ts

@@ -269,7 +269,7 @@ type DslEventBinding = {
     handlerId: string;
     pos: Position;
 };
-type PresetType = "sequence" | "flow" | "swimlane" | "er" | "state" | "topology" | "solidity" | "gantt" | "class" | "pie" | "bar" | "line" | "funnel" | "tree" | "journey" | "quadrant" | "c4" | "mind";
+type PresetType = "sequence" | "flow" | "swimlane" | "er" | "state" | "topology" | "solidity" | "gantt" | "class" | "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked" | "funnel" | "tree" | "journey" | "quadrant" | "c4" | "mind";
 type Position = {
     line: number;
     column?: number;
@@ -407,6 +407,16 @@ type DslActor = {
     subtitle?: string;
     eyebrow?: string;
     value?: string;
+    /**
+     * 前の時点の値 (#1450)。
+     *
+     * 内訳の変化を帯で示す図 (`type: stacked`) が 2 本目の帯として描き、値 1 つを大きく示す図
+     * (`type: stat`) が差として出す。 書かない図は 1 本のまま (従来と同じ)。
+     *
+     * **3 時点以上は持たない**。 描画側が 2 時点で設計されており (`cdl#551`)、足すなら欄の形ごと
+     * 決め直すことになる。
+     */
+    previous?: string;
     rows?: string[];
     /**
      * 箱の中に描く図形 (`shape:`、 #1374)。 水位や角度を状態で動かせる。
@@ -727,6 +737,20 @@ type DslPhase = {
      * 相手の名前は書かせない = 対象の 8 図種はいずれも図全体を 1 箱で描くため相手が決まる。
      */
     draw?: string;
+    /**
+     * 描き終えるまでに段の何割を使うか (#1441)。
+     *
+     * `draw: line 0.4` のように語の後ろに書く。 0 より大きく 1 以下。
+     * 書かなければ段の終わりに描き終わる (従来どおり)。
+     *
+     * **段の長さと描く速さを切り離すための欄**。 伸び具合は段の進みそのものなので、
+     * これが無いと「線はゆっくり引きたいが値の移りは短くしたい」 が書けず、描く速さのために
+     * 段の長さを動かすことになる。 段の長さを動かすと同じ段の `tween` まで遅くなる。
+     *
+     * **`draw` と同じ行に書かせる**。 別の項目にすると「割合だけ書いて `draw` が無い段」 が
+     * 書けてしまい、何も起きない指定になる。 同じ行なら書けない。
+     */
+    drawRatio?: number;
     /**
      * `draw` を書いた行 (#1312)。 知らせの行番号に使う。
      *
@@ -1511,6 +1535,13 @@ interface JsonActor {
     subtitle?: string;
     eyebrow?: string;
     value?: string;
+    /**
+     * 前の時点の値 (#1450)。 記法の `{ value: "320", previous: "280" }` と同じ。
+     *
+     * 内訳の変化を帯で示す図 (`type: stacked`) が 2 本目の帯として描き、
+     * 値 1 つを大きく示す図 (`type: stat`) が差として出す。 書かない図は 1 本のまま。
+     */
+    previous?: string;
     rows?: string[];
     lane?: string;
     stack?: number;
@@ -1655,6 +1686,13 @@ interface JsonPhase {
      * 受ける 8 語は `DRAW_WORDS` が持つ。 語と同じ図種で、その段の間に図が起点から現れる。
      */
     draw?: string;
+    /**
+     * 描き終えるまでに段の何割を使うか (#1441)。 記法の `draw: line 0.4` の後半と同じ。
+     *
+     * 0 より大きく 1 以下。 書かなければ段の終わりに描き終わる。 `draw` が無い段に書いても
+     * 何も起きない (描く相手が決まらないため、写す時に外す)。
+     */
+    drawRatio?: number;
     /**
      * 段の中で値を動かす (#1186)。 記法の `tween: name 100 -> 90` と同じ。
      *
@@ -1825,6 +1863,10 @@ declare const diagramJsonSchema: {
                             type: string;
                             description: string;
                         };
+                        previous: {
+                            type: string;
+                            description: string;
+                        };
                         rows: {
                             type: string;
                             items: {
@@ -2232,6 +2274,12 @@ declare const diagramJsonSchema: {
                         enum: string[];
                         description: string;
                     };
+                    drawRatio: {
+                        type: string;
+                        exclusiveMinimum: number;
+                        maximum: number;
+                        description: string;
+                    };
                     tween: {
                         type: string;
                         description: string;

package/dist/index.js

@@ -1994,6 +1994,11 @@ var PRESET_TYPES = /* @__PURE__ */ new Set([
   "pie",
   "bar",
   "line",
+  "gauge",
+  "radial",
+  "stat",
+  "waffle",
+  "stacked",
   "funnel",
   "tree",
   "journey",
@@ -3427,6 +3432,11 @@ function applyContinuationLines(actor, rest, errors) {
       case "\u5024":
         out.value = stripQuotes(raw);
         break;
+      // 前の時点の値 (#1450)。 内訳を帯で示す図と値 1 つを大きく示す図が読む
+      case "previous":
+      case "\u524D\u306E\u5024":
+        out.previous = stripQuotes(raw);
+        break;
       case "shape":
       case "\u56F3\u5F62":
         out.shape = \u56F3\u5F62\u3068\u3057\u3066\u8AAD\u3080(raw, ln.no, errors);
@@ -3574,6 +3584,9 @@ var ACTOR_ITEM_KEYS = /* @__PURE__ */ new Set([
   "\u88DC\u8DB3",
   "value",
   "\u5024",
+  // 前の時点の値 (#1450)。 内訳の変化を帯で示す図と、値 1 つを大きく示す図が読む
+  "previous",
+  "\u524D\u306E\u5024",
   "rows",
   "\u884C",
   // 箱の中に描く図形 (#1374)
@@ -3699,6 +3712,7 @@ var ACTOR_RESERVED_FIELDS = /* @__PURE__ */ new Set([
   "subtitle",
   "eyebrow",
   "value",
+  "previous",
   "rows",
   "lane",
   "stack",
@@ -3801,6 +3815,7 @@ var INLINE_ACTOR_ALIASES = {
   \u7A2E\u985E: "kind",
   \u88DC\u8DB3: "subtitle",
   \u5024: "value",
+  \u524D\u306E\u5024: "previous",
   \u884C: "rows"
 };
 function \u4E2D\u62EC\u5F27\u306E\u5225\u540D\u3092\u5BC4\u305B\u308B(opts) {
@@ -3819,6 +3834,7 @@ var INLINE_ACTOR_KEYS = /* @__PURE__ */ new Set([
   "subtitle",
   "eyebrow",
   "value",
+  "previous",
   "rows",
   "lane",
   "stack",
@@ -3930,6 +3946,7 @@ function parseActor2(line, errors) {
       owner: isPart ? void 0 : opts.owner,
       end: isPart ? void 0 : opts.end,
       value: opts.value,
+      previous: opts.previous,
       rows: opts.rows ? opts.rows.replace(/^\[|\]$/g, "").split(/,(?![^[]*\])/).map((x) => stripQuotes(x.trim())).filter(Boolean) : void 0,
       lane: opts.lane,
       // 箱の中に描く図形 (#1374)。 パーツでは状態の上書きとして意味を持つため横取りしない
@@ -4261,16 +4278,34 @@ function parsePhase(block, errors) {
       continue;
     }
     if (key === "draw") {
-      const \u8A9E = stripQuotes(value).trim();
+      const [\u8A9E = "", \u5272\u5408\u306E\u6587\u5B57, ...\u4F59\u308A] = stripQuotes(value).trim().split(/\s+/);
       if (!DRAW_WORDS.has(\u8A9E)) {
         errors.push({
           line: ln.no,
           message: `draw \u306B\u66F8\u3051\u306A\u3044\u8A9E\u3067\u3059: "${\u8A9E}"`,
           hint: `\u4F7F\u3048\u308B\u8A9E = ${[...DRAW_WORDS].join(", ")}`
         });
+      } else if (\u4F59\u308A.length > 0) {
+        errors.push({
+          line: ln.no,
+          message: `draw \u306B\u66F8\u3051\u308B\u9805\u76EE\u306F\u8A9E\u3068\u5272\u5408\u306E 2 \u3064\u307E\u3067\u3067\u3059: "${stripQuotes(value).trim()}"`,
+          hint: "use `draw: line 0.4`"
+        });
       } else {
         phase.draw = \u8A9E;
         phase.drawPos = { line: ln.no };
+        if (\u5272\u5408\u306E\u6587\u5B57 !== void 0) {
+          const \u5272\u5408 = Number(\u5272\u5408\u306E\u6587\u5B57);
+          if (!Number.isFinite(\u5272\u5408) || \u5272\u5408 <= 0 || \u5272\u5408 > 1) {
+            errors.push({
+              line: ln.no,
+              message: `draw \u306E\u5272\u5408\u304C\u7BC4\u56F2\u5916\u3067\u3059: "${\u5272\u5408\u306E\u6587\u5B57}"`,
+              hint: "0 \u3088\u308A\u5927\u304D\u304F 1 \u4EE5\u4E0B\u3067\u66F8\u304D\u307E\u3059 (\u4F8B `draw: line 0.4`)"
+            });
+          } else {
+            phase.drawRatio = \u5272\u5408;
+          }
+        }
       }
       i += 1;
       continue;
@@ -4814,6 +4849,21 @@ function compileToCdl(doc, opts) {
     case "line":
       diagram2 = compileValueChart(doc, "line", "chart-line", opts?.onNotice);
       break;
+    case "gauge":
+      diagram2 = compileValueChart(doc, "gauge", "chart-gauge", opts?.onNotice);
+      break;
+    case "radial":
+      diagram2 = compileValueChart(doc, "radial", "chart-radial", opts?.onNotice);
+      break;
+    case "stat":
+      diagram2 = compileValueChart(doc, "stat", "chart-stat", opts?.onNotice);
+      break;
+    case "waffle":
+      diagram2 = compileValueChart(doc, "waffle", "chart-waffle", opts?.onNotice);
+      break;
+    case "stacked":
+      diagram2 = compileValueChart(doc, "stacked", "chart-stacked-bar", opts?.onNotice);
+      break;
     case "funnel":
       diagram2 = compileFunnel(doc, opts?.onNotice);
       break;
@@ -5072,6 +5122,11 @@ var \u56F3\u7A2E\u306E\u4F5C\u308A = {
   pie: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
   bar: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
   line: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
+  gauge: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
+  radial: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
+  stat: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
+  waffle: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
+  stacked: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
   funnel: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
   tree: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
   journey: "\u56F3\u5168\u4F53\u3092 1 \u7BB1",
@@ -5230,6 +5285,11 @@ var \u7A7A\u306E\u5F62\u306E\u9003\u3052\u5148 = {
   pie: [],
   bar: [],
   line: [],
+  gauge: [],
+  radial: [],
+  stat: [],
+  waffle: [],
+  stacked: [],
   funnel: [],
   tree: [],
   journey: [],
@@ -7078,10 +7138,13 @@ function \u53C2\u7167\u3059\u308B\u540D\u524D(value) {
 function compileValueChart(doc, \u578B, kind, onNotice) {
   const b = diagram(slugify(doc.title), { topic: doc.title });
   const CHART_W = 640;
-  const CHART_H = \u578B === "pie" ? 320 : 368;
+  const \u4F4E\u3044\u578B = \u578B === "pie" || \u578B === "gauge" || \u578B === "radial" || \u578B === "waffle" || \u578B === "stat";
+  const CHART_H = \u4F4E\u3044\u578B ? 320 : 368;
   b.lane("chart", { width: CHART_W + 64 });
   const data = [];
   const \u8AAD\u3081\u306A\u3044 = [];
+  const \u524D\u304C\u8AAD\u3081\u306A\u3044 = [];
+  let \u524D\u304C\u8AAD\u3081\u306A\u3044\u884C = 0;
   const \u672A\u5BA3\u8A00 = [];
   let \u672A\u5BA3\u8A00\u884C = 0;
   const \u53C2\u7167\u3067\u304D\u308B = \u6570\u306E\u6B04\u304B\u3089\u53C2\u7167\u3067\u304D\u308B\u540D\u524D(doc);
@@ -7099,9 +7162,29 @@ function compileValueChart(doc, \u578B, kind, onNotice) {
       \u672A\u5BA3\u8A00.push(a.name);
       continue;
     }
-    data.push({ label: \u7BB1\u306E\u984C(a), value, ...a.tone !== void 0 ? { tone: a.tone } : {} });
+    const \u524D = a.previous === void 0 ? null : parseChartValue(a.previous);
+    if (a.previous !== void 0 && \u524D === null) {
+      if (\u524D\u304C\u8AAD\u3081\u306A\u3044.length === 0) \u524D\u304C\u8AAD\u3081\u306A\u3044\u884C = a.pos?.line ?? 0;
+      \u524D\u304C\u8AAD\u3081\u306A\u3044.push(a.name);
+    }
+    data.push({
+      label: \u7BB1\u306E\u984C(a),
+      value,
+      ...\u524D === null ? {} : { previous: \u524D },
+      ...a.tone !== void 0 ? { tone: a.tone } : {}
+    });
   }
-  const \u8A9E = \u578B === "pie" ? { \u91CF: "\u5272\u5408", \u56F3: "\u5186", \u4F8B: '"45%"' } : \u578B === "bar" ? { \u91CF: "\u5024", \u56F3: "\u68D2", \u4F8B: '"420"' } : { \u91CF: "\u5024", \u56F3: "\u6298\u308C\u7DDA", \u4F8B: '"180"' };
+  const \u8A9E\u306E\u8868 = {
+    pie: { \u91CF: "\u5272\u5408", \u56F3: "\u5186", \u4F8B: '"45%"' },
+    bar: { \u91CF: "\u5024", \u56F3: "\u68D2", \u4F8B: '"420"' },
+    line: { \u91CF: "\u5024", \u56F3: "\u6298\u308C\u7DDA", \u4F8B: '"180"' },
+    gauge: { \u91CF: "\u5024", \u56F3: "\u534A\u5186", \u4F8B: '"680"' },
+    radial: { \u91CF: "\u5024", \u56F3: "\u5F27", \u4F8B: '"72"' },
+    stat: { \u91CF: "\u5024", \u56F3: "\u5927\u304D\u306A\u6570\u5B57", \u4F8B: '"1200"' },
+    waffle: { \u91CF: "\u5272\u5408", \u56F3: "100 \u500B\u306E\u5370", \u4F8B: '"45%"' },
+    stacked: { \u91CF: "\u5185\u8A33\u306E\u5024", \u56F3: "\u5E2F", \u4F8B: '"320"' }
+  };
+  const \u8A9E = \u8A9E\u306E\u8868[\u578B];
   const \u4F1D\u3048\u308B = (\u7A2E\u985E, \u540D\u524D, message, line = 0) => {
     onNotice?.({ kind: \u7A2E\u985E, actor: \u540D\u524D, line, message });
     if (typeof console !== "undefined" && console.warn) console.warn(`[dragon] ${message}`);
@@ -7122,6 +7205,14 @@ function compileValueChart(doc, \u578B, kind, onNotice) {
       \u672A\u5BA3\u8A00\u884C
     );
   }
+  if (\u524D\u304C\u8AAD\u3081\u306A\u3044.length > 0) {
+    \u4F1D\u3048\u308B(
+      "chart-value-unreadable",
+      \u524D\u304C\u8AAD\u3081\u306A\u3044[0],
+      `type: ${\u578B} \u3067\u524D\u306E\u6642\u70B9\u306E\u5024\u3092\u8AAD\u3081\u306A\u3044\u9805\u76EE\u304C\u3042\u308A\u307E\u3059 (\u524D\u306E\u5024\u3092\u4F7F\u3044\u307E\u305B\u3093): ${\u524D\u304C\u8AAD\u3081\u306A\u3044.join(", ")}\u3002 \`- \u540D\u524D: { value: ` + \u8A9E.\u4F8B + ", previous: " + \u8A9E.\u4F8B + " }` \u306E\u5F62\u3067\u66F8\u3044\u3066\u304F\u3060\u3055\u3044",
+      \u524D\u304C\u8AAD\u3081\u306A\u3044\u884C
+    );
+  }
   if (doc.flow.length > 0) {
     \u4F1D\u3048\u308B(
       "chart-edge-dropped",
@@ -7617,6 +7708,7 @@ var \u653E\u5C04\u3067\u63CF\u3051\u306A\u3044\u6B04\u306E\u540D\u524D = {
   stack: "\u7A4D\u3080\u9806",
   initial: "\u59CB\u307E\u308A / \u7D42\u308F\u308A \u306E\u5370",
   final: "\u59CB\u307E\u308A / \u7D42\u308F\u308A \u306E\u5370",
+  previous: "\u524D\u306E\u6642\u70B9\u306E\u5024",
   colorHex: "\u8272\u756A\u53F7",
   stateOverride: "\u72B6\u614B\u306E\u4E0A\u66F8\u304D",
   // 位置は「登場人物ごとの箱をどこに置くか」 の指定で、 箱が 1 つの図では置く先が無い
@@ -7984,6 +8076,9 @@ function injectPhasesFallback(diagram2, doc) {
       body: p.body ?? "",
       activate: activateIds,
       ...drawIds.length > 0 ? { draw: drawIds } : {},
+      // 描く速さ (#1441)。 **描く相手が決まった段にだけ載せる** = 語が効かない図種
+      // (`drawIds` が空) で割合だけ渡すと、描画側が「draw が空なのに割合がある」 と知らせる
+      ...drawIds.length > 0 && p.drawRatio !== void 0 ? { drawRatio: p.drawRatio } : {},
       tweens: (p.tweens ?? []).map((t) => ({ stateId: t.state, from: t.from, to: t.to })),
       sets: (p.sets ?? []).map((s) => ({ stateId: s.state, value: s.value })),
       ...p.badge ? { badge: p.badge } : {}
@@ -8263,8 +8358,14 @@ function \u59CB\u307E\u308A\u3068\u7D42\u308F\u308A\u306E\u6C7A\u3081\u65B9(doc)
     \u7D42\u308F\u308A: (a, idx) => \u66F8\u3044\u305F\u7D42\u308F\u308A ? a.final === true : idx === doc.actors.length - 1 && doc.actors.length > 1
   };
 }
+var \u72B6\u614B\u306E\u56F3\u306E\u65E2\u5B9A\u306E\u7A2E\u985E = "card";
+function \u65E2\u5B9A\u3068\u9055\u3046\u7A2E\u985E\u3092\u66F8\u3044\u305F(doc) {
+  return doc.actors.some(
+    (a) => a.kindWritten === true && \u63CF\u3051\u308B\u7A2E\u5225(a.kind) !== \u72B6\u614B\u306E\u56F3\u306E\u65E2\u5B9A\u306E\u7A2E\u985E
+  );
+}
 function compileState(doc) {
-  if (doc.animate && doc.animate.phases.length > 0) {
+  if (doc.animate && doc.animate.phases.length > 0 || \u65E2\u5B9A\u3068\u9055\u3046\u7A2E\u985E\u3092\u66F8\u3044\u305F(doc)) {
     return compileGenericWithAnimate(doc, { kind: "state", laneWidth: 360 });
   }
   const fsm = stateMachine({
@@ -9135,6 +9236,8 @@ var ACCEPTED_KEYS = {
     "subtitle",
     "eyebrow",
     "value",
+    // 前の時点の値 (#1450)。 内訳の変化を帯で示す図と、値 1 つを大きく示す図が読む
+    "previous",
     "rows",
     "lane",
     "stack",
@@ -9187,7 +9290,7 @@ var ACCEPTED_KEYS = {
     "overlay",
     "pos"
   ],
-  phase: ["step", "duration", "focus", "body", "badge", "tween", "set", "draw"],
+  phase: ["step", "duration", "focus", "body", "badge", "tween", "set", "draw", "drawRatio"],
   viewport: ["width", "height", "scale", "laneWidth", "gap", "laneGap", "nodeGap", "labelMargin"],
   lane: ["x", "width", "label", "contain", "lifeline", "pos"],
   group: ["label", "lanes"],
@@ -9227,6 +9330,7 @@ var \u6B04\u306E\u578B\u8868 = {
     subtitle: "\u6587\u5B57\u5217",
     eyebrow: "\u6587\u5B57\u5217",
     value: "\u6587\u5B57\u5217",
+    previous: "\u6587\u5B57\u5217",
     rows: "\u6587\u5B57\u5217\u306E\u4E26\u3073",
     lane: "\u6587\u5B57\u5217",
     stack: "\u6570",
@@ -9287,7 +9391,8 @@ var \u6B04\u306E\u578B\u8868 = {
     badge: "\u6587\u5B57\u5217",
     tween: "object",
     set: "object",
-    draw: "\u63CF\u304F\u3082\u306E"
+    draw: "\u63CF\u304F\u3082\u306E",
+    drawRatio: "\u6570"
   },
   viewport: {
     width: "\u6570",
@@ -10325,6 +10430,7 @@ function jsonToDoc(json) {
       subtitle: a.subtitle,
       eyebrow: a.eyebrow,
       value: a.value,
+      previous: a.previous,
       rows: a.rows,
       lane: a.lane,
       stack: a.stack,
@@ -10425,6 +10531,9 @@ function jsonToDoc(json) {
     badge: p.badge,
     // 書いた段だけが欄を持つ。 空文字を置くと「書いた」 と「書いていない」 が同じ形になる
     ...p.draw !== void 0 ? { draw: p.draw, drawPos: p0 } : {},
+    // 割合は `draw` がある段にだけ写す。 単独で書いても描く相手が決まらず何も起きないので、
+    // 記法側 (同じ行に書かせる形) と同じ状態に揃える
+    ...p.draw !== void 0 && p.drawRatio !== void 0 ? { drawRatio: p.drawRatio } : {},
     // 段の中で動かす分 (#1186)。 記法側の `tweens` / `sets` と同じ形に写す。
     // 空の配列を置かないのは、記法側が「無ければ field ごと持たない」 形だから
     ...p.tween && Object.keys(p.tween).length > 0 ? {
@@ -10520,6 +10629,11 @@ var diagram_default = {
         "pie",
         "bar",
         "line",
+        "gauge",
+        "radial",
+        "stat",
+        "waffle",
+        "stacked",
         "funnel",
         "tree",
         "journey",
@@ -10527,11 +10641,11 @@ var diagram_default = {
         "c4",
         "mind"
       ],
-      description: '\u56F3\u306E\u7A2E\u985E\u3002 \u578B\u3054\u3068\u306B actors \u306E\u66F8\u304D\u65B9\u304C\u9055\u3046\u3002 [\u95A2\u4FC2\u3092\u63CF\u304F] sequence (\u6642\u7CFB\u5217\u306E\u547C\u3073\u51FA\u3057) / flow (\u51E6\u7406\u306E\u6D41\u308C) / swimlane (\u8CAC\u52D9\u3054\u3068\u306E\u6D41\u308C) / er (DB \u306E schema) / state (\u72B6\u614B\u306E\u9077\u79FB) / topology (network) / solidity (contract) / class (UML \u306E class) / c4 (architecture) / mind (\u767A\u60F3\u306E\u679D\u5206\u304B\u308C) \u306F actors \u306B\u540D\u524D\u3092\u4E26\u3079 flow \u306B\u77E2\u5370\u3092\u66F8\u304F\u3002 [\u5024\u3092\u63CF\u304F] pie (\u5272\u5408) / bar (\u68D2\u306E\u9AD8\u3055) / line (\u7DDA\u306E\u9AD8\u3055\u3001 \u66F8\u3044\u305F\u9806\u306B\u4E26\u3076) \u306F actors \u306B `- \u540D\u524D: "45"` \u306E\u5F62\u3067\u6570\u3092\u66F8\u304F\u3002 funnel (\u6BB5\u3054\u3068\u306B\u6E1B\u308B\u6570) \u3082\u540C\u3058\u5F62\u3002 [\u8A9E\u3092\u63CF\u304F] journey (\u4F53\u9A13\u306E\u8D77\u4F0F) \u306F `- \u767B\u9332: "\u4E0D\u6E80"` \u306E\u5F62\u3067 \u6700\u9AD8 / \u6E80\u8DB3 / \u666E\u901A / \u4E0D\u6E80 / \u6012\u308A \u306E\u3069\u308C\u304B\u3092\u66F8\u304F\u3002 quadrant (2 \u8EF8\u306E\u4ED5\u5206\u3051) \u306F `- \u91CD\u8907\u524A\u9664: "\u5DE6\u4E0A"` \u306E\u5F62\u3067 \u5DE6\u4E0A / \u53F3\u4E0A / \u5DE6\u4E0B / \u53F3\u4E0B \u306E\u3069\u308C\u304B\u3092\u66F8\u304F\u3002 [\u6642\u671F\u3092\u63CF\u304F] gantt (\u5DE5\u7A0B\u306E\u4E26\u3073) \u306F `- \u8A2D\u8A08: "1\u6708"` \u306E\u5F62\u3067\u59CB\u307E\u308A\u306E\u6642\u671F\u3092\u66F8\u304D\u3001 flow \u306E\u77E2\u5370\u3067\u524D\u5F8C\u95A2\u4FC2\u3092\u66F8\u304F\u3002 [\u89AA\u5B50\u3092\u63CF\u304F] tree (\u89AA\u5B50\u306E\u5165\u308C\u5B50) \u306F actors \u306B\u540D\u524D\u3092\u4E26\u3079 flow \u306E\u77E2\u5370\u3067\u89AA\u5B50\u3092\u66F8\u304F (\u77E2\u5370\u306E\u5148\u304C\u5B50)'
+      description: '\u56F3\u306E\u7A2E\u985E\u3002 \u578B\u3054\u3068\u306B actors \u306E\u66F8\u304D\u65B9\u304C\u9055\u3046\u3002 [\u95A2\u4FC2\u3092\u63CF\u304F] sequence (\u6642\u7CFB\u5217\u306E\u547C\u3073\u51FA\u3057) / flow (\u51E6\u7406\u306E\u6D41\u308C) / swimlane (\u8CAC\u52D9\u3054\u3068\u306E\u6D41\u308C) / er (DB \u306E schema) / state (\u72B6\u614B\u306E\u9077\u79FB) / topology (network) / solidity (contract) / class (UML \u306E class) / c4 (architecture) / mind (\u767A\u60F3\u306E\u679D\u5206\u304B\u308C) \u306F actors \u306B\u540D\u524D\u3092\u4E26\u3079 flow \u306B\u77E2\u5370\u3092\u66F8\u304F\u3002 [\u5024\u3092\u63CF\u304F] pie (\u5272\u5408) / bar (\u68D2\u306E\u9AD8\u3055) / line (\u7DDA\u306E\u9AD8\u3055\u3001 \u66F8\u3044\u305F\u9806\u306B\u4E26\u3076) / gauge (\u5408\u8A08\u3092\u534A\u5186\u3067\u793A\u3059) / radial (\u5F27\u306E\u9577\u3055\u3067\u6BD4\u3079\u308B) / stat (\u5024 1 \u3064\u3092\u5927\u304D\u304F\u793A\u3059) / waffle (\u5272\u5408\u3092 100 \u500B\u306E\u5370\u3067\u793A\u3059) / stacked (\u5185\u8A33\u3092\u5E2F\u3067\u793A\u3059) \u306F actors \u306B `- \u540D\u524D: "45"` \u306E\u5F62\u3067\u6570\u3092\u66F8\u304F\u3002 stat \u3068 stacked \u306F `- \u540D\u524D: { value: "320", previous: "280" }` \u306E\u5F62\u3067\u524D\u306E\u6642\u70B9\u306E\u5024\u3082\u66F8\u3051\u308B\u3002 funnel (\u6BB5\u3054\u3068\u306B\u6E1B\u308B\u6570) \u3082\u540C\u3058\u5F62\u3002 [\u8A9E\u3092\u63CF\u304F] journey (\u4F53\u9A13\u306E\u8D77\u4F0F) \u306F `- \u767B\u9332: "\u4E0D\u6E80"` \u306E\u5F62\u3067 \u6700\u9AD8 / \u6E80\u8DB3 / \u666E\u901A / \u4E0D\u6E80 / \u6012\u308A \u306E\u3069\u308C\u304B\u3092\u66F8\u304F\u3002 quadrant (2 \u8EF8\u306E\u4ED5\u5206\u3051) \u306F `- \u91CD\u8907\u524A\u9664: "\u5DE6\u4E0A"` \u306E\u5F62\u3067 \u5DE6\u4E0A / \u53F3\u4E0A / \u5DE6\u4E0B / \u53F3\u4E0B \u306E\u3069\u308C\u304B\u3092\u66F8\u304F\u3002 [\u6642\u671F\u3092\u63CF\u304F] gantt (\u5DE5\u7A0B\u306E\u4E26\u3073) \u306F `- \u8A2D\u8A08: "1\u6708"` \u306E\u5F62\u3067\u59CB\u307E\u308A\u306E\u6642\u671F\u3092\u66F8\u304D\u3001 flow \u306E\u77E2\u5370\u3067\u524D\u5F8C\u95A2\u4FC2\u3092\u66F8\u304F\u3002 [\u89AA\u5B50\u3092\u63CF\u304F] tree (\u89AA\u5B50\u306E\u5165\u308C\u5B50) \u306F actors \u306B\u540D\u524D\u3092\u4E26\u3079 flow \u306E\u77E2\u5370\u3067\u89AA\u5B50\u3092\u66F8\u304F (\u77E2\u5370\u306E\u5148\u304C\u5B50)'
     },
     eyebrow: {
       type: "string",
-      description: "\u56F3\u8868\u306E\u7BB1\u306E\u4E0A\u306B\u51FA\u3059\u5C0F\u898B\u51FA\u3057 (\u7701\u7565\u53EF)\u3002 \u52B9\u304F\u306E\u306F\u56F3\u5168\u4F53\u3092 1 \u7BB1\u306B\u3059\u308B\u578B (pie / bar / line / funnel / tree / journey / quadrant / mind / gantt) \u3060\u3051\u3002 \u7BB1\u3054\u3068\u306B\u5206\u304B\u308C\u308B\u578B\u3067\u306F\u76F8\u624B\u304C\u6C7A\u307E\u3089\u306A\u3044\u305F\u3081\u3001 actors[].eyebrow \u306B\u66F8\u304F"
+      description: "\u56F3\u8868\u306E\u7BB1\u306E\u4E0A\u306B\u51FA\u3059\u5C0F\u898B\u51FA\u3057 (\u7701\u7565\u53EF)\u3002 \u52B9\u304F\u306E\u306F\u56F3\u5168\u4F53\u3092 1 \u7BB1\u306B\u3059\u308B\u578B (pie / bar / line / gauge / radial / stat / waffle / stacked / funnel / tree / journey / quadrant / mind / gantt) \u3060\u3051\u3002 \u7BB1\u3054\u3068\u306B\u5206\u304B\u308C\u308B\u578B\u3067\u306F\u76F8\u624B\u304C\u6C7A\u307E\u3089\u306A\u3044\u305F\u3081\u3001 actors[].eyebrow \u306B\u66F8\u304F"
     },
     axes: {
       type: "object",
@@ -10600,6 +10714,10 @@ var diagram_default = {
                 type: "string",
                 description: "actor \u6570\u5024\u8868\u793A (kind: actor \u7528)"
               },
+              previous: {
+                type: "string",
+                description: "\u524D\u306E\u6642\u70B9\u306E\u5024\u3002 type: stacked \u304C 2 \u672C\u76EE\u306E\u5E2F\u3068\u3057\u3066\u63CF\u304D\u3001type: stat \u304C\u5DEE\u3068\u3057\u3066\u51FA\u3059\u3002 \u66F8\u304B\u306A\u3044\u56F3\u306F 1 \u672C\u306E\u307E\u307E"
+              },
               rows: {
                 type: "array",
                 items: {
@@ -11077,6 +11195,12 @@ var diagram_default = {
             enum: ["line", "bar", "pie", "journey", "mind", "tree", "gantt", "funnel"],
             description: "\u3053\u306E phase \u3067\u8D77\u70B9\u304B\u3089\u63CF\u304F\u3082\u306E\u3002 \u8A9E\u306F\u56F3\u7A2E\u3068\u63C3\u3048\u308B\u3002 line / journey = \u7DDA\u304C\u5DE6\u7AEF\u304B\u3089\u53F3\u3078\u4F38\u3073\u308B / bar = \u68D2\u304C\u6A2A\u8EF8\u304B\u3089\u4E0A\u3078\u4F38\u3073\u308B / pie = \u6247\u304C 12 \u6642\u304B\u3089\u6642\u8A08\u56DE\u308A\u306B\u958B\u304F / mind = \u679D\u304C\u4E2D\u5FC3\u304B\u3089\u5916\u3078\u4F38\u3073\u308B / tree = \u679D\u304C\u6839\u304B\u3089\u4E0B\u3078\u4F38\u3073\u308B / gantt = \u5E2F\u304C\u5404\u59CB\u7AEF\u304B\u3089\u53F3\u3078\u4F38\u3073\u308B / funnel = \u6BB5\u304C\u4E0A\u7AEF\u304B\u3089\u9806\u306B\u7A4D\u307E\u308C\u308B"
           },
+          drawRatio: {
+            type: "number",
+            exclusiveMinimum: 0,
+            maximum: 1,
+            description: "\u63CF\u304D\u7D42\u3048\u308B\u307E\u3067\u306B phase \u306E\u4F55\u5272\u3092\u4F7F\u3046\u304B\u3002 0.4 \u306A\u3089\u9032\u307F\u304C 0.4 \u306B\u9054\u3057\u305F\u6642\u70B9\u3067\u63CF\u304D\u7D42\u308F\u308A\u3001\u6B8B\u308A\u306F\u63CF\u304D\u7D42\u308F\u3063\u305F\u59FF\u306E\u307E\u307E\u5024\u3060\u3051\u304C\u52D5\u304F\u3002 \u66F8\u304B\u306A\u3051\u308C\u3070 phase \u306E\u7D42\u308F\u308A\u306B\u63CF\u304D\u7D42\u308F\u308B\u3002 draw \u3068\u4E00\u7DD2\u306B\u66F8\u304F (draw \u304C\u7121\u3044\u3068\u4F55\u3082\u8D77\u304D\u306A\u3044)"
+          },
           tween: {
             type: "object",
             description: "\u3053\u306E phase \u3067\u88DC\u9593\u3059\u308B\u72B6\u614B\u3002 \u72B6\u614B\u540D -> [\u958B\u59CB\u5024, \u7D42\u4E86\u5024]\u3002 \u540D\u524D\u306F\u82F1\u5B57\u304B _ \u3067\u59CB\u3081\u3001 \u82F1\u6570\u5B57\u3068 _ \u3060\u3051\u3092\u4F7F\u3046",