GitHub Trendingを毎日チェックしてる私が、今日思わず二度見したのがコレ。cathrynlavery/diagram-designっていうリポジトリが、累計17,368スターなんだけど、今日一日だけで3,646スターも増えてるんだよね。伸び方が明らかにおかしい（褒め言葉）😳 説明文には「Claude Code向けの編集者品質の図解29種類。自己完結型HTML+SVG。影も、Mermaidのダサさもナシ」って書いてあって、これが刺さってる人がめちゃくちゃ多いってこと。
何ができるリポジトリなのか
これはClaude Code・Codex・Pi（どれもAIとチャットしながらコードを書く「コーディングエージェント」用のツール）で使える「スキル」、つまりAIに特定の作業のやり方を教える追加機能みたいなもの。作者のREADMEによると、アーキテクチャ図、フローチャート、シーケンス図、ER図（データの関係図）、タイムライン、組織図、ベン図、ピラミッド、レーダーチャート、ガントチャートなど全27種類の図を作ってくれる。
ポイントは全部「静的HTML」で出力されること。ビルド作業もJavaScriptも外部画像も不要で、ブラウザで開くだけで見られる。ライト・ダーク・フル装飾の3パターンで書き出されるから、そのままブログやスライドにコピペできる。作者自身が「Figmaで30分悩む」「Claudeに頼んでも他と全然違う丸角ボックスが出てくる」って課題を書いてて、まさにそこを解決するために作ったスキルなんだって。
どう使うか
導入はシンプル。Claude Codeなら以下のコマンドを打つだけ。
/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-designCodexなら`codex plugin marketplace add cathrynlavery/diagram-design`、Piなら`pi install https://github.com/cathrynlavery/diagram-design`で入る。面白いのが「ブランド合わせ」の機能。自分のサイトURLをエージェントに渡すだけで、色とフォントを勝手に読み取って全部の図に反映してくれる。READMEに載ってた実際のやり取りがこんな感じ。
あなた: 「diagram-designをhttps://yoursite.comに合わせて」 エージェント: → トップページを取得 → 主要な色とフォントを抽出 → paper（背景）、ink（文字）、muted（薄字）、accent（強調色）に割り当て → 変更案を提示 あなた: 「うん、それで適用して」色は文字と背景のコントラスト（WCAG AAという読みやすさの基準）も自動チェックしてくれるから、見づらい配色を勝手に提案し直してくれるらしい。デフォルトでも黒＋オレンジ系の配色が用意されてて、そのままスクショに使えるレベルの見た目にはなってる。
なぜ今日これが急上昇してるのか
推測になるけど、背景には「AIに図を作らせても結局ダサい」って悩みが相当溜まってた、っていうのがあると思う。ChatGPTやClaudeに図を頼むと、みんな同じような丸角の四角と矢印しか出てこないのは私も体感でわかる😅 このリポジトリはその不満に「じゃあスキルとして作り込んじゃえばいいじゃん」ってストレートに答えた形で、Claude Code向けスキルという今まさに盛り上がってるジャンルにドンピシャでハマったのが伸びの理由なんじゃないかな。
想定ユーザーは、ブログやドキュメントサイトを運営してる人、社内資料を作るエンジニア、プロダクトの説明図を量産したいスタートアップあたり。作者自身も個人ブログlittlemight.comや自社サービスBestSelf.coで使うために作ったって書いてて、「自分が欲しいから作った」系のツールが結果的にみんなに刺さったパターンだね。ギャラリーはcathrynlavery.github.io/diagram-designで全27種類プレビューできるから、まずここ見てから導入するかどうか決めるのが良さそう。
