excalidraw-diagram

Excalidraw 図表ジェネレーター

テキストコンテンツから Excalidraw 図表を作成し、Obsidian 対応の .md ファイルとして出力します。

ワークフロー

1. コンテンツを分析する - 概念、関係性、階層を特定します
2. 図表の種類を選択する（以下を参照）
3. Excalidraw JSON を生成する
4. Excalidraw のフロントマターを含む Obsidian 対応の .md ファイルを生成する
5. 現在の作業ディレクトリに自動で保存する
6. ファイルパスをユーザーに通知し、保存が正常に完了したことを確認する

出力形式

次の構造に厳密に従って出力し、変更を加えないでください：

---
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 設定は使用できません

図表の種類と選択ガイド

理解しやすく、視覚的にも魅力的な図表形式を選択してください。

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

デザインルール

テキストと形式

• すべてのテキスト要素で fontFamily: 5（Excalifont 手書きフォント）を使用してください
• テキスト内の二重引用符の置換ルール：" は 『』 に置き換えてください
• テキスト内の丸括弧の置換ルール：() は 「」 に置き換えてください
• フォントサイズのルール：
  • タイトル：24-28px
  • サブタイトル：18-20px
  • 本文／説明：14-16px
• 行の高さ：すべてのテキストで lineHeight: 1.25 を使用してください

レイアウトとデザイン

• キャンバス範囲：すべての要素を 0-1200 x 0-800 の範囲内に配置することを推奨します
• 要素間の間隔：適切な間隔を保ち、全体的に美しいレイアウトにしてください
• 階層を明確にする：異なる色や形を使って、情報の階層を区別してください
• 図形要素：矩形、円、矢印などを適宜使って情報を整理してください

カラーパレット

• タイトルの色：#1e40af（濃い青）
• サブタイトル／接続線の色：#3b82f6（明るい青）
• 本文の文字色：#374151（灰色）
• 強調／重要箇所の色：#f59e0b（金色）
• その他の配色：調和の取れた配色を推奨します。色を使いすぎないでください

参照：references/excalidraw-schema.md

JSON 構造

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

要素のテンプレート

各要素には次のフィールドが必要です：

{
  "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": [],
  "frameId": null,
  "index": "a1",
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "versionNonce": 987654321,
  "isDeleted": false,
  "boundElements": [],
  "updated": 1751928342106,
  "link": null,
  "locked": false
}

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

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

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

---

その他の技術要件

テキスト要素の処理

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

座標とレイアウト

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

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

{
  "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",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "index": "a1",
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "versionNonce": 987654321,
  "isDeleted": false,
  "boundElements": [],
  "updated": 1751928342106,
  "link": null,
  "locked": false
}

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

テキスト要素 (type: "text") には、次の追加プロパティが必要です：

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

appState の設定

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

files フィールド

"files": {}

実装上の注意

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

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

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

• ユーザーが提供したコンテンツの特性に基づき、上記の「図表の種類と選択ガイド」の表を参照してください
• コンテンツの中心的な目的を分析し、最適な可視化形式を選択してください

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

• 形式：[テーマ].[種類].md
• 例：コンテンツ制作フロー.flowchart.md、Axtonビジネスモデル.relationship.md
• 分かりやすさを高めるため、可能な限り日本語を使用してください

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 での表示方法
• 🎨 図表のデザイン選択について（選択した図表の種類とその理由）
• ❓ 調整や変更が必要かどうか

出力メッセージの例

✅ Excalidraw 图已自动生成！

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

🎨 图表选择说明：
我选择了「关系图」来表现三大产品线之间的转化关系，用箭头展示用户的升级路径，以及它们如何共同构成完整的商业闭环。

📖 使用方法：
1. 在 Obsidian 中打开此文件
2. 点击右上角「MORE OPTIONS」菜单
3. 选择「Switch to EXCALIDRAW VIEW」
4. 即可看到可视化的商业模式全景

需要调整吗？比如改变布局、添加更多细节或调整配色，直接告诉我！