@cardenelabs/dragon 0.30.0 → 0.32.0

package/README.md

@@ -53,7 +53,7 @@ flow:
 | 欄          | 何を書くか                                                                                                                                 |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
 | `title`     | 図の題                                                                                                                                     |
-| `type`      | 図種 (`sequence` / `flow` / `swimlane` / `er` / `state` / `topology` / `gantt` / `class` / `mind` / `tree` / `c4` / `solidity` / 図表各種) |
+| `type`      | 図種 (`sequence` / `flow` / `flowchart` / `swimlane` / `record` / `topology` / `gantt` / `mind` / `tree` / `c4` / `chart` / その他)。 古い綴りは組に読み替える = `solidity` は `sequence` と `order: 種類`、数を描く 9 つ (`pie` 等) は `chart` と同じ綴りの `shape` |
 | `actors`    | 箱                                                                                                                                         |
 | `flow`      | 矢印                                                                                                                                       |
 | `states`    | 状態の初期値                                                                                                                               |
@@ -64,19 +64,138 @@ flow:
 | `groups`    | 縦列を束ねる枠                                                                                                                             |
 | `eyebrow`   | 図全体を 1 箱にする図種で、その箱の上に出す小見出し                                                                                        |
 | `axes`      | 2 軸で仕分ける図の軸の名前                                                                                                                 |
+| `regions`   | 2 軸で仕分ける図の区画に出す名前                                                                                                          |
 | `readouts`  | 値を見せる部品 (割合の輪 / 数え上げ / 目盛り)                                                                                              |
 | `inputs`    | 読む人が動かすつまみ (すべり / 選び / 入り切り など。 書ける種類は、知らない種類を書いた時の知らせが `使える種類 = ...` の形で全て並べる。 選択肢を `{ value, label }` の組で、入り切りを `onLabel` / `offLabel` で書くと、値は綴りのまま名前で描く) |
 | `formulas`  | つまみの値から決まる値 (式。 `values` は段が動かす状態を読み、こちらはつまみを読む。 `{ expression, label }` の組で書くと操作部に名札を出す) |
 | `events`    | 押下などの出来事で動く仕掛け (相手は名前で指す)                                                                                            |
 | `scrolls`   | 巻き上げに応じて進む値 (画面を巻き上げた量から 0 から 1 を作る)                                                                            |
-| `bands`     | 動いている間の帯 (順序図。 `- DB: 1..2` の形で段の番号の区間を書く)                                                                        |
+| `bands`     | 動いている間の帯 (順序図。 `- DB: 1..2` の形で言づての番号の区間を書く。 0 から数える)                                                                        |
 | `reveal`    | 矢印をいつ出すか (`phase` = 段が名指しする矢印はその段まで描かない (既定) / `all` = 最初から全部描く)                                      |
 | `relations` | 触れた箱の関係を光らせるか (`off` = 何もしない (既定) / `hover` = 触れた箱と繋がる線と相手の箱だけが光る)                     |
 | `direction` | 図の並ぶ向き (`縦` / `横`、英語なら `vertical` / `horizontal`)。 効くのは `flow` と `swimlane` だけ |
