excalidraw-diagram

Excalidraw 図表ジェネレーター

テキストコンテンツから、複数の出力形式で Excalidraw 図表を作成します。

出力モード

ユーザーのトリガーワードに応じて出力モードを選択します。

トリガーワード	出力モード	ファイル形式	用途
Excalidraw、画图、流程图、思维导图	Obsidian（デフォルト）	.md	Obsidian で直接開く
标准Excalidraw、standard excalidraw	Standard	.excalidraw	excalidraw.com で開く／編集する／共有する
Excalidraw动画、动画图、animate	Animated	.excalidraw	excalidraw-animate にドラッグしてアニメーションを生成する

ワークフロー

1. トリガーワードから出力モードを検出します（上記の「出力モード」表を参照）
2. コンテンツを分析し、概念、関係性、階層を特定します
3. 図表の種類を選択します（下記の「図表の種類」を参照）
4. Excalidraw JSON を生成します（Animated モードの場合はアニメーション順序を追加）
5. モードに応じた正しい形式で出力します
6. 現在の作業ディレクトリに自動的に保存します
7. ファイルパスと使用方法をユーザーに通知します

出力形式

モード 1：Obsidian 形式（デフォルト）

以下の構造に厳密に従って出力し、変更を加えてはいけません。

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

# Excalidraw Data

