excalidraw

Excalidraw 図

Excalidraw 形式を使用して、手描き風の図、フローチャート、アーキテクチャ図、マインドマップを作成します。図は Canvas パネルにインタラクティブに表示されます。

このスキルを使う場面

ユーザーが生の数値ではなく、構造、流れ、関係性を視覚化したい場合は、create_excalidraw_diagram を使用します。

このスキルの用途…	可視化スキルの用途…
システムアーキテクチャ図	四半期ごとの売上高
フローチャートまたは決定木	アンケートの回答割合
シーケンス図／インタラクション図	株価の推移
マインドマップまたは概念マップ	市場シェアの内訳
図形、ボックス、矢印、ラベル	x/y またはセグメント／値のデータ全般

図の種類

ユーザーの意図に基づいて選択します。スイムレーン図、クラス図、シーケンス図、ER 図、DFD 図については、生成前に diagram-patterns.md を読んでください。

意図	種類	パターン
プロセスの手順、ワークフロー、意思決定	フローチャート	四角形＋ひし形＋矢印（例を参照）
システムのコンポーネント、依存関係	アーキテクチャ図	ゾーンの四角形＋ボックス＋矢印
概念の階層、ブレインストーミング	マインドマップ	中央ノード＋放射状の分岐矢印
エンティティの接続、関連付け	関係図	ボックス＋ラベル付き矢印
部門横断的なワークフロー、アクターの責任	スイムレーン図	diagram-patterns.md
OOP のクラス構造、継承	クラス図	diagram-patterns.md
時系列でのオブジェクト間のやり取り	シーケンス図	diagram-patterns.md
データベースのエンティティと関係	ER 図	diagram-patterns.md
データ変換、データの移動	DFD	diagram-patterns.md

利用可能なツール

• create_excalidraw_diagram(elements, title, background_color)：Excalidraw の要素 JSON から図を生成します

カラーパレット

すべての図で、以下の色を一貫して使用してください。

プライマリカラー（線、矢印、テキスト）

名前	Hex	用途
青	#4a9eed	主なアクション、リンク
アンバー	#f59e0b	警告、ハイライト
緑	#22c55e	成功、肯定
赤	#ef4444	エラー、否定
紫	#8b5cf6	アクセント、特別な項目
シアン	#06b6d4	情報、二次的な要素

塗りつぶし色（図形の背景）

色	Hex	適した用途
ライトブルー	#a5d8ff	入力、ソース、プライマリノード
ライトグリーン	#b2f2bb	成功、出力、完了
ライトオレンジ	#ffd8a8	警告、保留中、外部
ライトパープル	#d0bfff	処理、ミドルウェア
ライトレッド	#ffc9c9	エラー、重大
ライトイエロー	#fff3bf	メモ、意思決定
ライトティール	#c3fae8	ストレージ、データ

背景ゾーンの色（レイヤーのグループ化には opacity: 35 を使用）

色	Hex	適した用途
青のゾーン	#dbe4ff	UI／フロントエンド層
紫のゾーン	#e5dbff	ロジック／エージェント層
緑のゾーン	#d3f9d8	データ／ツール層

要素の形式

必須フィールド（すべての要素）

type、id（一意の文字列）、x、y、width、height

デフォルト値（これらの値を使う場合は省略可能）

strokeColor="#1e1e1e"、backgroundColor="transparent"、fillStyle="solid"、strokeWidth=2、roughness=1、opacity=100

図形の種類

長方形

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid" }

• 角を丸くするには roundness: { type: 3 } を指定します

楕円

{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }

ひし形

{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }

図形上のラベル（推奨 — テキスト要素を別途用意する必要はありません）

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "label": { "text": "My Label", "fontSize": 20 } }

• 長方形、楕円、ひし形で使用できます
• テキストは自動的に中央揃えされ、コンテナーのサイズもテキストに合わせて自動調整されます
• 矢印でも使用できます："label": { "text": "connects" }

単独のテキスト（タイトル、注釈のみ）

{ "type": "text", "id": "t1", "x": 150, "y": 50, "text": "Title", "fontSize": 24 }

• x は左端です。位置 cx を中央にするには、x = cx - text.length × fontSize × 0.25 を設定します

矢印

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
  "points": [[0,0],[150,0]], "endArrowhead": "arrow",
  "startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
  "endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] } }

• points：要素の x, y を基準とした [dx, dy] のオフセット
• endArrowhead：null | "arrow" | "bar" | "dot" | "triangle"
• strokeStyle："solid" | "dashed" | "dotted"
• バインディング用の fixedPoint：上 [0.5,0]、下 [0.5,1]、左 [0,0.5]、右 [1,0.5]

疑似要素（描画されません — 動作を制御します）

cameraUpdate — ビューポートを設定します

{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 }