-| `palette`   | 図の配色 (`kinari` = 生成りに茶 / `celadon` = 青磁に墨、日本語なら `生成り` / `青磁`) で、ER 図とクラス図は書かなくても `kinari` になり、書いた `palette:` が優先される |
+| `order`     | 箱を並べ替える軸 (`種類`、英語なら `kind`)。 効くのは `sequence` だけで、書くと `kind:` の順 (人 → 契約 → 保管 → 出来事) に箱が並ぶ |
+| `shape`     | 図種ごとの形。`chart` は `pie` / `bar` / `line` / `gauge` / `radial` / `stat` / `waffle` / `stacked` / `slope` (書かなければ `bar`)、`swimlane` は `stages` / `metro` / `timeline` |
+| `form`      | `shape: pie` の見せ方 (`ring` / `arcs` / `table`、和名は `輪` / `積層の弧` / `銘板`)。 `見せ方:` とも書ける |
+| `ticks`     | `type: gantt` の目盛りを左から順に並べる (`目盛り:` とも書ける)。 書かなければ工程の始まりから作る |
+| `ganttToday` | `type: gantt` の今日の位置と札 (`{ index, label }`) |
+| `ganttTickLabels` | `type: gantt` の各目盛りに出す名前の並び |
+| `ganttBarEnd` | `position` で帯を `end` の位置までにする |
+| `ganttBarThickness` | `thin` で帯を見本の比の細さにする |
+| `chartSeriesSkipMuted` | `true` で `tone: muted` の項目を系列色の番号から外す |
+| `chartLineSeries` | 折れ線の複数系列 (`points` / `label` / `tone` / `dash` / `marker` / `valueIndexes`)。`marker: dot` は塗った点、`hollow` は中抜きの点、`none` は点を描かない |
+| `chartPieCenterLabel` | 円の中心で合計の下に置く字 |
+| `chartPieTableColumns` | 円の表の列 (`share-value` / `value`) |
+| `chartPieRingWidth` | 円の輪の太さ (`thick` / `thin`) |
+| `chartSlopePeriods` | 傾き図の左右の時点名 2 つ |
+| `chartSlopeEmphasisIds` | 傾き図で主役にする項目の id |
+| `chartSlopeUnit` | 傾き図の値に付ける単位 |
+| `chartStackedPeriods` | 内訳の帯の期間と系列ごとの値 (`{ label, values }`) |
+| `chartStackedRateId` | 内訳の帯の右に割合を出す項目の id |
+| `chartStackedLegendPosition` | 内訳の帯の凡例の位置 (`top` / `bottom`) |
+| `chartGaugeValue` | 半円の固定尺 (`{ max, current, target?, previous?, previousLabel? }`)。`current`・`target`・`previous` は `{名前}` で段の状態を読める。`max` は数だけ |
+| `chartWaffleLegendPosition` | 升目の一覧の位置 (`left` / `right`) |
+| `funnelForm` | 漏斗の形 (`trapezoid` / `proportional-bars`) |
+| `funnelRate` | 漏斗の率。`drop` は前段から減った割合、`conversion` は前段から残った割合、`none` は率を描かない |
+| `quadrantPointLabelSide` | 四象限の座標点の名前を置く側 (`auto` / `right`) |
+| `treeNodeForm` | 木の箱の見せ方 (`accent` / `frame`) |
+| `treeSize` | 木の深さごとの札幅、札高、題・副題の字、同段・段間の隙間 (`{ nodeWidths?, nodeHeight?, titleFontSize?, subtitleFontSize?, siblingGap?, levelGap? }`) |
+| `treeEdgeTone` | 木の枝色の付け方 (`accent` / `depth`) |
+| `treeEdgeHead` | 木の枝先の形 (`none` / `triangle`) |
+| `mindForm` | 放射の箱の見せ方 (`filled` / `outline`) |
+| `mindSize` | 放射の中心・枝・葉の位置・札・字、中心から枝・枝から葉・各行の間隔とずらし (`{ contentOffset?: { x, y }, root?, branch?, leaf?, rootBranchGap?, branchLeafGap?, branchRowGap?, branchRowOffset?, leafRowGap?, leafRowOffset? }`) |
+| `journeyForm` | ジャーニーの段の見せ方 (`bands` / `rules`) |
+| `journeyLineForm` | ジャーニーの点を結ぶ線 (`curve` / `straight`) |
+| `journeyLabels` | ジャーニーの 5 段の名前 (`{ delighted, happy, neutral, frustrated, angry }`) |
+| `journeySize` | ジャーニーの描画面と点列の左右余白 (`{ plotPadding?: { left?, right? }, pointPadding?: { left?, right? } }`) |
+| `sequenceActorForm` | `box` で順序図の参加者を枠で囲む |
+| `sequenceLabelForm` | `kind` で順序図の段に種類印と種類名を添える |
+| `sequenceReturnHead` | `solid` で返す言づてにも塗った三角の矢じりを使う |
+| `sequenceKindLabels` | 順序図の種類名 (`{ call?, return?, fire? }`) を言い換える |
+| `sequenceRowGap` | 順序図の言づての段の間 (正の数、既定 64) |
+| `sequenceGutter` | 順序図の左の札の列の幅。最初の糸は「この幅 + 列幅 / 2」に来る |
+| `sequenceBandWidth` | 順序図の動いている間の帯の幅 |
+| `sequenceSelfLoop` | 順序図の自分へ戻る線 (`{ form?: "orthogonal", width?, drop? }`) |
+| `figureCard` | 図表の見出し帯と足 (`{ label, note? }`) |
+| `figureSize` | 図全体を 1 箱にする図種の札の幅と高さ (`{ width, height }`) |
+| `terminalDecoration` | 端末意匠用の窓操作・字送り・行番号 (`{ windowControls?, cursor?, rowOrdinal? }`) |
+| `cornerForm` | `theme-variants` で矩形札の一様角と手描き角を意匠から選ぶ |
+| `figureKindLabel` | 階層図・放射図の種類札 (`{ text, x?, y?, fontSize?, fontWeight?, letterSpacing? }`) |
+| `figureInset` | 図表札の飾りの凹み面 (`{ top?, right?, bottom?, left?, radius? }`) |
+| `chartBarSize` | 棒の目盛り・値・名前・余白・棒幅 |
+| `chartBarShape` | 棒を分割するか上だけ丸めた一体の形にするか (`split` / `top-rounded`) |
+| `chartLineSize` | 折れ線の値札間隔・目盛り・時点・点・描画面と点列の余白・時点名の基線 |
+| `chartPieSize` | 円の一覧幅・字・行間・余白・外半径・中心 x |
+| `chartWaffleSize` | 升目図の左端と升目の送り (`{ gridLeft?, cellPitch? }`) |
+| `chartSlopeLabelTemplate` | 傾き図の左右の札 (`{ left?, right? }`、`{name}` / `{value}` / `{unit}`) |
+| `chartSlopeSize` | 傾き図の点・時点・札・軸・描画面と点列の上下余白 |
+| `chartStackedLayout` | 内訳の帯の凡例列・間隔・帯・字・凡例の縦ずらし |
+| `chartGaugeSize` | 半円の帯・外半径・上位置・値の字 |
+| `ganttSize` | 工程名の列・時間軸の右余白・目盛り・帯・節目・依存線の寸法 |
+| `quadrantLabelPosition` | `outside-corners` で四象限の区画名を角の外へ置く |
+| `quadrantSize` | 四象限の面・点・字・札間の寸法 |
+| `theme`     | 図の意匠 (`kinari` = 生成りに茶 / `celadon` = 青磁に墨 / `blueprint` = 図面 / `letterpress` = 活版 / `catalog` = 図録 / `terminal` = 端末 / `sketch` = 手描き / `neon` = 電飾 / `relief` = 浮彫、日本語なら `生成り` / `青磁` / `図面` / `活版` / `図録` / `端末` / `手描き` / `電飾` / `浮彫`)。 `palette:` も別名として読み、両方書くと `theme:` が勝って知らせが出る |
+| `legend`    | 図の下へ置く凡例。 `凡例:` とも書ける。 印付きは `{ mark, text, tone?, lineStyle? }`、注記は `{ text, align?, lead? }`。和名なら `{ 印, 説明 }`。 印の種類は下の節を参照 |
+| `legendFontSize` | 凡例の字の大きさ |
+| `legendOffset` | 図全体の凡例の位置をずらす (`{ x?, y? }`) |
+| `edgeEndGap` | 線の両端と発着する箱の縁との隙間 (0 以上) |
+| `stageHeader` | `shape: stages` で全意匠に共通して使う見出し寸法 (`leftPad` / `topPad` / `numberSize` / `gap` / `nameSize` / `bottomPad`) |
+| `stageLayout` | `shape: stages` の列幅・列間・戻る線の迂回寸法 (`columnWidths` / `columnGap` / `backDetourTopGap` / `backDetourSideGap` / `backDetourTargetInset`) |
 
 <!-- notation:top-level:end -->
 
