excalidraw

Excalidraw の図の作成

このスキルを使うと、Excalidraw の JSON 形式で美しい手描き風の図を作成できます。

ファイル形式の概要

Excalidraw ファイル（.excalidraw）は、次の構造を持つ JSON です。

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}

クイックスタート - 要素の作成

すべての要素には、最低限 type、id、x、y とスタイル設定が必要です。

最小構成の長方形

{
  "type": "rectangle",
  "id": "rect-1",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 100,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "seed": 1234,
  "version": 1,
  "versionNonce": 1234,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "roundness": { "type": 3 }
}

テキスト要素

{
  "type": "text",
  "id": "text-1",
  "x": 120,
  "y": 130,
  "width": 160,
  "height": 25,
  "text": "Hello World",
  "fontSize": 20,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle",
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "seed": 5678,
  "version": 1,
  "versionNonce": 5678,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": null,
  "originalText": "Hello World",
  "autoResize": true,
  "lineHeight": 1.25
}

矢印要素

{
  "type": "arrow",
  "id": "arrow-1",
  "x": 300,
  "y": 150,
  "width": 100,
  "height": 0,
  "points": [[0, 0], [100, 0]],
  "startArrowhead": null,
  "endArrowhead": "arrow",
  "startBinding": null,
  "endBinding": null,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "seed": 9012,
  "version": 1,
  "versionNonce": 9012,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false
}

要素の種類

種類	用途
rectangle	ボックス、コンテナー、カード
ellipse	円、楕円、ノード
diamond	判断ポイント、条件
text	ラベル、説明
arrow	接続、フローの方向
line	矢印のないコネクター
freedraw	手描きのパス
image	埋め込み画像
frame	要素のグループ化・枠付け

カラーパレット（推奨）

背景色

• #a5d8ff - ライトブルー
• #b2f2bb - ライトグリーン
• #ffec99 - ライトイエロー
• #ffc9c9 - ライトレッド／ピンク
• #e9ecef - ライトグレー
• #d0bfff - ライトパープル
• #99e9f2 - ライトシアン

線の色

• #1e1e1e - デフォルトの黒
• #1971c2 - 青
• #2f9e44 - 緑
• #f08c00 - オレンジ
• #e03131 - 赤
• #9c36b5 - 紫

スタイル設定

プロパティ	値	説明
fillStyle	"solid", "hachure", "cross-hatch"	塗りつぶしパターン
strokeWidth	1, 2, 4	線の太さ
strokeStyle	"solid", "dashed", "dotted"	線のスタイル
roughness	0, 1, 2	手描き風の度合い（0＝滑らか、2＝粗い）
opacity	0-100	透明度
roundness	{ "type": 3 }	角の丸み

矢印で要素を接続する

図形を矢印で接続するには、バインディングを使用します。

{
  "type": "arrow",
  "id": "arrow-1",
  "startBinding": {
    "elementId": "rect-1",
    "focus": 0,
    "gap": 5
  },
  "endBinding": {
    "elementId": "rect-2",
    "focus": 0,
    "gap": 5
  },
  "points": [[0, 0], [200, 0]]
}

接続する図形には boundElements も追加します。

{
  "type": "rectangle",
  "id": "rect-1",
  "boundElements": [{ "id": "arrow-1", "type": "arrow" }]
}

フォントファミリー

値	フォント
1	手描き風（Virgil）
2	標準（Helvetica）
3	コード（Cascadia）

ベストプラクティス

1. 一意の ID を生成する - rect-1、arrow-2、text-header のような説明的な接頭辞を使います
2. ランダムシードを使う - 一貫したレンダリングのため、各要素には一意の seed が必要です
3. 要素間に十分な間隔を空ける - 要素間に 50〜100px の余白を設けます
4. 要素を整列させる - 視覚的に揃えるため、一貫した x/y 座標を使います
5. 関連する項目をグループ化する - 対応する groupIds 配列を使います
6. カラーパレットを使う - 一貫性を保つため、Excalidraw 組み込みの色を使用します

作成できる図の種類

種類	説明
フローチャート	プロセスフロー、アルゴリズム、決定木
シーケンス図	API 呼び出し、ユーザー操作、メッセージフロー
アーキテクチャ図	システム設計、マイクロサービス、インフラストラクチャ
マインドマップ	ブレインストーミング、概念のマッピング、アイデアの整理
データフロー図	データの移動、システム分析
ERD	データベーススキーマ、エンティティ間の関係
ワイヤーフレーム	UI モックアップ、レイアウトのスケッチ

参考ドキュメント

• diagram-patterns.md - 各種図（フローチャート、シーケンス図、マインドマップ、アーキテクチャなど）に使えるプロフェッショナルなパターン
• examples.md - テンプレートとして使える、完全に動作する JSON の例
• element-reference.md - すべての要素タイプのプロパティリファレンス
• best-practices.md - デザインのヒント、色彩理論、タイポグラフィのガイドライン

美しい図を作成するためのクイックヒント

1. 正式な技術図では roughness: 0、親しみやすいスケッチでは roughness: 1 を使います
2. プロフェッショナルな見た目には fontFamily: 2（Helvetica）を、カジュアルな見た目が求められる場合に限り fontFamily: 1（Virgil）を使います
3. 間隔を統一する - 主要な要素間は 100px、関連項目間は 50px にします
4. 色に意味を持たせる - 情報／入力には青、成功／データには緑、判断には黄色、エラーには赤を使います
5. 矢印の使い分け - アクションには実線、応答／非同期処理には破線を使います