excalidraw-diagram-generator

Excalidraw ダイアグラムジェネレーター

自然言語の説明から Excalidraw 形式のダイアグラムを生成するためのスキルです。このスキルは、手作業で描画することなく、プロセス、システム、関係性、アイデアを視覚的に表現するのに役立ちます。

このスキルを使用する場面

ユーザーが次のようにリクエストした場合にこのスキルを使用します：

• 「〜を示すダイアグラムを作成して」
• 「〜のフローチャートを作って」
• 「〜のプロセスを可視化して」
• 「〜のシステムアーキテクチャを描いて」
• 「〜についてのマインドマップを生成して」
• 「〜の Excalidraw ファイルを作成して」
• 「〜の関係性を示して」
• 「〜のワークフローをダイアグラムにして」

対応するダイアグラムの種類：

• 📊 フローチャート：順次プロセス、ワークフロー、決定木
• 🔗 関係図：エンティティ間の関係、システムコンポーネント、依存関係
• 🧠 マインドマップ：概念の階層、ブレインストーミングの結果、トピックの整理
• 🏗️ アーキテクチャ図：システム設計、モジュール間の相互作用、データフロー
• 📈 データフロー図（DFD）：データフローの可視化、データ変換プロセス
• 🏊 ビジネスフロー（スイムレーン）：部門横断的なワークフロー、アクターベースのプロセスフロー
• 📦 クラス図：オブジェクト指向設計、クラス構造と関係性
• 🔄 シーケンス図：時間経過に伴うオブジェクト間の相互作用、メッセージフロー
• 🗃️ ER 図：データベースのエンティティ関係、データモデル

前提条件

• 何を可視化するのかについての明確な説明
• 主要なエンティティ、ステップ、または概念の特定
• 要素間の関係性やフローの理解

ステップバイステップのワークフロー

ステップ 1：リクエストを理解する

ユーザーの説明を分析して、次を判断します：

1. ダイアグラムの種類（フローチャート、関係図、マインドマップ、アーキテクチャ）
2. 主要な要素（エンティティ、ステップ、概念）
3. 関係性（フロー、接続、階層）
4. 複雑さ（要素の数）

ステップ 2：適切なダイアグラムの種類を選ぶ

ユーザーの意図	ダイアグラムの種類	キーワードの例
プロセスフロー、ステップ、手順	フローチャート	「ワークフロー」「プロセス」「ステップ」「手順」
接続、依存関係、関連	関係図	「関係」「接続」「依存関係」「構造」
概念の階層、ブレインストーミング	マインドマップ	「マインドマップ」「概念」「アイデア」「分解」
システム設計、コンポーネント	アーキテクチャ図	「アーキテクチャ」「システム」「コンポーネント」「モジュール」
データフロー、変換プロセス	データフロー図（DFD）	「データフロー」「データ処理」「データ変換」
部門横断的なプロセス、アクターの責務	ビジネスフロー（スイムレーン）	「ビジネスプロセス」「スイムレーン」「アクター」「責務」
オブジェクト指向設計、クラス構造	クラス図	「クラス」「継承」「OOP」「オブジェクトモデル」
インタラクションのシーケンス、メッセージフロー	シーケンス図	「シーケンス」「インタラクション」「メッセージ」「タイムライン」
データベース設計、エンティティ関係	ER 図	「データベース」「エンティティ」「関係」「データモデル」

ステップ 3: 構造化情報を抽出する

フローチャートの場合:

• 順序立てたステップのリスト
• 判断ポイント（存在する場合）
• 開始点と終了点

関連図の場合:

• エンティティ/ノード（名前 + 任意の説明）
• エンティティ間の関連（from → to、ラベル付き）

マインドマップの場合:

• 中心となるトピック
• 主要なブランチ（3～6 個を推奨）
• 各ブランチのサブトピック（任意）

データフロー図（DFD）の場合:

• データの発生源と到達先（外部エンティティ）
• プロセス（データ変換）
• データストア（データベース、ファイル）
• データフロー（左から右、または左上から右下へのデータの流れを示す矢印）
• 重要: プロセスの順序は表現せず、データフローのみを表現します

業務フロー（スイムレーン）の場合:

