Excalidraw Diagram Generator

テキストコンテンツから複数の出力形式に対応した Excalidraw 図を作成します。

Output Modes

ユーザーのトリガーワードに基づいて出力モードを選択します：

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

Workflow

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

Output Formats

Mode 1: Obsidian Format (Default)

以下の構造に厳密に従って出力し、一切の修正を加えてはいけません：

---
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

Mode 2: Standard Excalidraw Format

excalidraw.com で開くことができる純 JSON ファイルを直接出力します：

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

重要なポイント：

• source は https://excalidraw.com を使用（Obsidian プラグインではない）
• 純 JSON、Markdown ラッパーなし
• ファイル拡張子：.excalidraw

Mode 3: Animated Excalidraw Format

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

---

Diagram Types & Selection Guide

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

種類	英文	使用場面	方法
フローチャート	Flowchart	ステップの説明、ワークフロー、タスク実行順序	矢印で各ステップを接続し、フロー方向を明確に表現
マインドマップ	Mind Map	概念の発散、トピック分類、アイデア収集	中心を核として外側に放射状に展開する構造
階層図	Hierarchy	組織構造、コンテンツ分級、システム分解	上から下へまたは左から右へ階層ノードを構築
関係図	Relationship	要素間の影響、依存関係、相互作用	図形間を線で接続して関連性を表示、矢印と説明を含む
比較図	Comparison	2 つ以上のスキームまたは見解の対照分析	左右 2 列または表形式、比較項目を明示
タイムライン	Timeline	イベント進展、プロジェクト進捗、モデル進化	時間を軸として、重要なタイムポイントとイベントを表示
マトリックス図	Matrix	2 次元分類、タスク優先度、ポジショニング	X と Y の 2 つの軸を確立し、座標平面に配置
フリーレイアウト	Freeform	コンテンツが散在、アイデア記録、初期情報収集	構造制限なし、図形と矢印を自由に配置

Design Rules

Text & Format

• すべてのテキスト要素は 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

Layout & Design

• キャンバス範囲：すべての要素を 0-1200 x 0-800 領域内に配置することを推奨
• 最小形状サイズ：テキスト付きの矩形/楕円は最小 120x60px
• 要素間隔：重複を防ぐため最小 20-30px 間隔
• 階層の明確性：異なる色と形状を使用して情報の異なるレベルを区別
• 図形要素：矩形枠、円形、矢印などの要素を適切に使用して情報を整理
• Emoji 禁止：図表テキストに Emoji シンボルを一切使用しないでください、ビジュアルマーカーが必要な場合はシンプルな図形（円形、四角形、矢印）または色区別を使用

Color Palette

テキスト色（ストロークカラーテキスト）：

用途	色値	説明
タイトル	#1e40af	濃青
サブタイトル/接続線	#3b82f6	明青
本文テキスト	#374151	濃灰（白背景の最薄は #757575 以上）
強調/重点	#f59e0b	金色

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

色値	意味	適用場面
#a5d8ff	浅青	入力、データソース、メインノード
#b2f2bb	浅緑	成功、出力、完了
#ffd8a8	浅橙	警告、処理待ち、外部依存
#d0bfff	浅紫	処理中、ミドルウェア、特別項目
#ffc9c9	浅赤	エラー、重要、アラート
#fff3bf	浅黄	メモ、決定、計画
#c3fae8	浅青緑	ストレージ、データ、キャッシュ
#eebefa	浅ピンク	分析、メトリクス、統計

領域背景色（大矩形 + opacity: 30、階層図に使用）：

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

コントラストルール：

• 白背景上のテキスト最薄は #757575 未満、そうでなければ読めません
• 浅色塗りつぶしには濃い色の変種テキストを使用（例：浅緑背景には #15803d を使用、#22c55e ではない）
• 白背景上に浅いグレーテキスト（#b0b0b0、#999）が表示されるのを避ける

参考：references/excalidraw-schema.md

JSON Structure

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": {}
}

Element Template

各要素に必要なフィールド（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 を参照してください。

---

Additional Technical Requirements

Text Elements 処理

• ## Text Elements セクションは Markdown では空白のままにする、%% を区切り文字としてのみ使用
• Obsidian ExcaliDraw プラグインは JSON データに基づいてテキスト要素を自動的に入力
• すべてのテキストコンテンツを手動でリストアップする必要なし

座標とレイアウト

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

Required Fields for All Elements

重要：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
}

Text-Specific Properties

テキスト要素（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": {}

Common Mistakes to Avoid

• テキストオフセット — 独立した text 要素の x は左端で、中心ではありません。中央配置公式を使用して手動計算する必要があります、そうでなければテキストが一方に偏ります
• 要素の重複 — y 座標が近い要素は積み重なりやすくなります。新しい要素を配置する前に、周囲の要素との間に最低 20px の間隔があるか確認
• キャンバスの余白不足 — コンテンツをキャンバスの端に貼り付けないでください。周囲に 50-80px のパディングを残します
• タイトルが図表に中央配置されていない — タイトルは下の図表全体の幅の中央に配置する必要があります、x=0 に固定ではありません
• 矢印ラベルが溢れる — 長いテキストラベル（例「ATP + NADPH」）は短い矢印を超えます。ラベルを簡潔に保つか、矢印の長さを増やします
• コントラストが不十分 — 白背景上の浅いテキスト色はほぼ見えません。テキスト色は #757575 以上、色付きテキストは濃色の変種を使用
• フォントサイズが小さすぎる — 14px 未満は通常スケールで読めません、本文は最小 16px

Implementation Notes

Auto-save & File Generation Workflow

Excalidraw 図表を生成する場合、以下の手順を自動的に実行する必須：

1. 適切な図表タイプを選択

• ユーザーが提供したコンテンツの特性に基づいて、上記の「Diagram Types & Selection Guide」テーブルを参照
• コンテンツの核となるニーズを分析し、最も適切な可視化形式を選択

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 での表示方法
• 図表の設計選択の説明（どのタイプの図表を選択した、なぜ）
• 調整または修正が必要かどうか

Example Output Messages

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 をエクスポート