Excalidraw Diagram Generator

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

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

ユーザーが次のようにリクエストしたときに使用します:

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

対応するダイアグラムタイプ:

• 📊 フローチャート: 順序立ったプロセス、ワークフロー、意思決定木
• 🔗 関係図: エンティティ関係、システムコンポーネント、依存関係
• 🧠 マインドマップ: 概念階層、ブレインストーミング結果、トピック整理
• 🏗️ アーキテクチャ図: システム設計、モジュール相互作用、データフロー
• 📈 データフローダイアグラム (DFD): データフロー可視化、データ変換プロセス
• 🏊 ビジネスフロー (スイムレーン): クロスファンクショナルワークフロー、アクターベースのプロセスフロー
• 📦 クラス図: オブジェクト指向設計、クラス構造と関係
• 🔄 シーケンス図: 時間経過によるオブジェクト相互作用、メッセージフロー
• 🗃️ ERダイアグラム: データベースエンティティ関係、データモデル

前提条件

• 可視化すべき内容の明確な説明
• 主要なエンティティ、ステップ、または概念の識別
• 要素間の関係またはフローの理解

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

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

ユーザーの説明を分析して以下を決定します:

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

ステップ2: 適切なダイアグラムタイプを選択する

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

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

フローチャートの場合:

• 順序立ったステップのリスト
• 意思決定ポイント (ある場合)
• 開始点と終了点

関係図の場合:

• エンティティ/ノード (名前+オプションの説明)
• エンティティ間の関係 (から→へ、ラベル付き)

マインドマップの場合:

• 中心トピック
• メインブランチ (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": [
    // ダイアグラム要素の配列
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": 20
  },
  "files": {}
}

ステップ6: 保存して説明を提供する

1. <descriptive-name>.excalidraw として保存
2. ユーザーに開き方を説明:
   • https://excalidraw.com にアクセス
   • 「開く」をクリックするか、ファイルをドラッグ&ドロップ
   • または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. 矢印スタイル: シンプルなフローには直線矢印、複雑な関係には曲線を使用

複雑さの管理

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

• 複数のダイアグラムに分割することをお勧めします
• まず主要な要素に焦点を当てます
• 詳細なサブダイアグラムの作成を提案します

レスポンス例:

「お客さんのリクエストには15個のコンポーネントが含まれています。明確にするために、次のようにお勧めします:
1. 高レベルアーキテクチャダイアグラム (6個の主要コンポーネント)
2. 各サブシステムの詳細ダイアグラム

高レベルビューから始めたいですか?」

プロンプト例と回答例

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

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

エージェント生成:

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

例2: 関係図

ユーザー: 「ユーザー、投稿、コメントエンティティ間の関係をダイアグラム化する」

エージェント生成:

1. エンティティ: ユーザー、投稿、コメント
2. 関係: ユーザー→投稿 (「作成」)、ユーザー→コメント (「書く」)、投稿→コメント (「含む」)
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. 💡 開く/編集するための説明

概要例:

作成: user-workflow.excalidraw
タイプ: フローチャート
要素: 7個の長方形、6本の矢印、1個のタイトルテキスト
合計: 14個の要素

表示する方法:
1. https://excalidraw.com にアクセス
2. user-workflow.excalidraw をドラッグ&ドロップ
3. またはExcalidraw VS Code拡張機能でファイル → 開く

検証チェックリスト

ダイアグラムを提供する前に:

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

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

専門的なダイアグラム (AWS/GCP/Azureアーキテクチャダイアグラムなど) の場合、Excalidraw から事前製のアイコンライブラリを使用できます。これは基本的な形状ではなく、プロフェッショナルな標準化されたアイコンを提供します。

ユーザーがアイコンをリクエストする場合

ユーザーがAWS/クラウドアーキテクチャダイアグラムをリクエストするか、特定のアイコンを使用したいと述べた場合:

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

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

