excalidraw

Excalidraw 図表ジェネレーター

Excalidraw 互換の JSON 図表を作成します。.excalidraw.json ファイルを出力します。

JSON スキーマ

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

座標系

• 原点：左上隅（0, 0）
• X 軸：右に向かって増加
• Y 軸：下に向かって増加
• 単位：ピクセル

グリッドベースのレイアウトシステム

位置合わせには 20px のグリッドを使用します。標準的な位置：

GRID_UNIT = 20
COLUMN_WIDTH = 200    # Element + gap
ROW_HEIGHT = 150      # Element + gap

Position formula:
  x = START_X + (column * COLUMN_WIDTH)
  y = START_Y + (row * ROW_HEIGHT)

Recommended START_X = 50, START_Y = 100

標準的な要素サイズ

要素	幅	高さ	用途
小さいボックス	120	60	ラベル、簡単なステップ
標準ボックス	160	80	プロセスのステップ
大きいボックス	200	100	詳細なノード
横長のボックス	240	80	長いテキスト
ひし形	100	100	判断ポイント
円	80	80	開始／終了ノード
アイコン付きの円	90	80	絵文字付き

テキストの中央揃えの計算式

重要：図形の中でテキストを中央揃えにするには：

text_x = shape_x + (shape_width - text_width) / 2
text_y = shape_y + (shape_height - text_height) / 2

テキストサイズの目安

フォントサイズ	文字幅	行の高さ	用途
11	~6px	15px	ラベル、注釈
12	~7px	16px	補足テキスト
14	~8px	18px	本文
16	~9px	20px	主要テキスト
18	~10px	24px	見出し
20	~11px	26px	タイトル
28	~16px	35px	アイコン／絵文字

text_width の推定値：char_count * char_width text_height の推定値：line_count * line_height

中央揃えの例

Shape: x=100, y=100, width=160, height=80
Text: "Process" (7 chars), fontSize=16

text_width = 7 * 9 = 63
text_height = 1 * 20 = 20
text_x = 100 + (160 - 63) / 2 = 148.5 ≈ 148
text_y = 100 + (80 - 20) / 2 = 130

要素の種類

共通プロパティ（すべてに必須）

{
  "id": "unique-id",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 160,
  "height": 80,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "roughness": 1,
  "opacity": 100,
  "angle": 0,
  "seed": 100,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "link": null,
  "locked": false
}

種類固有のプロパティ

長方形：角を丸くするには "roundness": {"type": 3} を追加します

テキスト：

{
  "type": "text",
  "text": "Content\nLine 2",
  "fontSize": 16,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle"
}

• fontFamily：1=Virgil（手書き風）、2=Helvetica、3=Cascadia（等幅）

矢印／線：