## Text Elements
%%
## Drawing
\`\`\`json
{JSON 完整数据}
\`\`\`
%%

重要なポイント：

• Frontmatter に tags: [excalidraw] を必ず含めます
• 警告メッセージを省略せずに含めます
• JSON を %% マーカーで囲みます
• excalidraw-plugin: parsed 以外の frontmatter 設定は使用できません
• ファイル拡張子：.md

モード 2：Standard Excalidraw 形式

純粋な JSON ファイルとして直接出力し、excalidraw.com で開けるようにします。

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

重要なポイント：

• source には https://excalidraw.com を使用します（Obsidian プラグインではありません）
• Markdown のラッパーを付けない純粋な JSON
• ファイル拡張子：.excalidraw

モード 3：Animated Excalidraw 形式

Standard 形式と同じですが、各要素に customData.animate フィールドを追加して、アニメーション順序を制御します。

{
  "id": "element-1",
  "type": "rectangle",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他标准字段
}

アニメーション順序のルール：

• order：アニメーションの再生順序（1、2、3...）。数字が小さいほど先に表示されます
• duration：その要素の描画時間（ミリ秒）。デフォルトは 500 です
• 同じ order の要素は同時に表示されます
• 推奨順序：タイトル → 主な枠組み → 接続線 → 詳細テキスト

使用方法：

1. .excalidraw ファイルを生成します
2. https://dai-shi.github.io/excalidraw-animate/ にドラッグします
3. Animate をクリックしてプレビューし、SVG または WebM としてエクスポートします

ファイル拡張子：.excalidraw

---

図表の種類と選択ガイド

理解しやすさと視覚的な魅力を高めるために、適切な図表形式を選択します。

種類	英語	使用場面	作成方法
フローチャート	Flowchart	手順の説明、ワークフロー、タスクの実行順序	各手順を矢印でつなぎ、流れを明確に示します
マインドマップ	Mind Map	概念の展開、テーマの分類、アイデアの記録	中心を核として外側に放射状に広げる構造にします
階層図	Hierarchy	組織構造、コンテンツの階層化、システムの分解	上から下、または左から右に階層ノードを構築します
関係図	Relationship	要素間の影響、依存関係、相互作用	図形間を線でつなぎ、関連性を矢印や説明で示します
比較図	Comparison	2 つ以上の案や見解の比較分析	左右 2 列または表形式にして、比較項目を明示します
タイムライン図	Timeline	出来事の進展、プロジェクトの進捗、モデルの進化	時間軸に沿って、重要な時点と出来事を示します
マトリックス図	Matrix	2 つの軸による分類、タスクの優先順位付け、位置付け	X 軸と Y 軸の 2 つの次元を設定し、座標平面上に配置します
自由配置	Freeform	散在するコンテンツ、アイデアの記録、初期段階の情報収集	構造に縛られず、ブロックや矢印を自由に配置します

デザインルール

テキストと形式

• すべてのテキスト要素には fontFamily: 5（Excalifont 手書きフォント）を使用します
• テキスト内の二重引用符の置換ルール：" を 『』 に置き換えます
• テキスト内の丸括弧の置換ルール：() を 「」 に置き換えます
• フォントサイズのルール（厳守すべき下限。この値を下回ると通常のズーム倍率では読めません）：
  • タイトル：20～28px（最小 20px）
  • サブタイトル：18～20px
  • 本文／ラベル：16～18px（最小 16px）
  • 補足注釈：14px（重要度の低い補助説明に限り、使用は慎重にします）
  • 14px 未満は絶対に使用しないでください
• 行の高さ：すべてのテキストで lineHeight: 1.25 を使用します
• テキストの中央揃えの見積もり：独立したテキスト要素は自動的に中央揃えされないため、x 座標を手動で計算する必要があります：
  • テキスト幅の見積もり：estimatedWidth = text.length * fontSize * 0.5（CJK 文字は * 1.0）
  • 中央揃えの計算式：x = centerX - estimatedWidth / 2
  • 例：テキスト "Hello"（5 文字、fontSize 20）を x=300 の位置で中央揃えにする場合 → estimatedWidth = 5 * 20 * 0.5 = 50 → x = 300 - 25 = 275

レイアウトとデザイン

• キャンバスの範囲：すべての要素を 0～1200 x 0～800 の範囲内に配置することを推奨します
• 図形の最小サイズ：テキスト付きの長方形／楕円は 120x60px 以上にします
• 要素間の間隔：重なりを防ぐため、最小 20～30px の間隔を空けます
• 階層を明確にする：異なる色や形を使って、情報の階層を区別します
• 図形要素：長方形、円、矢印などを適切に使って情報を整理します
• 絵文字の使用禁止：図表のテキストに絵文字を使用しないでください。視覚的な目印が必要な場合は、単純な図形（円、四角形、矢印）や色分けを使用してください

カラーパレット

文字色（テキストの strokeColor）：

用途	色値	説明
タイトル	#1e40af	濃い青
サブタイトル／接続線	#3b82f6	明るい青
本文	#374151	濃いグレー（白背景では #757575 より薄くしない）
強調／重要箇所	#f59e0b	ゴールド

図形の塗りつぶし色（backgroundColor、fillStyle: "solid"）：

色値	意味	適用場面
#a5d8ff	淡い青	入力、データソース、主要ノード
#b2f2bb	淡い緑	成功、出力、完了
#ffd8a8	淡いオレンジ	警告、保留中、外部依存関係
#d0bfff	淡い紫	処理中、ミドルウェア、特殊項目
#ffc9c9	淡い赤	エラー、重要、アラート
#fff3bf	淡い黄色	備考、判断、計画
#c3fae8	淡い青緑	ストレージ、データ、キャッシュ
#eebefa	淡いピンク	分析、指標、統計

領域の背景色（大きな長方形に opacity: 30 を指定。階層図で使用）：

色値	意味
#dbe4ff	フロントエンド／UI 層
#e5dbff	ロジック／処理層
#d3f9d8	データ／ツール層

コントラストのルール：

• 白背景で文字色を #757575 より薄くしないでください。薄すぎると読めなくなります
• 淡い色で塗りつぶした図形には、濃い色の文字色を使用してください（例：淡い緑の背景には #22c55e ではなく #15803d を使用）
• 白背景に薄いグレーの文字色（#b0b0b0、#999）を使用しないでください

参照：references/excalidraw-schema.md

JSON 構造

Obsidian モード：

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

Standard／Animated モード：

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

要素テンプレート

各要素には以下のフィールドが必要です（frameId、index、versionNonce、rawText などの追加フィールドは追加しないでください。excalidraw.com で問題が発生する可能性があります。boundElements は [] ではなく null、updated はタイムスタンプではなく 1 にしてください）：

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

strokeStyle の値："solid"（実線、デフォルト）| "dashed"（破線）| "dotted"（点線）。破線は、オプションの経路、非同期フロー、弱い関連性などの表現に適しています。

テキスト要素には以下を追加します：

{
  "text": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

Animated モードでは、追加で customData フィールドを指定します：

{
  "id": "title-1",
  "type": "text",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他字段
}

すべての要素タイプについては、references/excalidraw-schema.md を参照してください。

---

その他の技術要件

テキスト要素の処理

• Markdown の ## Text Elements セクションは必ず空欄にし、区切りとして %% のみを使用します
• Obsidian ExcaliDraw プラグインが、JSON データからテキスト要素を自動入力します
• すべてのテキスト内容を手動で列挙する必要はありません

座標とレイアウト

• 座標系：左上が原点 (0,0) です
• 推奨範囲：すべての要素を 0-1200 x 0-800 ピクセルの範囲内に配置します
• 要素 ID：各要素に一意の id が必要です（「title」「box1」などの文字列を使用できます）

すべての要素に必要なフィールド

重要：frameId、index、versionNonce、rawText フィールドは含めないでください。boundElements は [] ではなく null、updated はタイムスタンプではなく 1 にしてください。

{
  "id": "unique-identifier",
  "type": "rectangle|text|arrow|ellipse|diamond",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#color-hex",
  "backgroundColor": "transparent|#color-hex",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid|dashed|dotted",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "updated": 1,
  "link": null,
  "locked": false
}

テキスト固有のプロパティ

テキスト要素（type: "text"）には、追加のプロパティが必要です（rawText は含めないでください）：

{
  "text": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

appState の設定

"appState": {
  "gridSize": null,
  "viewBackgroundColor": "#ffffff"
}

files フィールド

"files": {}

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

• 文字の位置ずれ — 独立したテキスト要素の x は左端の座標であり、中央の座標ではありません。手動で中央揃えの数式を使用しないと、文字が片側にずれます
• 要素の重なり — y 座標が近い要素は重なりやすくなります。新しい要素を配置する前に、周囲の要素との間に 20px 以上の間隔があることを確認してください
• キャンバスの余白不足 — 内容をキャンバスの端に寄せないでください。周囲に 50-80px のパディングを設けます
• タイトルが図の中央に配置されていない — タイトルは、固定の x=0 ではなく、下の図全体の幅の中央に配置します
• 矢印ラベルがはみ出す — 長い文字列のラベル（例："ATP + NADPH"）は短い矢印からはみ出します。ラベルを短くするか、矢印を長くしてください
• コントラスト不足 — 白背景では薄い色の文字がほとんど見えません。文字色は #757575 より薄くせず、有色の文字には濃い色のバリエーションを使用してください
• フォントサイズが小さすぎる — 14px 未満の文字は通常の拡大率では読めません。本文は最低 16px にしてください

実装上の注意

自動保存とファイル生成のワークフロー

Excalidraw の図を生成する際は、以下の手順を必ず自動で実行してください：

1. 適切な図の種類を選択する

• ユーザーが提供した内容の特性に基づき、上記の「図の種類と選択ガイド」の表を参照します
• 内容の中心的な目的を分析し、最適な視覚化形式を選択します

2. 意味のあるファイル名を生成する

出力モードに応じてファイル拡張子を選択します：

モード	ファイル名の形式	例
Obsidian	[テーマ].[種類].md	商业模式.relationship.md
Standard	[テーマ].[種類].excalidraw	商业模式.relationship.excalidraw
Animated	[テーマ].[種類].animate.excalidraw	商业模式.relationship.animate.excalidraw

• わかりやすさを高めるため、中国語を優先して使用します

3. Write ツールを使用してファイルを自動保存する

• 保存場所：現在の作業ディレクトリ（環境変数を自動検出）
• 完全なパス：{current_directory}/[filename].md
• これにより、パスをハードコードすることなく柔軟に移行できます

4. Markdown 構造が完全に正しいことを確認する

以下の形式で必ず生成してください（一切変更しないでください）：

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

# Excalidraw Data

## Text Elements
%%
## Drawing
\`\`\`json
{完整的 JSON 数据}
\`\`\`
%%

5. JSON データの要件

• 完全な Excalidraw JSON 構造を含めます
• すべてのテキスト要素に fontFamily: 5 を使用します
• テキスト内の " は 『』 に置き換えます
• テキスト内の () は 「」 に置き換えます
• JSON 形式が有効であり、構文チェックに合格する必要があります
• すべての要素に一意の id を設定します
• appState と files: {} フィールドを含めます

6. ユーザーへの報告と確認

ユーザーに以下を報告します：

• 図を生成したこと
• 正確な保存場所
• Obsidian での表示方法
• 図のデザインを選択した理由（選択した図の種類とその理由）
• 調整や変更が必要かどうか

出力メッセージの例

Obsidian モード：

Excalidraw 图已生成！

保存位置：商业模式.relationship.md

使用方法：
1. 在 Obsidian 中打开此文件
2. 点击右上角 MORE OPTIONS 菜单
3. 选择 Switch to EXCALIDRAW VIEW

Standard モード：

Excalidraw 图已生成！

保存位置：商业模式.relationship.excalidraw

使用方法：
1. 打开 https://excalidraw.com
2. 点击左上角菜单 → Open → 选择此文件
3. 或直接拖拽文件到 excalidraw.com 页面

Animated モード：

Excalidraw 动画图已生成！

保存位置：商业模式.relationship.animate.excalidraw

动画顺序：标题(1) → 主框架(2-4) → 连接线(5-7) → 说明文字(8-10)

生成动画：
1. 打开 https://dai-shi.github.io/excalidraw-animate/
2. 点击 Load File 选择此文件
3. 预览动画效果
4. 点击 Export 导出 SVG 或 WebM