• アクター/役割（部門、システム、人） - ヘッダー列として表示
• プロセスレーン（各アクターの下にある縦方向のレーン）
• プロセスボックス（各レーン内のアクティビティ）
• フロー矢印（プロセスボックスを接続するもの。レーン間の引き継ぎを含む）

クラス図の場合:

• 名前を持つクラス
• 可視性（+、-、#）を持つ属性
• 可視性とパラメータを持つメソッド
• 関連: 継承（実線 + 白い三角形）、実装（破線 + 白い三角形）、関連（実線）、依存（破線）、集約（実線 + 白いひし形）、コンポジション（実線 + 塗りつぶされたひし形）
• 多重度の記法（1、0..1、1..、）

シーケンス図の場合:

• オブジェクト/アクター（上部に横並びで配置）
• ライフライン（各オブジェクトからの縦線）
• メッセージ（ライフライン間の水平矢印）
• 同期メッセージ（実線矢印）、非同期メッセージ（破線矢印）
• 戻り値（破線矢印）
• アクティベーションボックス（実行中のライフライン上の矩形）
• 時間は上から下へ流れます

ER 図の場合:

• エンティティ（エンティティ名を持つ矩形）
• 属性（エンティティ内に列挙）
• 主キー（下線付き、または PK でマーク）
• 外部キー（FK でマーク）
• 関連（エンティティを接続する線）
• カーディナリティ: 1:1（一対一）、1:N（一対多）、N:M（多対多）
• 多対多関連のための中間/関連エンティティ（破線の矩形）

ステップ 4: Excalidraw JSON を生成する

適切な要素を含む .excalidraw ファイルを作成します:

使用可能な要素タイプ:

• rectangle: エンティティ、ステップ、概念のためのボックス
• ellipse: 強調のための代替図形
• diamond: 判断ポイント
• arrow: 方向性のある接続
• text: ラベルと注釈

設定すべき主要なプロパティ:

• 位置: x、y 座標
• サイズ: width、height
• スタイル: strokeColor、backgroundColor、fillStyle
• フォント: fontFamily: 5（Excalifont - すべてのテキスト要素で必須）
• テキスト: ラベル用の埋め込みテキスト
• 接続: 矢印のための points 配列

重要: 一貫した視覚的外観のために、すべてのテキスト要素は fontFamily: 5（Excalifont）を使用する必要があります。

ステップ 5: 出力をフォーマットする

完全な Excalidraw ファイルを構成します:

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

ステップ 6: 保存して手順を提供する

1. <descriptive-name>.excalidraw として保存します
2. 開き方をユーザーに伝えます:
   • https://excalidraw.com にアクセスします
   • 「Open」をクリックするか、ファイルをドラッグアンドドロップします
   • または Excalidraw VS Code 拡張機能を使用します

ベストプラクティス

要素数のガイドライン

図のタイプ	推奨数	最大
フローチャートのステップ	3～10	15
関連図のエンティティ	3～8	12
マインドマップのブランチ	4～6	8
ブランチあたりのマインドマップのサブトピック	2～4	6

レイアウトのヒント

1. 開始位置: 重要な要素を中央に配置し、一貫した間隔を使用する
2. 間隔:
   • 水平方向の間隔: 要素間に 200～300px
   • 垂直方向の間隔: 行間に 100～150px