+### 円の見せ方、四象限の座標、ガントの細かな位置
+
+円は `form: table` (`見せ方: 銘板`) で名前と値の表、`arcs` で積層した弧、`ring` で輪になる。
+書かなければ従来どおり輪で、円以外に書いた欄と読めない値は知らせて無視する。
+
+四象限の箱には `at: [0.2, 0.8]` (`点の位置`) の形で x、y の順に座標を書ける。左下が
+`[0, 0]`、右上が `[1, 1]` で、数の代わりに `"{状態名}"` も書ける。0..1 の範囲外は知らせ、
+CDL の描画時に最寄りの端へ寄せる。区画の語と併記した時は座標を採り、象限が食い違えば知らせる。
+
+ガントは `ticks: [6月, 7月, 8月, 9月, 10月]` で尺と目盛り順を固定する。始まりと終わりは
+`"6月+0.55"` のように月内の割合 (0..1) を足せる。始まりの割合を省けば月初、`end` の割合を
+省けば月末である。CDL は 1 目盛り未満の帯を描けないため、変換後の終わりが始まりより前になる
+指定は知らせて 1 目盛りの幅へ倒す。工程が指さない目盛りの字は、CDL に独立した目盛り名の欄が
+無いため空になる。
+
+### 図の下に凡例を書く
+
+`legend:` の下へ、印と説明を中括弧で 1 項目ずつ書く。全ての図種で、図の下に指定順の横一列で描かれる。`legend:` を書かない図の配置と出力は変わらない。
+
+```yaml
+legend:
+  - { mark: diamond, text: "分かれ道" }
+  - { mark: filled-circle, text: "始まり" }
+  - { mark: line-diamond-hollow, text: "参照", tone: accent, lineStyle: dotted }
+  - { text: "注: 点線は参照", align: end, lead: "注:" }
+```
+
+最上位の語、項目名、印はいずれも和名で書ける。英語と和名を同じ項目に併記した時は英語を使う。
+
+```yaml
+凡例:
+  - { 印: 菱形, 説明: "分かれ道" }
+  - { 印: 塗った丸, 説明: "始まり" }
+```
+
+| `mark` | `印` |
+| --- | --- |
+| `diamond` | 菱形 |
+| `filled-circle` | 塗った丸 |
+| `double-circle` | 二重丸 |
+| `dotted-line` | 点線 |
+| `solid-line` | 実線 |
+| `curved-line` | 曲線 |
+| `rounded-label` | 角丸の札 |
+| `numbered-circle` | 番号の丸 |
+| `station` | 駅 |
+| `arrow` | 矢印 |
+| `line-triangle-hollow` | 白抜き三角の線端 |
+| `line-diamond-hollow` | 白抜き菱の線端 |
+| `line-diamond-solid` | 塗った菱の線端 |
+| `rounded-box` | 角丸の箱 |
+
 ### 箱に書ける欄
 
 `- 名前: { 欄: 値, ... }` の形で書く。
