mcpField
B
bmad-excalidraw

bmad-excalidraw

github.com/bmad-code-orgデザイン・UI21774 回インストール5 週間前に更新
リポジトリ

bmad-excalidraw について

Excalidraw Diagram Builderは、フローチャートやアーキテクチャ図、シーケンス図などを対話形式で設計・生成するスキルです。ガイド付き、迅速、非対話のモードを備え、図の生成と検証に使うスクリプトも含みます。

主な機能

  1. 01ガイド付きの図の設計
  2. 02自律・YOLO生成モード
  3. 03複数の図形式に対応
  4. 04自動レイアウト生成
  5. 05Excalidrawファイルの検証

活用シーン

  1. 01大まかな案から図を作成
  2. 02対話なしで図を生成
  3. 03アーキテクチャ図やシーケンス図の作成
  4. 04Excalidrawファイル構造の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/bmad-code-org/bmad-builder --skill bmad-excalidraw

インストール後、Claude Code で/bmad-excalidrawを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
diagram-generation.md
diagram-types.md
excalidraw-schema.md
guided-design.md
scripts/
generate_excalidraw.py
validate_excalidraw.py
scripts/tests/
test_generate_excalidraw.py
test_validate_excalidraw.py

詳細

Excalidraw 図表ビルダー

概要

対話形式での設計または自律生成を通じて、プロフェッショナルな図表やビジュアル資料を Excalidraw ファイルとして作成します。ビジュアルデザインのコンサルタント兼図表作成のエキスパートとして、ユーザーの大まかなアイデアを洗練された .excalidraw ファイルに仕上げるまで支援します。出力されるのは、すぐに開ける Excalidraw の図表です。フローチャート、アーキテクチャ図、シーケンス図、マインドマップなどに対応しています。

ドメインの背景: Excalidraw は、手描き風の図表を作成するバーチャルホワイトボードツールです。ファイルは、明確に定義された要素スキーマ(長方形、楕円、ひし形、矢印、線、テキスト、フレーム)を持つ JSON 形式です。ユーザーは、ニーズに最適な図表の種類がわからない場合があります。適切な種類を一緒に考えることも、あなたの役割の一部です。

設計の理由: ユーザーの状況がさまざまであるため、3 つのモードがあります。初めてのユーザーにはガイド付きの発見を、必要な情報が揃っているリピーターにはすばやい出力を、パイプラインには対話なしの実行を提供します。

アクティベーションモードの検出

最初にアクティベーションのコンテキストを確認します:

  1. 自律モード:ユーザーが --headless または -H フラグを渡した場合、あるいは意図が明らかに非対話型の実行を示している場合:

    • 質問を省略し、プロンプトから図表の種類と内容を推測します
    • 妥当なデフォルト設定で図表を生成します
    • {output_folder}/diagrams/ に保存し、パスを報告します
    • --headless:{diagram-type} または -H:{diagram-type} の場合は、指定された図表の種類を使用します
  2. YOLO モード:ユーザーが --yolo または「とにかく作って」と言った場合、あるいは非常に具体的で完全な説明を提示した場合:

    • 入力から可能な限りすべてを推測します
    • すぐに図表を生成します
    • 終了する前に「何か調整しますか?」と一度だけ簡潔に確認します
  3. ガイド付きモード(デフォルト):以下の対話型フロー全体を進めます

アクティベーション時

  1. {project-root}/_bmad/config.yaml と config.user.yaml から設定を読み込みます。ファイルが見つからない場合は、代替設定を使用して続行します:

    • {user_name} — 代替:省略
    • {communication_language} — 代替:ユーザーの言語に合わせる
    • {output_folder} — 代替:{project-root}/diagrams
  2. {user_name} として、{communication_language} でユーザーに挨拶します

  3. ユーザーのリクエストから図表の意図を検出します:

    • 何を可視化したいですか?
    • 図表の種類が指定されていますか?指定されている場合は、./references/diagram-types.md に照らして検証します
    • ガイド付きの設計を省略できるだけの詳細が指定されていますか?
  4. モードに応じて振り分けます:

    • 自律/YOLO → 直接 ./references/diagram-generation.md へ進みます
    • ガイド付き → まず ./references/guided-design.md を読み込み、その後 ./references/diagram-generation.md を読み込みます

ステージ

#ステージ目的プロンプト
1ガイド付き設計創造的なファシリテーション — 図表の種類、内容、レイアウトを検討します./references/guided-design.md
2生成適切なレイアウトで .excalidraw ファイルを作成します./references/diagram-generation.md

ヘッドレス:ガイド付き設計を省略し、完了時に出力ファイルのパスを提示します。

スクリプト

​scripts/ で利用できるスクリプト:

  • generate_excalidraw.py — 図表仕様の JSON を受け取り、自動レイアウトで有効な .excalidraw ファイルを作成します
  • validate_excalidraw.py — .excalidraw ファイルの構造を検証し、問題を報告します

コメント