excalidraw-ai

excalidraw-ai

JSON を直接記述して Excalidraw の図を生成します。テンプレートは不要です。すべての要素を自由に制御できます。

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• アーキテクチャ図、フローチャート、マインドマップを作成する
• システム設計、データフロー、プロセスを可視化する
• コード解析やドキュメントから図を生成する
• レイアウトやスタイルを細かく制御して、カスタムの図を作成する

Excalidraw JSON スキーマ

Excalidraw ファイルは、次の構造を持つ JSON オブジェクトです。

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

要素の種類

長方形

{
  "id": "unique-id-1",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 100,
  "strokeColor": "#1971c2",
  "backgroundColor": "#a5d8ff",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "angle": 0,
  "seed": 12345,
  "isDeleted": false
}

楕円

{
  "id": "unique-id-2",
  "type": "ellipse",
  "x": 100,
  "y": 100,
  "width": 150,
  "height": 100,
  "strokeColor": "#7c3aed",
  "backgroundColor": "#ede9fe",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "roughness": 1
}

ひし形

{
  "id": "unique-id-3",
  "type": "diamond",
  "x": 100,
  "y": 100,
  "width": 120,
  "height": 120,
  "strokeColor": "#dc2626",
  "backgroundColor": "#fee2e2",
  "fillStyle": "solid"
}

テキスト

{
  "id": "unique-id-4",
  "type": "text",
  "x": 110,
  "y": 140,
  "width": 180,
  "height": 25,
  "text": "Your Label Here",
  "fontSize": 20,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle",
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent"
}

矢印