{
  "type": "arrow",
  "points": [[0, 0], [100, 0]],
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

• ポイントは要素の x,y を基準とします
• 矢印の先端：null、"arrow"、"bar"、"dot"、"triangle"

矢印の配置

水平矢印（左から右）

From shape at (x1, y1, w1, h1) to shape at (x2, y2, w2, h2):

arrow_x = x1 + w1           # Right edge of source
arrow_y = y1 + h1/2         # Vertical center
gap = x2 - (x1 + w1)        # Space between shapes
points = [[0, 0], [gap, 0]]

垂直矢印（上から下）

arrow_x = x1 + w1/2         # Horizontal center
arrow_y = y1 + h1           # Bottom edge of source
gap = y2 - (y1 + h1)
points = [[0, 0], [0, gap]]

斜め／曲線の矢印

points = [[0, 0], [dx/2, dy], [dx, dy]]  # Curved path

カラーパレット

色	線	背景	用途
青	#1971c2	#a5d8ff	主要、情報
緑	#2f9e44	#b2f2bb	成功、開始
オレンジ	#e8590c	#ffc9c9	警告、アクション
赤	#e03131	#ffc9c9	エラー、終了
紫	#9c36b5	#eebefa	特殊、ループ
黄	#f08c00	#ffec99	強調
ティール	#099268	#96f2d7	補助
グレー	#868e96	#dee2e6	中立、ラベル
黒	#1e1e1e	-	テキスト、境界線

Z オーダー（要素配列の順序）

要素は配列の順序で描画されます。最初の要素が背面、最後の要素が前面になります。

正しい順序：

1. 背景の図形（コンテナー、フレーム）
2. 接続線／矢印
3. 前景の図形（ノード、ボックス）
4. テキストラベル
5. アイコン／オーバーレイ

レイアウトパターン

水平フロー（左から右）

COL_GAP = 60  # Gap between elements

Element 1: x=50,  y=100, w=160, h=80
Arrow 1:   x=210, y=140, points=[[0,0],[60,0]]
Element 2: x=270, y=100, w=160, h=80
Arrow 2:   x=430, y=140, points=[[0,0],[60,0]]
Element 3: x=490, y=100, w=160, h=80

垂直フロー（上から下）

ROW_GAP = 50

Element 1: x=100, y=50,  w=160, h=80
Arrow 1:   x=180, y=130, points=[[0,0],[0,50]]
Element 2: x=100, y=180, w=160, h=80

分岐の判断（ひし形）

Diamond:    x=300, y=200, w=100, h=100
Center:     (350, 250)

Yes path (up-right):
  arrow_x=350, arrow_y=200
  points=[[0,0], [0,-50], [100,-50]]

No path (down-right):
  arrow_x=350, arrow_y=300
  points=[[0,0], [0,50], [100,50]]

フィードバックループ（戻り矢印）

From bottom-right back to left:
  Start: (800, 400)
  points=[
    [0, 0],        # Start
    [0, 80],       # Down
    [-400, 80],    # Left
    [-400, -150]   # Up to target
  ]

ノードの完全な例

[
  {
    "id": "node1-box",
    "type": "rectangle",
    "x": 100, "y": 100, "width": 160, "height": 80,
    "strokeColor": "#1971c2",
    "backgroundColor": "#a5d8ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "roughness": 1,
    "opacity": 100,
    "angle": 0,
    "seed": 100,
    "version": 1,
    "isDeleted": false,
    "boundElements": [{"id": "arrow1", "type": "arrow"}],
    "roundness": {"type": 3},
    "link": null,
    "locked": false
  },
  {
    "id": "node1-text",
    "type": "text",
    "x": 130, "y": 130,
    "width": 100, "height": 20,
    "text": "Process Step",
    "fontSize": 16,
    "fontFamily": 1,
    "textAlign": "center",
    "verticalAlign": "middle",
    "strokeColor": "#1e1e1e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "roughness": 1,
    "opacity": 100,
    "angle": 0,
    "seed": 101,
    "version": 1,
    "isDeleted": false,
    "boundElements": null,
    "link": null,
    "locked": false
  }
]

配置チェックリスト

生成する前に：

1. ☐ グリッドを定義する：START_X、START_Y、COLUMN_WIDTH、ROW_HEIGHT
2. ☐ すべての要素の行／列位置をリストアップする
3. ☐ 数式を使って正確な x,y を計算する
4. ☐ 中央揃えの計算式を使ってテキスト位置を計算する
5. ☐ 矢印の始点と相対的な終点を計算する
6. ☐ Z オーダーに合わせて要素を正しい順序に並べる
7. ☐ 一意の ID と連番のシードを割り当てる

テンプレート

• 基本的なフローチャート：assets/flowchart-template.excalidraw.json
• 処理ループ：references/processing-loop-template.md
• 要素の仕様：references/elements.md

出力

1. .excalidraw.json として保存します
2. /mnt/user-data/outputs/ にコピーします
3. ユーザーに「excalidraw.com で開く → メニュー → 開く」と伝えます