/ ディレクトリ / プレイグラウンド / excalidraw-skill
← 全サーバー ↗ GitHub
● コミュニティ Agents365-ai ⚡ 即起動

excalidraw-skill

作者 Agents365-ai · Agents365-ai/excalidraw-skill

自然言語によるシステム記述を手描き風のExcalidrawダイアグラムに変換するClaude Codeスキル — SVG/PNG/編集可能な.excalidrawファイルとしてエクスポートできます。

Agents365-aiのExcalidrawスキルは、議論にダイアグラムが必要なタイミング（3つ以上のコンポーネント、マルチティアシステム、ワークフロー）を自動検出し、適切な図を生成します：フローチャート、アーキテクチャ図、シーケンス図、マインドマップ、スイムレーン。エクスポートはKroki API（インストール不要）またはローカルのexcalidraw-brute-export-cli（Firefox使用）で行えます。編集可能な.excalidrawファイルはexcalidraw.comで直接開けます。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

excalidraw-skill.replay ▶ 準備完了
0/0

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： excalidraw-skill

散文形式の説明からマイクロサービスアーキテクチャ図を作成する

👤 設計ドキュメントを書くエンジニア ⏱ ~10 min beginner

使うタイミング： RFCを書いていて、別のツールを開かずにダイアグラムを作りたいとき。

フロー
  1. システムを説明する
    Use the excalidraw skill — draw a microservices e-commerce architecture with clients, API gateway, 4 services, RabbitMQ, and per-service databases.✓ コピーしました
    → Claudeがレイアウトを生成し、Kroki経由でSVGをエクスポートする
  2. 調整して再エクスポートする
    Add Redis in front of the product service and regenerate.✓ コピーしました
    → Redisが追加され、レイアウトが再調整されたダイアグラム
  3. 編集可能なバージョンを保存する
    Save as .excalidraw so I can edit it on excalidraw.com.✓ コピーしました
    → カレントディレクトリにファイルが保存される

結果： 5分以内に手描き風のアーキテクチャ図をドキュメントに追加できます。

注意点
  • 10以上のコンポーネントがあるとダイアグラムが煩雑になる — 先にClaudeにティアごとのグループ化を依頼してください。スキルにはそのためのレイアウトルールがあります
組み合わせ： filesystem

デバッグしたAPIインタラクションからシーケンス図を生成する

👤 チームメンバー向けにフローをドキュメント化するバックエンドエンジニア ⏱ ~10 min beginner

使うタイミング： 5つのサービスにまたがるOAuthフローをようやく解明し、それをドキュメント化したいとき。

フロー
  1. ログを貼り付けるかフローを説明する
    Excalidraw skill — sequence diagram: user → frontend → auth service → identity provider → callback → session.✓ コピーしました
    → 正しい矢印と戻りメッセージを含むシーケンス図
  2. 改善する
    Add the error path when the IdP returns 401.✓ コピーしました
    → 代替フローが視覚的に区別されて描画される

結果： PRの説明にそのまま貼れるシーケンス図が完成します。

組み合わせ

他のMCPと組み合わせて10倍の力を

excalidraw-skill + filesystem

生成したダイアグラムをドキュメントフォルダに直接保存する

Generate the architecture diagram and save it to docs/architecture/v2.svg.✓ コピーしました
excalidraw-skill + github

仕様書と一緒にダイアグラムをコミットしてPRに添付する

Create the diagram, commit to docs/, and reference it in the PR body.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
generate_flowchart process description 分岐点と順次ステップを含むプロセスの場合 0 via Kroki, 0 local
generate_architecture components + relationships ティアやサービス境界を持つシステムの場合 0
generate_sequence actors + messages 時系列順のインタラクションをドキュメント化する場合 0
export_png diagram ID SVGに対応していないドキュメント向けにラスタライズ画像が必要な場合 0 (requires local CLI)

コストと制限

運用コスト

APIクォータ
Krokiに明示的なクォータはありませんが、過度なリクエストは控えてください
呼び出しあたりのトークン
ダイアグラム仕様はコンパクトです（通常2kトークン未満）
金額
無料 — スキルはローカルファイルです。Krokiも無料です。
ヒント
単発の利用にはKrokiを使い、excalidraw-brute-export-cliはオフライン環境が必要な場合のみインストールしてください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： 認証情報不要 — 純粋なプロンプトのみ
データ送信先： Krokiパスではダイアグラム仕様がkroki.ioに送信されます。ローカルCLIパスでは何も送信されません。

トラブルシューティング

よくあるエラーと対処法

トリガーキーワードの誤認 — ClaudeがExcalidrawの代わりにMermaidを生成する

「excalidraw」と明示的に指定してください。「draw a diagram」だけでは他のツールが選択される場合があります。

代替案

excalidraw-skill 他との比較

代替案代わりに使う場面トレードオフ
Mermaid via markdownドキュメントが既にMermaidをネイティブにレンダリングできる場合（GitHubなど）手描き風の見た目がなく、レイアウトの制御も限定的
drawio via desktop appクリック操作で手動レイアウトしたい場合エージェント駆動ではない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る