diagram-design

こんな用途に

• アーキテクチャ図・象限図・シーケンス図など 45 種類の図から 1 つを、自然な言葉で agent に描かせる
• 各図を 1 つの自己完結した HTML + SVG ファイルとして受け取り、ダブルクリックで開く
• onboard で自分のサイトを指定し、以降の図すべてに配色とフォントを合わせる
• draw.io、Mermaid、Excalidraw から取り込んだり、PNG・SVG に書き出す

始め方

1. npx skills add cathrynlavery/diagram-design を実行する
2. Claude Code で /plugin marketplace add と /plugin install diagram-design@diagram-design を実行する
3. 「frontend、backend、database、Redis キャッシュのアーキテクチャ図」のように言葉で頼む
4. agent が図の種類を選び、計画を述べてから 1 つの .html ファイルを書く

導入前に

Cursor、Claude Code、Codex、Qoder、GitHub Copilot、Gemini CLI などに対応します。公式ビルドはこのリポジトリのみから提供され、PRIVACY.md にこの skill がネットワークに送る内容が記載されています。

プロジェクトの説明をもとに AI がまとめました。利用前に公式ドキュメントをご確認ください。