@@ -87,21 +206,43 @@ flow:
 | --------------- | ------------------------------------------------------------------------------ |
 | `kind`          | 見た目の種別 (`card` / `storage` / `service` / `person` 等、`種類` とも書ける)。 種別に無い名前は部品の名前として部品の一覧 (`partsCatalog`) から引き、一覧にも無ければ種別を書かなかった箱になる。 部品を持つ一覧を渡した時は、書いた行に知らせ (`onNotice`) が出て綴りの近い名前を案内する |
 | `subtitle`      | 題の下の補足 (`補足` とも書ける)                                               |
+| `kindForm`      | `icon` で kind の意味を保ったまま共通枠の部品箱にする                         |
+| `icon`          | 共通枠へ描く線画 (`person` / `box` / `database` / `lightning` / `cloud` / `terminal`) |
+| `emptyRowsNote` | 行を持たない `storage` に行の代わりに描く注記                                  |
+| `titleAlign`    | `center` で `storage` の題と小見出しを中央へ揃える                              |
+| `rowRules`      | `true` で `storage` の見出し下と行の間に罫線を描く                             |
+| `rowDividerForm` | `full` で `storage` の見出し下の線を箱の左右端まで引く                        |
+| `rowWell`       | 行のまとまりを収める透明な面 (`{ top?, right?, bottom?, left?, radius? }`。空 object は 2 / 16 / 4 / 16 / 15) |
+| `rowMarkForm`   | `tone` で行頭の印を形でなく色の段で分ける                                     |
+| `rowLayout`     | `storage` の箱上端からの題の基準線・1 行目の基準線・行間 (`{ titleBaseline?, rowTop?, rowPitch? }`) |
+| `rowStripe`     | `false` で `storage` の行の縞を描かない                                 |
+| `nestIn`        | 親の `storage` の名前。書いた表を親の内側へ入れる                              |
+| `figureCard`    | `storage` または `kindForm: icon` の足 (`{ label, note? }`)                    |
+| `stationNamePosition` | 路線図の駅名を下へ置く (`bottom`) |
+| `subtitlePlacement` | 時間軸の担当を札の右へ置く (`right`) |
+| `titleFontSize` | 流れ図の `function` の札の題の大きさ |
+| `markGap` | 流れ図の始まり・終わりの印と次の箱との間 |
 | `eyebrow`       | 題の上の小見出し                                                               |
 | `value`         | 箱に出す値 (`値` とも書ける)                                                   |
 | `previous`      | 前の時点の値 (`前の値` とも書ける)。 `type: stacked` が 2 本目の帯として描く   |
 | `rows`          | 箱の中に並べる行 (`行` とも書ける)                                             |
-| `marks`         | 行頭の印 (`印` とも書ける。 `rows` と同じ並び。 ER は `pk` / `fk` / `opt`、状態は `entry` / `exit` / `do` / `internal`) |
+| `marks`         | 行頭の印 (`印` とも書ける。`rows` と同じ並び)。文字列のほか `{ mark, tone? }` で `primary` / `muted` の色の段を書ける |
+| `stage`         | `shape: stages` の泳法図で箱を入れる段階 (`段階` とも書ける)                  |
 | `lane`          | どの縦列に置くか                                                               |
 | `stack`         | 縦列の中の何段目に置くか                                                       |
 | `initial`       | 状態遷移図で始まりの状態か                                                     |
 | `final`         | 状態遷移図で終わりの状態か                                                     |
 | `tone`          | 色                                                                             |
 | `color`         | 色 (`tone` と同じ意味。 両方書いた時は `tone` を採る)                          |
-| `touchpoint`    | 体験の道筋で、利用者が触れる場所                                               |
-| `opportunity`   | 体験の道筋で、改善の余地                                                       |
+| `touchpoint`    | ユーザージャーニーで、利用者が触れる場所                                               |
+| `opportunity`   | ユーザージャーニーで、改善の余地                                                       |
+| `opportunityPosition` | ユーザージャーニーで、改善の余地を置く場所 (`below-chart` / `below-point`) |
 | `owner`         | 工程の並びで、担当                                                             |
 | `end`           | 工程の並びで、終わりの位置。 始まりより前の時期は始まりと同じに倒し、知らせ (`onNotice`) が出る |
+| `startLabel`    | 工程の始まりに出す札。節目の位置名とは別に書ける                             |
+| `milestone`     | `true` なら工程を帯ではなく節目の菱形で描く                                  |
+| `emphasis`      | `primary` なら工程の帯または `storage` の枠を主役として描く                   |
+| `at`            | 四象限の点の座標 `[x, y]` (`点の位置` とも書ける)。 左下が 0,0、右上が 1,1 |
 | `posX`          | 置く場所の横位置                                                               |
 | `posY`          | 置く場所の縦位置                                                               |
 | `posW`          | 箱の幅                                                                         |
@@ -128,24 +269,33 @@ flow:
 
 | 欄               | 何を書くか                                                          |
 | ---------------- | ------------------------------------------------------------------- |
-| `sub`            | 説明の下の補足 (クラス図では行き先の端の多重度)                     |
-| `tailSub`        | クラス図の出どころ側の多重度 (`1` 等)。 出どころの端の近くに出る     |
+| `sub`            | 説明の下の補足。`relation` と一緒に書いた record では行き先の端の多重度 |
+| `tailSub`        | 出どころ側の端に添える字 (`1` 等)。`relation` と一緒なら UML 関係の多重度 |
 | `guard`          | 状態遷移の条件                                                      |
 | `cardinality`    | ER 図の関係の多重度 (`1:1` / `1:N` / `N:1` / `N:M` / `0..1` / `1..*`)。 両端の形が語から決まり (`tailHead` / `head` を書けばそちらが勝つ)、語は説明の下の行に出る。 6 語以外の語と、ER 図以外に書いた多重度は端の形にならず、知らせ (`onNotice`) が出る |
 | `widthBind`      | 線の太さを値に追随させる (状態やつまみの名前を `{名前}` の形で書く) |
 | `strokeBind`     | 線の色を値に追随させる (`widthBind` と同じ読み方)                   |
 | `dashOffsetBind` | 破線の位置を値に追随させる (流れているように見せる)                 |
 | `side`           | 矢印がどの辺から出るか (`top` / `right` / `bottom` / `left`)        |
-| `head`           | 矢印の先の形 (`triangle` 継承・実装 / `diamond` 集約・コンポジション / `open` 関連・依存 / `crow` 多 / `one` `zero-one` `many` `zero-many` ER の端 / `none` 描かない) |
-| `tailHead`       | 出どころ側の端の形 (ER は端ごとに違う個数を示すので両端に要る) |
+| `fromSide`       | 矢印が出どころのどの辺から出るか (`top` / `right` / `bottom` / `left`) |
+| `toSide`         | 矢印が行き先のどの辺へ入るか (`top` / `right` / `bottom` / `left`) |
+| `head`           | 矢印の先の形 (`triangle` 継承・実装 / `diamond` 集約・コンポジション / `open` 関連・依存 / `dot` 点 / `crow` 多 / `one` `zero-one` `many` `zero-many` ER の端 / `none` 描かない) |
+| `tailHead`       | 出どころ側の端の形 (`dot` で点。ER は端ごとに違う個数を示すので両端に要る) |
 | `headFill`       | 端の印の塗り (`solid` 塗る / `hollow` 白抜き) |
 | `tailHeadFill`   | 出どころ側の印の塗り |
