Repolode
投稿する
cathrynlavery

cathrynlavery/diagram-design

45種類の図とブランドカラーに対応した、単体HTMLで編集的な図を作成するエージェントスキル。

代替できる製品:FigmaLucidchart

GitHub で見る公式サイト
スター
58,066
フォーク
3,725
未解決の Issue
47
最終コミット
4 日前

これは何？

Diagram Designは、Claude Code、Codex、GitHub Copilot、Cursor、Piなどのコーディングエージェント向けスキルです。図の内容を自然な言葉で説明すると、エージェントが45種類の図から適切なものを選び、インラインSVGを含む単一のHTMLファイルを作成します。ビルド工程やJavaScriptは不要で、ブラウザーですぐに開けます。

このスキルでは、控えめなアクセントカラー、1pxの細線、影なし、4pxグリッドに沿った座標という、統一感のある編集スタイルを適用します。初期設定時にWebサイトから色とフォントを読み取り、以降の図にブランドを反映できます。また、トークンを書き出す前にWCAG AAのコントラストを確認します。

既存のdraw.io、Mermaid、Excalidrawファイルをこのスタイルで描き直し、図をSVGまたはPNGにエクスポートすることもできます。レイアウトは自動エンジンではなくエージェントが決めるため、実行ごとに出力が異なる場合があります。

主な機能

  • 01インラインSVGを含む単一のHTMLファイルを生成し、あらゆるブラウザーで開けます。
  • 02アーキテクチャ図、シーケンス図、フローチャート、ER図、ガントチャート、グラフなど、45種類の図に対応します。
  • 03Webサイトから配色とフォントを抽出し、すべての図にブランドを反映します。
  • 04既存のdraw.io、Mermaid、Excalidrawファイルを同じスタイルで描き直します。
  • 05図をSVGまたはPNGにエクスポートできます。オフラインフォントモードも利用できます。

ユースケース

  • 技術ブログの記事やドキュメントページに掲載するアーキテクチャ図やシーケンス図を作成する。
  • Mermaidやdraw.ioの図を、スライド向けの洗練されたビジュアルに仕上げる。
  • プロジェクト内の図を会社のWebサイトのブランドに合わせて統一する。
  • プレゼンテーション用の四象限図、ベン図、タイムライン図を作成する。

クイックスタート

  1. 1

    skills CLIでスキルをインストールします

    npx skills add cathrynlavery/diagram-design
  2. 2

    Claude Codeでプラグインマーケットプレイスを追加します（任意）

    /plugin marketplace add cathrynlavery/diagram-design
  3. 3

    Claude Codeでプラグインをインストールします（任意）

    /plugin install diagram-design@diagram-design
  4. 4

    エージェントに自然な言葉で図を依頼すると、ブラウザーで開ける.htmlファイルを1つ作成します

使う前に知っておきたいこと

  • 出力の品質は使用するモデルによって異なり、同じプロンプトでもレイアウトが変わることがあります。
  • 出力は編集可能なソース形式ではないため、差分を確認できるテキストも、直接編集できるキャンバスもありません。
  • READMEによると、管理されたインストールでカスタマイズした場合、パッケージの更新によってスキルのスタイルガイドが置き換えられることがあります。

トピック

#agent-skills#diagrams#svg#data-visualization#claude-code#html#mermaid#codex#drawio

よくある質問

diagram-design とは？
45種類の図とブランドカラーに対応した、単体HTMLで編集的な図を作成するエージェントスキル。 Diagram Designは、Claude Code、Codex、GitHub Copilot、Cursor、Piなどのコーディングエージェント向けスキルです。図の内容を自然な言葉で説明すると、エージェントが45種類の図から適切なものを選び、インラインSVGを含む単一のHTMLファイルを作成します。ビルド工程やJavaScriptは不要で、ブラウザーですぐに開けます。
diagram-design は無料で使えますか？ライセンスは？
diagram-design は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
diagram-design は今もメンテナンスされていますか？
活発にメンテナンス中。diagram-design の最終コミットは 2026年10月16日 です。
diagram-design は何に使えますか？
技術ブログの記事やドキュメントページに掲載するアーキテクチャ図やシーケンス図を作成する。 Mermaidやdraw.ioの図を、スライド向けの洗練されたビジュアルに仕上げる。 プロジェクト内の図を会社のWebサイトのブランドに合わせて統一する。 プレゼンテーション用の四象限図、ベン図、タイムライン図を作成する。
diagram-design のインストール方法は？
skills CLIでスキルをインストールします: npx skills add cathrynlavery/diagram-design Claude Codeでプラグインマーケットプレイスを追加します（任意）: /plugin marketplace add cathrynlavery/diagram-design Claude Codeでプラグインをインストールします（任意）: /plugin install diagram-design@diagram-design エージェントに自然な言葉で図を依頼すると、ブラウザーで開ける.htmlファイルを1つ作成します
diagram-design はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/cathrynlavery/diagram-design

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト