coleam00/excalidraw-diagram-skill

これは何？

主な機能

• 01自然言語の説明からExcalidraw図を生成します。
• 02分岐、タイムライン、収束など、概念に合った図形の配置を行います。
• 03Playwrightで出力をレンダリングし、エージェントがレイアウトの問題を確認して修正できます。
• 04技術図にコードスニペットやJSONペイロードの例を含められます。
• 05ブランドカラーを1つのパレットファイルに集約しており、簡単にカスタマイズできます。

ユースケース

• コーディングエージェントとのセッション中に、システムアーキテクチャやデータフローを文書化する。
• 設計ドキュメント用に、APIやプロトコルのシーケンスを図示する。
• カラーパレットファイルを編集して、ブランドに合わせた図を作成する。

クイックスタート

1. 1

   リポジトリをクローンする

   git clone https://github.com/coleam00/excalidraw-diagram-skill.git
2. 2

   スキルをプロジェクトの skills ディレクトリにコピーする

   cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
3. 3

   レンダラーの依存関係と Chromium をインストールする

   cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium
4. 4

   コーディングエージェントに図の作成を依頼する

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

• !README にライセンスの記載がないため、利用権が不明です。
• !レンダリングパイプラインには uv と、Chromium をインストールした Playwright が必要です。

トピック

よくある質問

excalidraw-diagram-skill とは？

自然言語の説明からExcalidraw図を生成する、Claude Codeなど向けのコーディングエージェント用スキル。 このスキルを使うと、Claude CodeやOpenCodeなどのコーディングエージェントが、平易な言葉で書かれた説明からExcalidraw図を作成できます。エージェントが概念の整理、レイアウト、JSON生成、レンダリングを担うため、システムやプロトコルの図を依頼すると、編集可能なExcalidrawファイルを受け取れます。

excalidraw-diagram-skill は無料で使えますか？ライセンスは？

excalidraw-diagram-skill にはライセンスが明記されていません。コードは公開されていますが、ライセンスがない場合は再利用の許諾がないため、利用前に作者に確認することをおすすめします。

excalidraw-diagram-skill は今もメンテナンスされていますか？

半年以上コミットなし。excalidraw-diagram-skill の最終コミットは 2026年3月1日 です。

excalidraw-diagram-skill は何に使えますか？

コーディングエージェントとのセッション中に、システムアーキテクチャやデータフローを文書化する。 設計ドキュメント用に、APIやプロトコルのシーケンスを図示する。 カラーパレットファイルを編集して、ブランドに合わせた図を作成する。

excalidraw-diagram-skill のインストール方法は？

リポジトリをクローンする: git clone https://github.com/coleam00/excalidraw-diagram-skill.git スキルをプロジェクトの skills ディレクトリにコピーする: cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram レンダラーの依存関係と Chromium をインストールする: cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium コーディングエージェントに図の作成を依頼する

excalidraw-diagram-skill はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/coleam00/excalidraw-diagram-skill