-| `relation`       | クラス図の関係の種類 (`extends` 継承 / `implements` 実装 / `aggregates` 集約 / `composes` コンポジション / `associates` 関連 / `uses` 依存)。 書くと線と端の形と塗りと付く側がまとめて決まる |
+| `relation`       | record に書く UML 関係の種類 (`extends` 継承 / `implements` 実装 / `aggregates` 集約 / `composes` コンポジション / `associates` 関連 / `uses` 依存)。 書くと線と端の形と塗りと付く側がまとめて決まる |
 | `kind`           | 順序図の言づての種類 (`call` 呼ぶ / `return` 返す / `fire` 投げる) |
 | `role`           | 辺の役目 (`main` 主となる道)。 書いた辺だけ「いま」 の色で引く。 主となる 1 本 (または 1 続き) にだけ書く |
 | `labelPlate`     | 説明文の下地を敷くか (`false` で外す)。 丸い下地は箱と同じ形なので、罫の細い図では名前が小さな箱に見える |
 | `labelOffsetX`   | 説明文の位置を横にずらす                                            |
 | `labelOffsetY`   | 説明文の位置を縦にずらす                                            |
+| `posX1`          | 線の出どころ側を固定する world x 座標                               |
+| `posY1`          | 線の出どころ側を固定する world y 座標                               |
+| `posX2`          | 線の行き先側を固定する world x 座標                                 |
+| `posY2`          | 線の行き先側を固定する world y 座標                                 |
+| `waypoints`      | 4 つの固定端点と一緒に書く直角折れ線の途中点 (`[{ x, y }, ...]`) |
+| `labelCollision` | `auto` で自動回避、`author` で作者が書いた札位置を保つ              |
+| `labelSize`      | 説明文の札の幅・高さ・字 (`{ width?, height?, fontSize? }`)          |
 | `overlay`        | `true` で説明文を線の上に重ねる (分岐図の条件ラベル用)              |
 | `fromPartNode`   | 出どころが部品 (kind に部品の名前を書いた箱) の時、矢印を繋ぐ部品の中の要素の id。 要素を 1 つだけ持つ部品は書かなくてもその要素に繋がり、2 つ以上持つ部品は書かないと矢印を外して知らせる |
 | `toPartNode`     | 行き先が部品の時、矢印を繋ぐ部品の中の要素の id (`fromPartNode` と同じ読み方) |
@@ -154,8 +304,155 @@ flow:
 
 ## 記法の癖
 
+### 分かれ道の図の形
+
+`type: flowchart` は、既定の横向きでは普通の手順を小見出しの無い札、`decision` を菱形、
+題を書かない `mark-start` / `mark-end` を塗った丸 / 二重丸で描く。印に `title:` を書いた時は、
+開始・終了の小見出しを持つ札のままにする。`loop` も「繰り返し」の小見出しを持つ札のままにする。
+`database` など、そのほかに種類を明記した箱は、横向きでも書いた種類の見た目を保つ。
+`direction: 縦` では、担当と種類を札の小見出しへまとめる従来の描き方を保つ。
+
 ### 箱の `lane:` が効く図種は限られる
 
+`type: swimlane` と `shape: stages` を組み合わせると、`stage:` (`段階:`) ごとに同じ上端と
+高さの列を左から並べ、列の見出しに「段階 N」と段階の名前を出す。箱は列の中へ書いた順に積む札
+(`card`) になり、書いた `kind` は効かない (知らせが 1 件出る)。この形では `lane:` は縦列ではなく
+担当を表し、札の右に小さな字で出る。`lanes:` に同じ id の `label` があれば、その名前を使う。
+
+列の中の札は真下の線で結び、右の列へ進む線は列の間を曲線で渡る。札は左の列から入る線が
+真横に通る段から積み始める。左の列や同じ列の上の札へ戻る線は、列の見出しより上を回る。
+
+```yaml
+type: swimlane
+shape: stages
+
+actors:
+  - 受付: { stage: 申請, lane: front }
+  - 確認: { 段階: 審査, lane: review }
+```
+
+`shape: metro` は担当 (`lane`) ごとに横の線路を 1 本作り、箱を駅として左から並べる。
+`lanes:` の `label` は担当の名札の名前、`subtitle` はその下の補足になり、名札から線路の右端まで
+一点鎖線の案内線を引く。
+担当が替わる線は、横線と 45 度の斜線をつないだ乗り換え線になる。
+
+```yaml
+type: swimlane
+shape: metro
+
+lanes:
+  shipper: { label: 荷主, subtitle: 頼む人 }
+  courier: { label: 配送便, subtitle: 運ぶ }
+
+actors:
+  - 始まり: { kind: mark-start, lane: shipper }
+  - 集荷を頼む: { lane: shipper }
+  - 在宅?: { kind: decision, lane: courier }
+  - 受け取る: { lane: shipper }
+  - 持ち戻る: { lane: courier }
+  - 終わり: { kind: mark-end, lane: shipper }
+
+flow:
+  - 始まり -> 集荷を頼む
+  - 集荷を頼む -> 在宅?
+  - 在宅? -> 受け取る: "はい"
+  - 在宅? -> 持ち戻る: "いいえ"
+  - 持ち戻る -> 集荷を頼む: "翌日もう一度" (dashed)
+  - 受け取る -> 終わり
+```
+
+担当を書かない箱は、その箱の名前を線路名に使い、図全体で 1 件知らせる。
+分かれ道から出る 1 本目は「はい」の色、2 本目以降は「いいえ」の色になり、後ろへ続く線と駅も
+同じ色を引き継ぐ。
+同じ担当へ向かう 2 本目以降の枝の駅は分かれ道の真下へ下ろし、横の線路上の駅としては数えない。
+本線と「はい」「いいえ」の実線には矢じりを付けない。
+前の駅へ戻る `(dashed)` の線は点線になり、戻り先の駅の下へ入る矢印を付ける。
+
+`animation` がある路線図でも全ての線を描く。
+初めて `focus` される段がまだ来ていない線には `data-cdl-pending="true"` が付き、画面側でまだの区間を
+薄く見せられる。
+
+`shape: timeline` は普通の段へ 1 から番号を振り、丸い番号を実線の縦軸上へ置く。
+札は `card` で固定し、札を持つ段の上から順に軸の左右へ交互に並べる。
+`lane` の名前は札の右端へ担当として添え、札から同じ段の番号へ点線の補助線を引く。
+
+```yaml
+type: swimlane
+shape: timeline
+
+lanes:
+  front: { label: 窓口 }
+  review: { label: 審査係 }
+
+actors:
+  - 受付: { lane: front }
+  - 審査: { lane: review }
+  - 修正: { lane: front }
+
+flow:
+  - 受付 -> 審査
+  - 審査 -> 修正
+  - 修正 -> 審査
+```
+
+`decision` からだけ入る普通の段のうち、`decision` の直後に書かれていない段は分かれ道の脇へ置く。
+脇の札は番号と補助線を持たず、分かれ道と同じ高さで担当を名前の下へ中央揃えで置く。
+脇の札は、軸から札の内側までを見本の 220 以上とする。
+戻る線を持つ脇の札は、軸から札の内側まで 220 空ける。
+普通の段の間は見本どおり 125 とする。
+次の段へ進む線は番号か軸上の印どうしを結び、終わりへ入る線を除いて矢頭を付けない。
+線に書いた色と種類は軸上でも保ち、分かれ道から色付きの線で入る番号はその線と同じ色を持つ。
+字のある線には `overlay: true` を渡し、描く側が線上に置ける札は線へ重ねる。
+固定 7 意匠では線の札を success / error の線色で塗り、高さ 40・字 21 の太字にする。角は通常 9、端末 4、浮彫 20 とする。
+電飾の分かれ道は面 `#09070f`、水色 `#00e5ff` の 3 の縁と同色の光で描く。
+軸と「はい」と戻る線は 6、「いいえ」は 5、補助線は 2、番号の縁は 4、終わりの外輪は 3.5 とする。
+前の段へ戻る線は札どうしを `back-detour` で結び、それ以外の分かれ道は札か軸上の印を結ぶ。
+戻る線は太さ 6、丸い線端、`0 9.6` の細かな点の並びで描く。
+2 段以上前へ戻る線は、道筋が途中の札や番号と交わる時だけ、それらを避けた一番近い外側の列を回る。
+交わらない線の道筋は変えず、外側を回る線の札は横の区間の中点に置く。
+
+戻る線には `fromSide` / `toSide` を書ける。時間軸は右から右、段の箱は右から上へ結ぶ。
+`leaderTo` の無い脇の札は `subtitlePlacement: right` で担当を右へ置ける。
+
+### 段の箱・路線図・時間軸に分かれ道と始まりと終わりを書く
+
+泳法図の3形では、箱の `kind` に `decision` / `mark-start` / `mark-end` を書ける。
+同じ印でも、形に応じて次のように描く。
+
+| 形 | `decision` | `mark-start` | `mark-end` |
+|---|---|---|---|
+| `shape: stages` | 札の右へ「分かれ道」を添える | 描かない | 描かない |
+| `shape: metro` | 線路上の分かれ道 | 線路の始まり | 線路の終わり |
+| `shape: timeline` | 軸上の分かれ道 | 描かない | 軸上の終わり |
+
+描かない印の前後に線がある時は、前の段と後ろの段を直接結ぶ。
+始まりから出る線だけ、または終わりへ入る線だけのように片側しかない線は図から外す。
+
+```yaml
+title: 荷物を届ける
+type: swimlane
+shape: timeline
+
+actors:
+  - 始まり: { kind: mark-start, lane: 荷主 }
+  - 配達に出る: { lane: 配送便 }
+  - 在宅?: { kind: decision, lane: 配送便 }
+  - 受け取る: { lane: 荷主 }
+  - 持ち戻る: { lane: 配送便 }
+  - 終わり: { kind: mark-end, lane: 荷主 }
+
+flow:
+  - 始まり -> 配達に出る
+  - 配達に出る -> 在宅?
+  - 在宅? -> 受け取る: "はい" (success)
+  - 在宅? -> 持ち戻る: "いいえ" (error)
+  - 持ち戻る -> 配達に出る: "翌日もう一度" (error, dashed)
+  - 受け取る -> 終わり
+```
+
+分かれ道から進む線には「はい」「いいえ」のような答えを書く。
+前の段へ戻る線は、説明の後ろへ `(dashed)` を添えると破線になる。
+
 縦列を並べるために使う図種 (`flow` / `topology` / `swimlane`) では効く。 縦列が骨格その
 ものになる図種 (`sequence` は縦列がそのまま時間軸の線) では効かず、知らせが出る。
 