3. ライブラリが存在しない場合: セットアップ説明で応答:

   [AWS/GCP/Azure/など] アーキテクチャアイコンを使用するには、以下の手順を実行してください:
   
   1. https://libraries.excalidraw.com/ にアクセス
   2. 「[AWS Architecture Icons/etc.]」を検索し、.excalidrawlib ファイルをダウンロード
   3. ディレクトリを作成: skills/excalidraw-diagram-generator/libraries/[icon-set-name]/
   4. ダウンロードしたファイルをそのディレクトリに配置
   5. スプリッタースクリプトを実行:
      python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[icon-set-name]/
   
   これでライブラリが個別のアイコンファイルに分割されます。
   セットアップが完了したら、実際のAWS/クラウドアイコンを使用してダイアグラムを作成できます。
   
   または、シンプルな形状 (長方形、楕円形) を使用して今すぐダイアグラムを作成することもできます。
   後で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  (元のファイル)
  reference.md                          (生成 - アイコンルックアップテーブル)
  icons/                                (生成 - 個別アイコンファイル)
    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 を渡すと無効化

   例:

   # EC2アイコンを位置 (400, 300) にラベル付きで追加
   python scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label "Web Server"
   
   # VPCアイコンを位置 (200, 150) に追加
   python scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150
   
   # 別のライブラリからアイコンを追加
   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 を渡すと無効化

   例:

   # (300, 250) から (500, 300) への単純な矢印
   python scripts/add-arrow.py diagram.excalidraw 300 250 500 300
   
   # ラベル付き矢印
   python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label "HTTPS"
   
   # カスタム色の破線矢印
   python scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color "#7950f2"
   

4. ワークフロー概要:

   # ステップ1: タイトルと構造を含むベースダイアグラムを作成
   # (.excalidraw ファイルを初期要素で作成)
   
   # ステップ2: ラベル付きアイコンを追加
   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"
   
   # ステップ3: 接続矢印を追加
   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. ライブラリを確認:

   ディレクトリをリスト: skills/excalidraw-diagram-generator/libraries/
   reference.md ファイルを含むサブディレクトリを探す
   

2. reference.md を読む:

   開く: libraries/<library-name>/reference.md
   これは軽量です (通常<300行) で、すべての利用可能なアイコンをリスト
   

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

   reference.md テーブルをダイアグラムニーズに合致するアイコン名で検索
   例: EC2、S3、Lambdaを持つAWSダイアグラムの場合 → テーブルから「EC2」「S3」「Lambda」を検索
   

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

   必要なアイコンファイルのみを読む:
   - libraries/aws-architecture-icons/icons/EC2.json (200～300行)
   - libraries/aws-architecture-icons/icons/S3.json (200～300行)
   - libraries/aws-architecture-icons/icons/Lambda.json (200～300行)
   注: 各アイコンファイルは200～1000行 - これはかなりのトークンを消費
   

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

   各アイコンJSONには「elements」配列が含まれます
   バウンディングボックス (min_x, min_y, max_x, max_y) を計算
   すべての x/y 座標にオフセットを適用
   すべての要素に新しい一意のIDを生成
   groupIds 参照を更新
   変換された要素をダイアグラムにコピー
   

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

   ダイアグラム内でアイコンを正しく配置するために x/y 座標を調整
   ダイアグラム全体で一意性を確保するためにIDを更新
   必要に応じて接続矢印とラベルを追加
   

手動統合の課題:

• ⚠️ 高いトークン消費 (アイコン1個あたり200～1000行 × アイコン数)
• ⚠️ 複雑な座標変換計算
• ⚠️ 適切に処理しない場合のID競合リスク
• ⚠️ 多くのアイコンを含むダイアグラムの場合、時間がかかる

例: アイコン付きAWSダイアグラムの作成

リクエスト: 「Internet Gateway、VPC、ELB、EC2、RDSを備えたAWSアーキテクチャダイアグラムを作成」

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

# ステップ1: ベースダイアグラムファイルを作成してタイトル付き
# my-aws-diagram.excalidraw を基本構造 (タイトル等) で作成

# ステップ2: アイコン利用可能性をチェック
# 読む: libraries/aws-architecture-icons/reference.md
# アイコンが存在することを確認: Internet-gateway、VPC、ELB、EC2、RDS

# ステップ3: Pythonスクリプトでアイコンを追加
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"

# ステップ4: 接続矢印を追加
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

# 結果: プロフェッショナルなAWSアイコン、ラベル、接続を備えた完全なダイアグラム

利点:

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

代替ワークフロー (スクリプトが利用不可の場合、手動):

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.json - 基本フローチャートスターター
• templates/relationship-template.json - 関係図スターター
• templates/mindmap-template.json - マインドマップスターター
• scripts/split-excalidraw-library.py - .excalidrawlib ファイルを分割するツール
• scripts/README.md - ライブラリツールのドキュメント
• scripts/.gitignore - ローカルPythonアーティファクトのコミットを防止

制限事項

• 複雑な曲線は直線/基本的な曲線に簡略化
• 手描き粗さはデフォルト (1) に設定
• 自動生成でのネストされた画像のサポートなし
• 推奨最大要素数: ダイアグラムあたり20個
• 自動衝突検出なし (間隔ガイドラインを使用)

将来の拡張機能

可能な改善:

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