# Rosenzu

> 路線図（長い流れを路線、流れの節目を駅として描く可視化 HTML）を作ったり直したりする手順と雛形。V1 のような固定の路線記号、乗換駅、新しくつないだ区間の破線を描き、区間が実在のつながりに無ければ書き出さずに止まる。ユーザーが「路線図にして」「路線図みたいに可視化して」「処理の流れを路線図で見たい」と言ったとき、既存の路線図へ路線や駅を足したり直したりするとき、複数の流れが同じ節目を共有する様子を一枚で見せたいときに使う。

- Skill: `shikigami-ai-works/rosenzu` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add shikigami-ai-works/rosenzu`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shikigami-ai-works/rosenzu/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shikigami-ai-works (https://skillmd.com/u/shikigami-ai-works)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/shikigami-ai-works/rosenzu

---


# 路線図の描き方

流れを路線、節目を駅として描く。
雛形はこの Skill のフォルダの `template/` にある。
見た目の正本は雛形とする。見た目を直すときは雛形を先に直し、案件にある写しを置き換える。

- `build_rosenzu.py`: 入力の JSON から HTML を書き出す。検査に通らなければ書かずに止まる（Python 3.9 以上、標準ライブラリだけ）
- `shot.mjs`: 書き出した HTML を幅と明暗を変えて4枚撮り、数を数える（Node.js 18 以上、Chrome か Chromium 系のブラウザ。依存パッケージは無い）
- `assign_colors.py`: 下の「色の選び方」の条件を満たす色の当て方を出す
- `sample.json`: 入力の手本（架空の題材）

## 路線図が合う形

- 流れがおおむね一本道で、いくつかの節目を複数の流れが共有している。
- 分岐と合流が多く、どこからどこへでも辺がある網には合わない。その場合は表か、ノードと辺の図にする。
- 流れが1本だけなら、番号つきの一覧で足りる。

## 見た目の決まり

| 描く物 | 意味 |
|---|---|
| 色の太線と記号札（V1） | 1本の流れ。記号は区分の頭文字1字と番号 |
| 白い丸 | 駅（流れの節目） |
| 黒い輪で囲んだ大きい丸 | 乗換駅（2本以上の路線が通る）。名札の下に乗り換え先の記号札を並べる |
| 名札「V1-3　#8」 | V1 線の3つ目の駅で、元の番号が #8 |
| 破線の区間と日付札 | 新しくつないだ区間。札の語は入力の new_label（既定は「開通」） |
| 縁が破線の丸 | 節目そのものの動作が未確認 |
| 赤茶の枠の札 | 路線ごとの注意（始発駅が運休中など）。説明は凡例に出る |

- 上から、数の札（路線、駅、乗換駅、新しい区間）、区分ごとの記号の一覧、凡例、路線ごとの図とメモ、乗換駅の表、作り方の順に並べる。
- 記号の一覧では、起点と終点を路線名の下の行に置く。横に並べると、折り返した行が次の路線のものに見える。
- 幅 720px 以下では線を縦に回す。明暗は prefers-color-scheme で切り替える。
- 名札には要点だけを書き、詳しい説明はポインタを置くと出る title へ入れる。スマートフォンでは title が出ないので、判断に要る事実は路線のメモに書く。

## 記号の決まり

- 路線の記号は一度振ったら変えない。消した路線の記号は retired へ移して欠番にする。雛形は欠番の使い回しを止める。
- 駅の番号は、元の台帳の番号をそのまま使う。路線図のために振り直さない。
- 身元は記号札の文字が示し、色はその補助にとどめる。一度見せた路線の色は、他の路線を足し引きしても塗り替えない。

## 手順

1. 辺の一覧を用意する。辺は「A の出力を B が実際に読む」のような、実在を確かめたつながりに限る。台帳から機械で作れるなら、変換の script を案件の `tools/` に置き、手で辺を足さない。
   完了: 路線に使う区間が、すべて一覧にある。
2. 雛形を案件の `tools/` へ複製する。写しは手で直さない。
   - 入力を手で書く案件: `build_rosenzu.py` と `shot.mjs` をそのまま複製し、`sample.json` を手本に入力の JSON を書く。
   - 台帳から入力を組み立てる案件: `build_rosenzu.py` を `rosenzu_core.py`、`shot.mjs` を `rosenzu_shot.mjs` の名で複製する。台帳を読んで入力の dict を組み立てる script を別に書き、core の `normalize()`、`selftest()`、`build()` を呼ぶ。
   完了: 各路線に記号、区分、色、名前、題、駅の並び、メモがある。
3. 書き出しの script を `--selftest` つきで回す（例: `python build_rosenzu.py 入力.json --selftest`）。
   完了: 欠けた区間、名前の無い駅、記号の重複、欠番の使い回しの4つが「止まった」、元の入力が「通った」、色の式の対照が2つとも「合った」で exit 0。
4. `--selftest` を外して書き出す。検査に1つでも引っかかると、書かずに exit 1 で止まる。
   完了: exit 0 で、色の警告（`!! 色:` の行）が0件。警告が出たら色を差し替えて書き直す。
5. `node shot.mjs <出力.html の絶対パス> <撮影先>` で、幅 1280 と 375、明と暗の4枚を全高で撮る。はみ出したときは、原因の要素を shot.mjs が5つまで名指しする。
   完了: 4枚とも横はみ出しが 0px、路線数と駅の札の数が手順4の表示と一致、375 で線の向きが column。4枚を開いて見てから、ユーザーにも見せる。
6. HTML の置き場、入力の JSON か組み立ての script の置き場を、案件の README か作業記録に1行で残す。

## 色の選び方

下の16色は、1色ずつなら条件（記号札の文字 4.5 以上、明と暗の紙の両方に 3 以上、彩度 0.10 以上）をすべて満たす。
1〜5 はどの2色を組んでも、通常の見え方で差 17.9 以上、色覚の型（1型と2型）で 9.7 以上ある。
6 以降は組によって差が足りないので、当て方を下の条件で確かめる。

| 順 | 色 | 文字 | 順 | 色 | 文字 |
|---|---|---|---|---|---|
| 1 | #E74635 朱 | 墨 | 9 | #CA2661 紅 | 白 |
| 2 | #165CD6 青 | 白 | 10 | #0E6999 濃い空色 | 白 |
| 3 | #189B89 青緑 | 墨 | 11 | #107B5E 深緑 | 白 |
| 4 | #AC2A96 赤紫 | 白 | 12 | #EE4E86 桃 | 墨 |
| 5 | #9970FB 菫 | 墨 | 13 | #6664EC 青紫 | 白 |
| 6 | #25880F 緑 | 白 | 14 | #8C3BBF 紫 | 白 |
| 7 | #D659C5 明るい赤紫 | 墨 | 15 | #179E56 若緑 | 墨 |
| 8 | #1790D1 空色 | 墨 | 16 | #845C0C 黄土 | 白 |

- 同じ駅を通る路線どうしは、通常の差 15 以上かつ色覚の型で 8 以上にする。記号の一覧で隣に並ぶ同じ区分の路線どうしも、通常の差 15 以上にする。それ以外の組は近い色でもよい。
- `python assign_colors.py 入力.json` が、この条件を満たし、今の色になるべく近い当て方の案を出す（入力は書き換えない）。
- 16色は、条件を満たす候補2,706色から、最悪の組の差が一番大きくなるよう1色ずつ足して選んだ。この選び方では、全部の組が差の条件を満たすのは5色までだった。
- 記号札の文字色（白か墨）は雛形が選ぶ。
- 差の計算は、WCAG のコントラスト比、OKLab の色差 ×100、Machado 2009 の色覚の型の変換を使う。既知の2組で値が合うことを `--selftest` が確かめる。

## 罠

- 乗換駅の輪を文字色（--ink）で塗ると、暗い画面では文字色が明るくなり、丸の中身と同じ色になって輪が消える。輪は専用の色トークン --xring にし、暗い画面でも暗い色にしている。
- ファイルの場所のように切れ目の無い長い文字列は、幅 375px で横にはみ出す。雛形は overflow-wrap:anywhere で折る。
- 1本の路線が同じ駅を2回通る並びは描けない。雛形が止める。流れが輪になっているなら路線図に向かない形か、路線を2本に割る。
- 雛形の検査は区間が edges にあるかを見るだけで、edges の中身が正しいかは見ない。edges を手で足すと、実在しない区間が線として描かれる。
- エディタやブラウザの組み込みの画面で HTML を開くと、書き出し直しても古い版が映ることがある。見た目は `shot.mjs` の撮影で確かめる。