@@ -176,6 +473,7 @@ actors:
 
 `lanes:` の id は組み立て側が作る形に合わせて、字 / 数 / 下線 / hyphen を受ける
 (`lane-idle` のような自動で作られた縦列の幅も書き直せる)。
+`label` は縦列の名前、`subtitle` はその補足で、通常の `topology` / `flow` の縦列見出しにも使える。
 
 `groups:` は並べた縦列のうち何本かを 1 つの枠で囲む。 枠は縦列の位置が決まった後に、束ねた縦列と
 中の箱を全て含む位置と大きさで描かれ、縦列と箱の位置は組を書かない図と変わらない。
@@ -260,7 +558,7 @@ animation:
 
 ### 順序図の段は `focus:` で強調する言づてを選ぶ
 
-`sequence` / `solidity` の図は 1 枚の板に言づてを行で並べる。 段ごとに 1 通を強調し、それより前は
+`sequence` の図は 1 枚の板に言づてを行で並べる。 段ごとに 1 通を強調し、それより前は
 描き済みとして残し、後ろは隠す。 どの言づてを強調するかは段の `focus:` から決まる。
 
 | `focus:` に書いたもの | 合う言づて |
@@ -314,6 +612,10 @@ animation:
 
 - `parseTextDsl(src: string): ParseResult` ... v0.4 parser、 `textDslToDiagram` に移行推奨
 
+組み立てた図は、色味の有無にかかわらず `textMetrics: "widest"` を持つ。比例字と等幅字の
+広い方で箱・札を測るため、色味を替えても骨組みは変わらない。従来の比例字だけの配置に比べ、
+字に合わせて幅が決まる箱や札は少し広がることがある。記法から測り方を指定する欄は持たない。
+
 ## LLM 向け JSON DSL
 
 LLM (Anthropic Claude / OpenAI GPT) が structured output で確実に diagram を生成できるよう、 YAML DSL と 1:1 対応する JSON 記法を提供する。