excalidraw-diagram

Excalidraw 図表ジェネレーター

用途と出力モード

ユーザーが表現したい内容と納品先に応じて選択し、ツール名を覚えてもらう必要はありません。 独立したフロー、アーキテクチャ、概念の関係、マインドマップ、編集可能なホワイトボードは、ニーズに応じて自動的に選択できます。 図が HTML Artifact の一部である場合は、HTML、CSS、SVG、またはその Artifact で既に使用している図表ツールを優先します。明示的に Excalidraw が指定された場合、または編集可能な Excalidraw ファイルや既存の図稿との統合など、具体的な機能が必要な場合に限り、HTML Artifact 内で使用します。手描き風のスタイルだけでは切り替えません。

ユーザーが形式や使用状況を指定した場合は、その指示に従います。指定がない場合は、Obsidian をデフォルトとします。 モードを選択したら、生成前に対応するドキュメントの完全なテンプレートと要件を必ず読みます。

使用状況	モードと必読ドキュメント	ファイル
Obsidian ノート、または形式の指定がない場合	Obsidian	[主題].[種類].md
Excalidraw のウェブサイトで開く、編集する、または共有する場合	Standard	[主題].[種類].excalidraw
図の要素を順番に表示する、またはアニメーションで描画する場合	Animated	[主題].[種類].animate.excalidraw

ワークフロー

1. 納品先とモードを確認し、概念、関係、階層を分析して、下表から図表の形式を選択します。
2. 選択したモードのドキュメントと、共通要素の形式を読みます。配色が必要な場合は、カラーパレットとコントラストのルールを読みます。
3. 完全な drawing を生成し、一意の ID、有効な参照、正しいモードのラッピングを確認します。テキストや矢印をバインドする場合は、形式ドキュメントの該当するバインドの章を先に読みます。
4. ユーザーが指定した場所に保存します。指定がない場合は、プロジェクトの成果物ディレクトリを使用し、保存先が用意されていない場合は docs/excalidraw-diagram/ に保存します。プロジェクト以外の作業では、現在の作業ディレクトリを使用できます。ファイル名には主題を表す名前を付けます。同名のファイルがある場合は、先に読み込んでから更新するかどうかを判断します。
5. 以下の形式と表示の検証を実行し、今回の変更によって生じた問題を修正します。
6. クリック可能なファイルパス、モード、検証結果、および選択したモードのドキュメントを開く方法を報告します。理解に役立つ設計上の選択について簡潔に説明します。

図表の種類と選択ガイド

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

種類	英語	使用状況	作成方法
フローチャート	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 の間隔を空けます
• 明確な階層：異なる色や形を使用して、異なる階層の情報を区別します
• 図形要素：矩形、円、矢印などの要素を適切に使って情報を整理します
• 絵文字の禁止：図表のテキストに絵文字を使用しないでください。視覚的な目印が必要な場合は、単純な図形（円、四角、矢印）または色分けを使用します

配色とコントラストについて詳しくは、カラーパレットを参照してください。

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

• テキストの位置ずれ — 独立した text 要素の x は左端の座標であり、中央の座標ではありません。中央揃えの式を使って必ず手動で計算してください。そうしないと、テキストが片側に寄ります
• 要素の重なり — y 座標が近い要素は重なりやすくなります。新しい要素を配置する前に、周囲の要素との間に少なくとも 20px の間隔があるか確認してください
• キャンバスの余白不足 — コンテンツをキャンバスの端に寄せないでください。周囲に 50-80px の padding を設けます
• タイトルが図表の中央にない — タイトルは x=0 に固定するのではなく、下にある図表全体の幅の中央に配置します
• 矢印ラベルのはみ出し — 長いテキストラベル（"ATP + NADPH" など）は短い矢印からはみ出します。ラベルを短くするか、矢印を長くします
• コントラスト不足 — 白い背景では薄い色のテキストがほとんど見えません。テキストの色は #757575 より暗い色にし、色付きのテキストには濃い色のバリエーションを使用します
• 文字が小さすぎる — 14px 未満では通常のズームで読めません。本文は 16px 以上にします

形式と表示の検証

• JSON parser で drawing を確認し、要素 ID が一意であること、バインドや画像などの参照先が存在することを確認します。Obsidian モードでは Markdown のラッピングも確認します。
• 対象ツールで実際に開くか、互換性のあるレンダラーで画面を生成して確認し、テキストが切れていないこと、ノードが重なっていないこと、矢印の方向とラベルが正しいこと、コントラストと余白が明確であることを確かめます。JSON の解析に成功しただけでは、図が読みやすいとは証明できません。
• バインド関係がある場合は、コンテナーを移動して、テキストや矢印が正しく追従することを確認します。Animated モードでは、順序と時間を実際にプレビューします。
• 修正後は、影響を受ける画面と操作を再確認します。ツールを利用できない場合は、未検証のモード、画面、または操作を明示し、完全に検証済みとは述べないでください。