← ClaudeAtlas

mermaid-diagramlisted

GitHub 上でレンダリングされる Mermaid 図を diagram-guide に従って新規作成・監査・修正する。README の構成図・技術記事の図・解説ドキュメントの図を描きたいとき、既存の図が横に長くて読みにくい・何を図にすべきか決まらないときに使う。図を SVG に焼かず ```mermaid フェンスのまま扱う。
yktsnet/dotfiles-public · ★ 1 · AI & Automation · score 68
Install: claude install-skill yktsnet/dotfiles-public
# mermaid-diagram 本リポの `docs-agents/diagram-guide.md` を唯一の基準として Mermaid 図を作成/監査/修正する。 **基準は本ファイルに転記しない。食い違ったらガイドを優先する。** README を書く文脈では `repo-readme` Skill が `readme-guide.md` §8 経由で本 Skill を呼ぶ。単体でも使える。 ## 0. 基準を読む(必須・最初に) - `docs-agents/diagram-guide.md` — 描くかの判断・幅の制約・形と線種・抽象度 - README 内の図なら `docs-agents/readme-guide.md` §8(配置・画像の扱い) ## 1. モードを決める | 入力 | モード | |---|---| | 図がまだ無い | **新規** → 手順2 | | 既存の図がある(読みにくい・直したい・棚卸し) | **監査** → 手順3 | ## 2. 新規に描く diagram-guide §0 の順序をそのまま踏む。**手順1(箇条書きで書いてみる)を飛ばさない。** 1. **箇条書きで書く。** 足りるなら図を作らず納める。「図があった方が良さそう」は理由にならない。落とすときは中身に合った形へ置き換える(ガイド §1「描かないときの置換先」— 手順なら番号付きリスト、対応関係なら表、1ステップなら一文) 2. **主題を決める。** ガイド §1 の表から、分岐 / 失敗経路 / 境界 / 対比 のどれを見せるか1つ選ぶ。主題が2つ以上あるなら図を分ける(ガイド §5 の3軸に該当するかを確認し、各図に主題を示す一文を付ける) 3. **対象を読む。** 主題に該当する実装を必ず読む。分岐条件・終了状態・デプロイ先を**推測で書かない**��図は創作でなく既にあるものの写像) 4. **向き・形・線種を決める。** ガイド §2 §3 5. **幅を数える。** ガイド §2「幅の数え方」。削る順序は エッジラベル → ノードラベル → 向き → 図の分割 6. **図の下に本文を置く。** ラベルから削った詳細はここへ落とす。図と本文で同じことを二度書かない ## 3. 既存の図を監査する 対象ファイルの ```` ```mermaid ```` ブロックを列挙する。**2枚以上あるファイルは、先にファイル全体で次を見る。** ``` [ ] 各図が単独で主題を持っている → 持たない図がある=それは「まとめる対象」ではなく削除対象。先に落としてから残りを見る [ ] 分かれている軸が ガイド §5 の3つ(時間 / 正常系・異常系 / before・after)のいずれか [ ] 各図に主題を示す見出しか一文がある(同じ見出しの下に無説明で並んでいないか) [ ] 1枚に主題が2つ以上詰まっていないか → 詰まっているなら §5 の軸で分割する。「大きいから割る」ではなく「主題が2つだから割る」 ``` そのうえで、**1ブロックずつ**次を判定する。 ``` [ ] 主題がある(分岐 / 失敗経路 / 境界 / 対比 のいずれか) → 無い=一直線のパイプライン等なら、削除して箇条書きに置換することを提案する [ ] そのリポで一番おもしろい判断が、1ノードに潰れていない → 潰れているなら、そのノードを展開した図に主題を差し替える [