Communityコーディング&開発github.com

Agents365-ai/excalidraw-skill

自然言語から手書き風のExcalidraw図を作成します。5パターン、8色のセマンティックパレット、Kroki APIまたはローカルCLIに対応。PNG/SVG出力、マルチエージェント対応。

excalidraw-skill とは?

このスキルは、AIエージェント(Claude Code、Cursor、Codexなど)がユーザーの自然言語による指示から、手書き風のExcalidraw図を自動生成することを可能にします。5種類の図パターン(フローチャート、シーケンス図、クラス図など)と、8色のセマンティックパレットを使用して視覚的に一貫性のある図を作成します。図の生成方法として、リモートのKroki APIを使用するか、ローカルのExcalidraw CLIを実行するかを選択できます。出力形式はPNGとSVGに対応しており、マルチエージェント環境でも協調動作が可能です。開発者やチームが素早くアイデアを視覚化し、ドキュメントや設計レビューに活用するのに役立ちます。

対応~Claude Code~Codex CLI~Cursor
npx skills add Agents365-ai/excalidraw-skill

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

excalidraw-skill は何をしますか?

自然言語から手書き風のExcalidraw図を作成します。5パターン、8色のセマンティックパレット、Kroki APIまたはローカルCLIに対応。PNG/SVG出力、マルチエージェント対応。

概要

このスキルは、AIエージェントがユーザーの自然言語による説明をもとに、手書き風の図を生成するためのツールです。ソフトウェアアーキテクチャ、ビジネスプロセス、システム設計などを視覚化するのに最適です。

サポートされる図パターン

  • フローチャート: プロセスやワークフローの表現
  • シーケンス図: オブジェクト間の相互作用の順序
  • クラス図: オブジェクト指向の設計と関係性
  • ユースケース図: システムの機能とアクター
  • マインドマップ: アイデアのブレインストーミングと整理

セマンティックパレット

8色の定義済みカラーパレットを使用して、図の要素に意味的な色を割り当てます。これにより、視覚的な一貫性と読みやすさが向上します。

出力形式

  • PNG: ラスター画像として保存
  • SVG: ベクター画像として保存(編集可能)

使用モード

Kroki API(デフォルト)

リモートのKroki APIサービスを使用して図を生成します。インターネット接続が必要ですが、追加のインストールは不要です。

ローカルCLI

ローカルにインストールしたExcalidraw CLIを使用して図を生成します。オフライン環境や高度なカスタマイズが必要な場合に適しています。

マルチエージェント対応

複数のAIエージェントが協調して図を生成・編集できます。例えば、あるエージェントが図の構造を提案し、別のエージェントが視覚的なスタイルを調整するといった役割分担が可能です。

使用例

# フローチャートの生成
export diagram "ユーザーがログインフローを入力するフローチャート"

# シーケンス図の生成
export diagram "3つのサービス間のAPIコールのシーケンス図"

# PNGとして保存
export diagram --format png "システムアーキテクチャの図"

# ローカルCLIを使用
export diagram --local --format svg "ネットワーク構成図"

インストール

git clone https://github.com/Agents365-ai/excalidraw-skill.git
cd excalidraw-skill
pip install -r requirements.txt

設定

環境変数または設定ファイルで以下のオプションを構成できます:

  • EXCALIDRAW_API_ENDPOINT: Kroki APIのエンドポイント(デフォルト: https://kroki.io)
  • EXCALIDRAW_LOCAL_CLI_PATH: ローカルCLIのパス(オプション)
  • EXCALIDRAW_PALETTE: 使用するカラーパレット(デフォルト: semantic-8)

貢献

プルリクエスト、機能リクエスト、バグ報告はGitHubリポジトリへお寄せください。

ライセンス

MIT License

関連スキル