{
  "id": "unique-id-5",
  "type": "arrow",
  "x": 300,
  "y": 150,
  "width": 100,
  "height": 50,
  "strokeColor": "#1971c2",
  "strokeWidth": 2,
  "points": [[0, 0], [100, 50]],
  "startBinding": {
    "elementId": "source-element-id",
    "focus": 0.5,
    "gap": 5
  },
  "endBinding": {
    "elementId": "target-element-id",
    "focus": 0.5,
    "gap": 5
  },
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

線

{
  "id": "unique-id-6",
  "type": "line",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 0,
  "strokeColor": "#868e96",
  "strokeWidth": 1,
  "points": [[0, 0], [200, 0]],
  "startArrowhead": null,
  "endArrowhead": null
}

要素プロパティのリファレンス

プロパティ	型	説明
id	string	一意の識別子（UUID などを使用）
type	string	rectangle、ellipse、diamond、text、arrow、line
x、y	number	位置の座標
width、height	number	寸法
strokeColor	string	枠線の色（16 進数）
backgroundColor	string	塗りつぶしの色（16 進数）または "transparent"
fillStyle	string	"solid"、"hachure"、"cross-hatch"
strokeWidth	number	線の太さ（1、2、4）
strokeStyle	string	"solid"、"dashed"、"dotted"
roughness	number	0 = 鋭角、1 = 標準、2 = スケッチ風
opacity	number	0～100
angle	number	ラジアン単位の回転角度
groupIds	array	要素 ID をまとめてグループ化
seed	number	手描き風の効果に使用するランダムシード

テキストのプロパティ

プロパティ	型	説明
text	string	テキストの内容
fontSize	number	フォントサイズ（ピクセル単位）
fontFamily	number	1 = Virgil（手描き風）、2 = Helvetica、3 = Cascadia
textAlign	string	"left"、"center"、"right"
verticalAlign	string	"top"、"middle"

矢印のプロパティ

プロパティ	型	説明
points	array	要素の原点を基準とする [x, y] 座標の配列
startBinding	object	接続元要素への接続
endBinding	object	接続先要素への接続
startArrowhead	string	null、"arrow"、"bar"、"dot"、"triangle"
endArrowhead	string	null、"arrow"、"bar"、"dot"、"triangle"

カラーパレットのリファレンス

コンポーネント別の色（アーキテクチャ図に推奨）

コンポーネントの種類	枠線	背景	用途
データベース	#7c3aed	#ede9fe	PostgreSQL、MySQL、MongoDB
キャッシュ	#dc2626	#fee2e2	Redis、Memcached
キュー	#16a34a	#dcfce7	Kafka、RabbitMQ、SQS
ロードバランサー	#0891b2	#cffafe	Nginx、HAProxy、ALB
ゲートウェイ	#475569	#f1f5f9	API Gateway、Kong
CDN	#06b6d4	#e0f2fe	CloudFront、Fastly
認証	#e11d48	#ffe4e6	OAuth、IAM、Cognito
ストレージ	#d97706	#fef3c7	S3、Blob Storage
サービス	#2563eb	#dbeafe	バックエンドサービス、API
コンテナ	#0284c7	#bae6fd	Docker、Kubernetes
関数	#f59e0b	#fef3c7	Lambda、Serverless
モニタリング	#84cc16	#ecfccb	Prometheus、Grafana
Web アプリ	#4f46e5	#e0e7ff	React、Vue、フロントエンド
モバイル	#6366f1	#eef2ff	iOS、Android

テーマカラー

モダン（デフォルト）

• プライマリ：#1971c2 / #e7f5ff
• ニュートラル：#64748b / #f1f5f9

スケッチ風（手描き）

• プライマリ：#495057 / #f8f9fa
• roughness: 2 と fontFamily: 3 を使用します

テクニカル

• プライマリ：#2f9e44 / #ebfbee
• 接続には strokeStyle: "dashed" を使用します

アイコンライブラリ（合計305コンポーネント）

assets/ ディレクトリ内の .excalidrawlib ファイルで、プロフェッショナルなアイコンを利用できます。

ライブラリ	コンポーネント数	内容
aws-architecture-icons.excalidrawlib	248	AWS サービスのアイコン（Lambda、S3、EC2、RDS、DynamoDB、SQS など）
system-design.excalidrawlib	24	システム設計要素（サーバー、データベース、ストレージなど）
drwnio.excalidrawlib	18	Draw.io スタイルのアイコン
system-design-template.excalidrawlib	8	事前構築済みテンプレート（手順、フロー、db など）
software-architecture.excalidrawlib	7	ソフトウェアアーキテクチャのコンポーネント

ライブラリのコンポーネントを使用する

ライブラリファイルには、図に直接埋め込める要素の配列が含まれています。各ライブラリアイテムは、1つのコンポーネントを構成する Excalidraw 要素の配列です。

使用するには、ライブラリの JSON を解析し、必要なコンポーネントを見つけて、位置を調整し、図の elements 配列に含めます。

レイアウトのガイドライン

アーキテクチャ図のレイアウト

コンポーネントをレイヤーに分けて配置します（上から下へ）。

Layer 1: Client/External (y: 100)
Layer 2: Edge/CDN (y: 280)
Layer 3: Gateway/Load Balancer (y: 460)
Layer 4: Services (y: 640)
Layer 5: Data/Cache (y: 820)
Layer 6: Infrastructure (y: 1000)

間隔の推奨値：

• コンポーネント間の水平間隔：240px
• レイヤー間の垂直間隔：180px
• コンポーネントの幅：180～220px
• コンポーネントの高さ：80～100px

フローチャートのレイアウト

左から右、または上から下に配置します。

• 手順間の間隔：200px
• プロセスには長方形を使用します
• 判断にはひし形を使用します
• 開始／終了には楕円を使用します

マインドマップのレイアウト

中心から放射状に配置します。

• 中心ノードは (400, 300)
• 子ノードは半径250pxの位置
• 角度を計算して均等に配置します

完全な例

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "api-gateway",
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 180,
      "height": 80,
      "strokeColor": "#475569",
      "backgroundColor": "#f1f5f9",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 0,
      "opacity": 100,
      "groupIds": ["group-1"],
      "seed": 1234
    },
    {
      "id": "api-gateway-label",
      "type": "text",
      "x": 140,
      "y": 130,
      "width": 100,
      "height": 25,
      "text": "API Gateway",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "strokeColor": "#1e1e1e",
      "groupIds": ["group-1"]
    },
    {
      "id": "redis",
      "type": "diamond",
      "x": 100,
      "y": 280,
      "width": 180,
      "height": 100,
      "strokeColor": "#dc2626",
      "backgroundColor": "#fee2e2",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 0,
      "seed": 5678
    },
    {
      "id": "redis-label",
      "type": "text",
      "x": 155,
      "y": 320,
      "width": 70,
      "height": 20,
      "text": "Redis",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "center",
      "strokeColor": "#1e1e1e"
    },
    {
      "id": "arrow-1",
      "type": "arrow",
      "x": 190,
      "y": 180,
      "width": 0,
      "height": 100,
      "strokeColor": "#64748b",
      "strokeWidth": 2,
      "points": [[0, 0], [0, 100]],
      "startBinding": {"elementId": "api-gateway", "focus": 0.5, "gap": 5},
      "endBinding": {"elementId": "redis", "focus": 0.5, "gap": 5},
      "endArrowhead": "arrow"
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}

出力

図を .excalidraw または .json ファイルとして保存します。次の用途に使用できます。

• excalidraw.com に直接インポートする
• ドキュメントやウェブアプリに埋め込む
• Excalidraw のエクスポート機能で PNG／SVG に変換する

AI エージェント向けのヒント

1. 一意の ID を生成する：各要素に UUID または連番の ID を使用します
2. 関連する要素をグループ化する：groupIds を使用して、図形とラベルを一緒に保ちます
3. 矢印にはバインディングを使用する：startBinding と endBinding を使用して、矢印を要素に接続します
4. 一貫したスタイルを適用する：コンポーネントの種類に応じてカラーパレットを使用します
5. テキストの位置を計算する：テキストの長さに応じて x/y を調整し、図形内でテキストを中央揃えにします
6. シード値を設定する：手描き風の描画を一貫させるため、seed: hash(id) を使用します