3. 色: 一貫したカラースキームを使用する
   • 主要な要素: ライトブルー (#a5d8ff)
   • 副次的な要素: ライトグリーン (#b2f2bb)
   • 重要/中心: イエロー (#ffd43b)
   • アラート/警告: ライトレッド (#ffc9c9)
4. テキストサイズ: 読みやすさのために 16～24px
5. フォント: すべてのテキスト要素に常に fontFamily: 5 (Excalifont) を使用する
6. 矢印のスタイル: 単純なフローには直線の矢印を、複雑な関係には曲線の矢印を使用する

複雑さの管理

ユーザーのリクエストに要素が多すぎる場合:

• 複数の図に分割することを提案する
• まず主要な要素に焦点を当てる
• 詳細なサブ図を作成することを提案する

応答例:

"Your request includes 15 components. For clarity, I recommend:
1. High-level architecture diagram (6 main components)
2. Detailed diagram for each subsystem

Would you like me to start with the high-level view?"

プロンプトと応答の例

例 1: シンプルなフローチャート

ユーザー: 「ユーザー登録のフローチャートを作成して」

エージェントが生成:

1. ステップを抽出: 「メールを入力」→「メールを確認」→「パスワードを設定」→「完了」
2. 4 つの長方形 + 3 つの矢印でフローチャートを作成
3. user-registration-flow.excalidraw として保存

例 2: 関係図

ユーザー: 「User、Post、Comment エンティティ間の関係を図にして」

エージェントが生成:

1. エンティティ: User、Post、Comment
2. 関係: User → Post (「作成する」)、User → Comment (「書き込む」)、Post → Comment (「含む」)
3. user-content-relationships.excalidraw として保存

例 3: マインドマップ

ユーザー: 「機械学習の概念に関するマインドマップ」

エージェントが生成:

1. 中心: 「機械学習」
2. ブランチ: 教師あり学習、教師なし学習、強化学習、ディープラーニング
3. 各ブランチの下のサブトピック
4. machine-learning-mindmap.excalidraw として保存

トラブルシューティング

問題	解決策
要素が重なる	座標間の間隔を広げる
テキストがボックスに収まらない	ボックスの幅を広げるか、フォントサイズを小さくする
要素が多すぎる	複数の図に分割する
レイアウトが不明瞭	グリッドレイアウト (行/列) または放射状レイアウト (マインドマップ) を使用する
色が一貫していない	要素の種類に基づいてカラーパレットを事前に定義する

高度なテクニック

グリッドレイアウト (関係図用)

const columns = Math.ceil(Math.sqrt(entityCount));
const x = startX + (index % columns) * horizontalGap;
const y = startY + Math.floor(index / columns) * verticalGap;

放射状レイアウト (マインドマップ用)

const angle = (2 * Math.PI * index) / branchCount;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);

自動生成される ID

一意の ID にはタイムスタンプ + ランダム文字列を使用します:

const id = Date.now().toString(36) + Math.random().toString(36).substr(2);

出力形式

常に以下を提供します:

1. ✅ 完全な .excalidraw JSON ファイル
2. 📊 作成された内容の概要
3. 📝 要素数
4. 💡 開く/編集するための手順

概要の例:

Created: user-workflow.excalidraw
Type: Flowchart
Elements: 7 rectangles, 6 arrows, 1 title text
Total: 14 elements

To view:
1. Visit https://excalidraw.com
2. Drag and drop user-workflow.excalidraw
3. Or use File → Open in Excalidraw VS Code extension

検証チェックリスト

図を提供する前に:

• すべての要素が一意の ID を持つ
• 座標が重なりを防いでいる
• テキストが読みやすい (フォントサイズ 16 以上)
• すべてのテキスト要素が fontFamily: 5 (Excalifont) を使用している
• 矢印が論理的に接続されている
• 色が一貫したスキームに従っている
• ファイルが有効な JSON である
• 要素数が妥当である (明確さのために 20 未満)

アイコンライブラリ (オプションの拡張機能)

特殊な図 (例: AWS/GCP/Azure アーキテクチャ図) には、Excalidraw の既製のアイコンライブラリを使用できます。これにより、基本的な図形の代わりに、プロフェッショナルで標準化されたアイコンが提供されます。

ユーザーがアイコンを要求した場合

ユーザーが AWS/クラウドアーキテクチャ図を求めたり、特定のアイコンを使用したいと述べたりした場合:

1. ライブラリが存在するか確認: libraries/<library-name>/reference.md を探します

2. ライブラリが存在する場合: アイコンの使用に進みます (以下の AI アシスタントワークフローを参照)

3. ライブラリが存在しない場合: セットアップ手順を返します:

   To use [AWS/GCP/Azure/etc.] architecture icons, please follow these steps:
   
   1. Visit https://libraries.excalidraw.com/
   2. Search for "[AWS Architecture Icons/etc.]" and download the .excalidrawlib file
   3. Create directory: skills/excalidraw-diagram-generator/libraries/[icon-set-name]/
   4. Place the downloaded file in that directory
   5. Run the splitter script:
      python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[icon-set-name]/
   
   This will split the library into individual icon files for efficient use.
   After setup is complete, I can create your diagram using the actual AWS/cloud icons.
   
   Alternatively, I can create the diagram now using simple shapes (rectangles, ellipses) 
   which you can later replace with icons manually in Excalidraw.
   

ユーザーセットアップ手順 (詳細)

ステップ 1: ライブラリディレクトリを作成

mkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons

ステップ 2: ライブラリをダウンロード

• アクセス: https://libraries.excalidraw.com/
• 希望するアイコンセットを検索します (例: 「AWS Architecture Icons」)
• ダウンロードをクリックして .excalidrawlib ファイルを取得します
• カテゴリの例 (入手可能性は変動します。サイトで確認してください):
  • クラウドサービスアイコン
  • UI/Material アイコン
  • フローチャート記号

ステップ 3: ライブラリファイルを配置

• ダウンロードしたファイルをディレクトリ名に合わせてリネームします (例: aws-architecture-icons.excalidrawlib)
• ステップ 1 で作成したディレクトリに移動します

ステップ 4: 分割スクリプトを実行

python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/

ステップ 5: セットアップを確認 スクリプトを実行した後、以下の構造が存在することを確認します:

skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/
  aws-architecture-icons.excalidrawlib  (original)
  reference.md                          (generated - icon lookup table)
  icons/                                (generated - individual icon files)
    API-Gateway.json
    CloudFront.json
    EC2.json
    Lambda.json
    RDS.json
    S3.json
    ...

AI アシスタントのワークフロー

アイコンライブラリが libraries/ にある場合:

推奨されるアプローチ: Python スクリプトを使用する (効率的かつ信頼性が高い)

リポジトリには、アイコンの統合を自動的に処理する Python スクリプトが含まれています:

1. ベース図の構造を作成:

   • 基本的なレイアウト (タイトル、ボックス、領域) を含む .excalidraw ファイルを作成します
   • これによりキャンバスと全体的な構造が確立されます

2. Python スクリプトを使用してアイコンを追加:

   python skills/excalidraw-diagram-generator/scripts/add-icon-to-diagram.py \
     <diagram-path> <icon-name> <x> <y> [--label "Text"] [--library-path PATH]
   

   • .excalidraw.edit 経由の編集は、上書きの問題を回避するためにデフォルトで有効になっています。無効にするには --no-use-edit-suffix を渡します。

   例:

   # Add EC2 icon at position (400, 300) with label
   python scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label "Web Server"
   
   # Add VPC icon at position (200, 150)
   python scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150
   
   # Add icon from different library
   python scripts/add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \
     --library-path libraries/gcp-icons --label "API Server"
   

3. 接続矢印を追加:

   python skills/excalidraw-diagram-generator/scripts/add-arrow.py \
     <diagram-path> <from-x> <from-y> <to-x> <to-y> [--label "Text"] [--style solid|dashed|dotted] [--color HEX]
   

   • .excalidraw.edit 経由の編集は、上書きの問題を回避するためにデフォルトで有効になっています。無効にするには --no-use-edit-suffix を渡します。

   例:

   # Simple arrow from (300, 250) to (500, 300)
   python scripts/add-arrow.py diagram.excalidraw 300 250 500 300
   
   # Arrow with label
   python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label "HTTPS"
   
   # Dashed arrow with custom color
   python scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color "#7950f2"
   

4. ワークフローの概要:

   # Step 1: Create base diagram with title and structure
   # (Create .excalidraw file with initial elements)
   
   # Step 2: Add icons with labels
   python scripts/add-icon-to-diagram.py my-diagram.excalidraw "Internet-gateway" 200 150 --label "Internet Gateway"
   python scripts/add-icon-to-diagram.py my-diagram.excalidraw VPC 250 250
   python scripts/add-icon-to-diagram.py my-diagram.excalidraw ELB 350 300 --label "Load Balancer"
   python scripts/add-icon-to-diagram.py my-diagram.excalidraw EC2 450 350 --label "EC2 Instance"
   python scripts/add-icon-to-diagram.py my-diagram.excalidraw RDS 550 400 --label "Database"
   
   # Step 3: Add connecting arrows
   python scripts/add-arrow.py my-diagram.excalidraw 250 200 300 250  # Internet → VPC
   python scripts/add-arrow.py my-diagram.excalidraw 300 300 400 300  # VPC → ELB
   python scripts/add-arrow.py my-diagram.excalidraw 400 330 500 350  # ELB → EC2
   python scripts/add-arrow.py my-diagram.excalidraw 500 380 600 400  # EC2 → RDS
   

Python スクリプトアプローチの利点:

• ✅ トークンを消費しない: アイコン JSON データ (各 200～1000 行) が AI のコンテキストに入りません
• ✅ 正確な変換: 座標計算が決定論的に処理されます
• ✅ ID 管理: 自動 UUID 生成により競合を防ぎます
• ✅ 信頼性: 座標の計算ミスや ID の衝突のリスクがありません
• ✅ 高速: 直接ファイルを操作するため、解析のオーバーヘッドがありません
• ✅ 再利用可能: 提供する任意の Excalidraw ライブラリで動作します

代替案: 手動によるアイコン統合 (推奨されません)

Python スクリプトが利用できない場合にのみ、これを使用してください:

1. ライブラリの確認:

   List directory: skills/excalidraw-diagram-generator/libraries/
   Look for subdirectories containing reference.md files
   

2. reference.md を読む:

   Open: libraries/<library-name>/reference.md
   This is lightweight (typically <300 lines) and lists all available icons
   

3. 関連するアイコンを探す:

   Search the reference.md table for icon names matching diagram needs
   Example: For AWS diagram with EC2, S3, Lambda → Find "EC2", "S3", "Lambda" in table
   

4. 特定のアイコンデータを読み込む (警告: 大きなファイル):

   Read ONLY the needed icon files:
   - libraries/aws-architecture-icons/icons/EC2.json (200-300 lines)
   - libraries/aws-architecture-icons/icons/S3.json (200-300 lines)
   - libraries/aws-architecture-icons/icons/Lambda.json (200-300 lines)
   Note: Each icon file is 200-1000 lines - this consumes significant tokens
   

5. 要素を抽出して変換:

   Each icon JSON contains an "elements" array
   Calculate bounding box (min_x, min_y, max_x, max_y)
   Apply offset to all x/y coordinates
   Generate new unique IDs for all elements
   Update groupIds references
   Copy transformed elements into your diagram
   

6. アイコンを配置して接続を追加:

   Adjust x/y coordinates to position icons correctly in the diagram
   Update IDs to ensure uniqueness across diagram
   Add connecting arrows and labels as needed
   

手動統合の課題:

• ⚠️ 高いトークン消費 (アイコンごとに 200～1000 行 × アイコンの数)
• ⚠️ 複雑な座標変換の計算
• ⚠️ 慎重に扱わない場合の ID 衝突のリスク
• ⚠️ 多くのアイコンを含む図では時間がかかる

例: アイコンを使用した AWS 図の作成

リクエスト: 「Internet Gateway、VPC、ELB、EC2、RDS を含む AWS アーキテクチャ図を作成してください」

推奨ワークフロー (Python スクリプトを使用): リクエスト: 「Internet Gateway、VPC、ELB、EC2、RDS を含む AWS アーキテクチャ図を作成してください」

推奨ワークフロー (Python スクリプトを使用):

# Step 1: Create base diagram file with title
# Create my-aws-diagram.excalidraw with basic structure (title, etc.)

# Step 2: Check icon availability
# Read: libraries/aws-architecture-icons/reference.md
# Confirm icons exist: Internet-gateway, VPC, ELB, EC2, RDS

# Step 3: Add icons with Python script
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw "Internet-gateway" 150 100 --label "Internet Gateway"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw VPC 200 200
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw ELB 350 250 --label "Load Balancer"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw EC2 500 300 --label "Web Server"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw RDS 650 350 --label "Database"

# Step 4: Add connecting arrows
python scripts/add-arrow.py my-aws-diagram.excalidraw 200 150 250 200  # Internet → VPC
python scripts/add-arrow.py my-aws-diagram.excalidraw 265 230 350 250  # VPC → ELB
python scripts/add-arrow.py my-aws-diagram.excalidraw 415 280 500 300  # ELB → EC2
python scripts/add-arrow.py my-aws-diagram.excalidraw 565 330 650 350 --label "SQL" --style dashed

# Result: Complete diagram with professional AWS icons, labels, and connections

メリット:

• 手動での座標計算が不要
• アイコンデータのためのトークン消費がない
• 決定論的で信頼性の高い結果
• 位置の反復調整と修正が簡単

代替ワークフロー (手動、スクリプトが利用できない場合):

1. 確認: libraries/aws-architecture-icons/reference.md が存在する → はい
2. reference.md を読む → Internet-gateway、VPC、ELB、EC2、RDS のエントリを探す
3. 読み込み:
   • icons/Internet-gateway.json (298 行)
   • icons/VPC.json (550 行)
   • icons/ELB.json (363 行)
   • icons/EC2.json (231 行)
   • icons/RDS.json (同程度のサイズ) 合計: 処理する JSON は約 2000 行以上
4. 各 JSON から要素を抽出
5. 各アイコンのバウンディングボックスとオフセットを計算
6. 位置決めのためにすべての座標 (x, y) を変換
7. すべての要素に一意の ID を生成
8. データフローを示す矢印を追加
9. テキストラベルを追加
10. 最終的な .excalidraw ファイルを生成

手動アプローチの課題:

• 高いトークン消費 (約 2000〜5000 行)
• 複雑な座標計算
• ID の競合のリスク

サポートされているアイコンライブラリ (例 — 利用可否を確認してください)

• このワークフローは、提供された任意の有効な .excalidrawlib ファイルで動作します。
• https://libraries.excalidraw.com/ で見つかる可能性のあるライブラリカテゴリの例:
  • クラウドサービスアイコン
  • Kubernetes / インフラストラクチャアイコン
  • UI / Material アイコン
  • フローチャート / 図記号
  • ネットワーク図アイコン
• 利用可否と名称は変更される可能性があります。使用前にサイトで正確なライブラリ名を確認してください。

フォールバック: 利用可能なアイコンがない場合

アイコンライブラリがセットアップされていない場合:

• 基本図形 (長方形、楕円、矢印) を使用して図を作成する
• 色分けとテキストラベルを使用してコンポーネントを区別する
• 後でアイコンを追加できること、または将来の図のためにライブラリをセットアップできることをユーザーに伝える
• 図は引き続き機能的で明確ですが、視覚的な洗練度は低くなります

リファレンス

同梱のリファレンスを参照してください:

• references/excalidraw-schema.md - 完全な Excalidraw JSON スキーマ
• references/element-types.md - 詳細な要素タイプの仕様
• templates/flowchart-template.excalidraw - 基本的なフローチャートのスターター
• templates/relationship-template.excalidraw - 関係図のスターター
• templates/mindmap-template.excalidraw - マインドマップのスターター
• templates/business-flow-swimlane-template.excalidraw - ビジネスフロースイムレーンのスターター
• templates/class-diagram-template.excalidraw - クラス図のスターター
• templates/data-flow-diagram-template.excalidraw - データフロー図のスターター
• templates/er-diagram-template.excalidraw - エンティティ関係図のスターター
• templates/sequence-diagram-template.excalidraw - シーケンス図のスターター
• scripts/add-icon-to-diagram.py - Excalidraw ライブラリから図にアイコンを追加
• scripts/add-arrow.py - 図内の要素間に矢印 (接続) を追加
• scripts/split-excalidraw-library.py - .excalidrawlib ファイルを分割するツール
• scripts/README.md - ライブラリツールのドキュメント
• scripts/.gitignore - ローカルの Python 成果物がコミットされるのを防ぐ

制限事項

• 複雑な曲線は直線 / 基本的な曲線に簡略化されます
• 手描き風のラフさはデフォルト (1) に設定されます
• 自動生成では埋め込み画像はサポートされません
• 推奨される最大要素数: 図あたり 20
• 自動衝突検出はありません (間隔のガイドラインを使用してください)

今後の拡張

考えられる改善:

• 自動レイアウト最適化アルゴリズム
• Mermaid / PlantUML 構文からのインポート
• テンプレートライブラリの拡張
• 生成後のインタラクティブな編集