• x, y：表示領域の左上隅（シーン座標）
• 比率は必ず4:3にしてください：400×300、600×450、800×600、1200×900、1600×1200
• 図を表示範囲に収めるため、必ず cameraUpdate を最初の要素として配置してください
• id は不要です

delete — IDで要素を削除します

{ "type": "delete", "ids": "r1,a1,t2" }

• 削除する要素のIDをカンマ区切りで指定します
• 既存の図を更新する際、置き換える要素を追加する前に削除するために使用します
• 削除したIDは再利用せず、置き換える要素には新しいIDを割り当ててください

カメラサイズのガイド

図は幅約700pxで表示されます。次の標準サイズを使用してください：

サイズ	幅 × 高さ	使用する場面
S	400 × 300	要素が2～3個の拡大図
M	600 × 450	小規模な図のセクション
L	800 × 600	標準（デフォルト）
XL	1200 × 900	大規模な概要図
XXL	1600 × 1200	非常に複雑な図

フォントサイズのルール：

• 本文テキスト／ラベル：最小16
• タイトル／見出し：最小20
• 注釈：最小14（控えめに使用してください）
• カメラがXL／XXLの場合：最小値を約4px大きくしてください

要素サイズのルール：

• ラベル付きの長方形／楕円：最小120 × 60
• 要素間には20～30pxの間隔を空けてください

既存の図を更新する

ユーザーから図の変更を依頼された場合、現在の要素がコンテキストに含まれます。更新後の要素配列全体を返してください：

• 変更しない要素には同じ id を使用します
• 変更する要素のフィールドを修正します
• 削除する要素は省略します
• これまで使用されていない一意のIDを持つ新しい要素を追加します

例：フローチャート

[
  { "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 },
  { "type": "rectangle", "id": "el-1",
    "x": 300, "y": 60, "width": 160, "height": 60,
    "strokeColor": "#4a9eed", "backgroundColor": "#a5d8ff",
    "fillStyle": "solid", "roundness": { "type": 3 },
    "label": { "text": "Start", "fontSize": 18 } },
  { "type": "diamond", "id": "el-2",
    "x": 280, "y": 170, "width": 200, "height": 90,
    "strokeColor": "#f59e0b", "backgroundColor": "#fff3bf",
    "fillStyle": "solid",
    "label": { "text": "Decision?", "fontSize": 16 } },
  { "type": "arrow", "id": "el-3",
    "x": 380, "y": 120, "width": 0, "height": 50,
    "points": [[0,0],[0,50]], "endArrowhead": "arrow",
    "startBinding": { "elementId": "el-1", "fixedPoint": [0.5, 1] },
    "endBinding": { "elementId": "el-2", "fixedPoint": [0.5, 0] } },
  { "type": "rectangle", "id": "el-4",
    "x": 300, "y": 320, "width": 160, "height": 60,
    "strokeColor": "#22c55e", "backgroundColor": "#b2f2bb",
    "fillStyle": "solid", "roundness": { "type": 3 },
    "label": { "text": "End", "fontSize": 18 } },
  { "type": "arrow", "id": "el-5",
    "x": 380, "y": 260, "width": 0, "height": 60,
    "points": [[0,0],[0,60]], "endArrowhead": "arrow",
    "startBinding": { "elementId": "el-2", "fixedPoint": [0.5, 1] },
    "endBinding": { "elementId": "el-4", "fixedPoint": [0.5, 0] } }
]

よくある間違いとその回避方法

• カメラには正確な4:3の比率を使用してください — 4:3以外のビューポートでは歪みが発生します
• 必ずcameraUpdateから始めてください — 指定しないと、ビューポートが予測できません
• 要素配列にコメントを入れないでください — elements は有効なJSONである必要があります。配列内に // や /* */ のコメントを追加すると、JSONの解析に失敗します
• テキストのコントラスト — 白地に薄いグレーを使用しないでください。白地で使用するテキスト色の最小値は #757575 です。明るい塗りつぶしには暗い色合い（#22c55e ではなく #15803d）を使用してください
• 矢印のラベルには余裕が必要です — 長いラベルは短い矢印からはみ出します。ラベルを短くするか、矢印の幅を広げてください
• 絵文字は使用しないでください — Excalidrawのフォントでは絵文字を表示できません
• 要素の重なり — ラベル、ボックス、領域のオーバーレイが互いに重ならないように確認してください（最小20pxの間隔が必要です）
• カメラの余白 — カメラのフレーム内に余白を設け、カメラサイズをコンテンツサイズと完全に一致させないでください

UIガイダンス（tools-configより）

要素の形式：

• 必須項目：type、x、y、id
• 図形（rectangle／ellipse／diamond）：width、heightを追加します
• 矢印／線：width、height、points [[0,0],[dx,dy]]を追加します
• テキスト：text、fontSizeを追加します
• 中央揃えのテキストには、図形のlabelフィールドを使用します
• pointsによる経路指定を使い、矢印要素で図形同士を接続します