🎨
LLMでシステム構成図(draw.io)を自動生成する

2025/11/06に公開
 LLMでシステム構成図(draw.io)を自動生成する
 はじめにシステム設計で構成図の作成は避けて通れませんが、アイコンの配置やレイアウト調整に時間を費やしているのが実情です。設計レビュー直前に慌てて図を作成し、変更のたびに全体を調整する作業は、本質的なエンジニアリングとは言えません。
GitHub Copilot Agentとdraw.ioのVS Code拡張機能を組み合わせることで、自然言語のプロンプトから構成図を自動生成できます。本記事では、実装方法と試行錯誤から得た知見を共有します。

 draw.ioとはdraw.io（diagrams.net）はオープンソースの作図ツールです。VS Code拡張機能を使うと、エディタ内で .drawio ファイルを編集でき、バージョン管理との統合も容易です。XML形式でデータを保存するため、LLMでのコード生成が可能です。
公式サイト: https://www.drawio.com/

 完成イメージプロンプトに「AWS本番環境のアーキテクチャ構成図を作成」と指示すると、以下のような図が生成されます。
AWS 2025アイコンセット、Multi-AZ構成、Auto Scaling対応、色分けされた接続線など、実用的な構成図が自動生成されます。

 前提条件
OS: macOS Sonoma 14.5

VS Code: 1.105.1

拡張機能: Draw.io Integration v1.6.6

LLM: GitHub Copilot Chat (Claude Sonnet 4.5)

所要時間: 約15分

 環境構築
 1. Draw.io Integration 拡張機能のインストール以下のコマンドでインストールします。
code --install-extension hediet.vscode-drawio
インストール後、.drawio ファイルを開くとdraw.ioエディタが起動します。

 2. GitHub Copilotの有効化確認VS Code右下にCopilotアイコンが表示されていることを確認します。

 実装手順
 手順1: draw.ioファイルの作成プロジェクトディレクトリに .drawio ファイルを作成します。
mkdir -p docs/diagrams
touch docs/diagrams/architecture.drawio
VS Codeでファイルを開くと、draw.ioエディタが起動します。

 手順2: GitHub Copilot Chatでプロンプトを入力シンプルな構成から始める場合の基本プロンプト例です。
📝 基本プロンプト例:
@workspace architecture.drawioファイルに、以下のAWS構成図をdraw.io XML形式で作成してください：

【ネットワーク構成】
- VPC (10.0.0.0/16)
- Availability Zone A (ap-northeast-1a)
  - Public Subnet A (10.0.1.0/24)
  - Private Subnet A (10.0.10.0/24)
- Availability Zone B (ap-northeast-1c)
  - Public Subnet B (10.0.2.0/24)
  - Private Subnet B (10.0.20.0/24)

【コンポーネント配置】
- Internet側: Route53 → CloudFront → WAF
- Public Subnet: Internet Gateway、NAT Gateway (各AZ)、ALB
- Private Subnet: ECS Fargate (各AZに3つずつ)、RDS Primary/Standby、ElastiCache
- ストレージ: S3 (静的コンテンツ)、S3 (ログ)、ECR

【レイアウト要件】
- Region、VPCを大きな枠で表現
- AZを左右に配置（AZ-A: 左、AZ-B: 右）
- Public SubnetとPrivate Subnetを上下に配置
- 接続線が重ならないよう、コンポーネントを階段状に配置
- 各コンポーネント間の間隔を100px以上確保

【スタイル】
- AWS 2025アイコンセット (mxgraph.aws4.*) を使用
- Region: 薄い青緑色の枠
- VPC: 薄い緑色の枠
- Public Subnet: 薄い青色の背景
- Private Subnet: 薄い青色の背景
- Auto Scaling Group: オレンジ色の点線枠
- 接続線は色分け（外部通信: 青、内部通信: オレンジ、DB接続: 紫）
- 矢印にプロトコル名とポート番号を表示
詳細なプロンプトは記事末尾の「付録」を参照してください。

 手順3: 生成されたXMLをファイルに適用Copilotがdraw.io XMLを生成するので、以下の手順で適用します。
Copilotの回答からXMLコードをコピー

architecture.drawio ファイルを右クリック → 「ソースとして開く」
ファイル内容を全選択し、コピーしたXMLを貼り付け
保存（Cmd+S / Ctrl+S）
保存すると、draw.ioビューに切り替わり、図が表示されます。

 試行錯誤の過程最初の試行は失敗に終わり、プロンプトを数回調整する必要がありました。この過程で効果的なプロンプトの書き方が見えてきました。

 試行1: 曖昧な指示では失敗プロンプト:
AWSの構成図を作って
結果: 実用的でない図が生成されました。
問題点:
単純な四角形と楕円で表現（AWSアイコンなし）
ネットワーク構成（VPC、サブネット、AZ）が存在しない
階層構造が表現されていない
学び: AIも具体的な指示がないと意図を理解できません。コンポーネント名だけでなく、ネットワーク構成やレイアウトも明示が必要です。

 試行2: レイアウトが崩れるプロンプト:
以下のAWSコンポーネントでdraw.io構成図を作成：
- CloudFront
- ALB
- ECS ×3
- RDS
- ElastiCache
結果: コンポーネントは生成されましたが、レイアウトが崩れていました。
学び: コンポーネントのリストだけでは不十分。レイアウトの指示も必要です。

 試行3: 詳細な仕様で成功プロンプト:
@workspace architecture.drawioに以下のAWS構成図を作成してください：

【ネットワーク構成】
- Region: ap-northeast-1 (Tokyo Region)
- VPC (10.0.0.0/16)
- Availability Zone A (ap-northeast-1a)
  - Public Subnet A (10.0.1.0/24): ALB、NAT Gateway
  - Private Subnet A (10.0.10.0/24): ECS ×3、RDS Primary
- Availability Zone B (ap-northeast-1c)
  - Public Subnet B (10.0.2.0/24): ALB、NAT Gateway
  - Private Subnet B (10.0.20.0/24): ECS ×3、RDS Standby

【外部接続】
1. Internet/Users → Route53 → CloudFront → Shield → WAF
2. WAF → Internet Gateway → ALB (Public Subnet)

【内部構成】
3. ALB → ECS Fargate (Private Subnet、各AZに3つずつ、Auto Scaling Group管理)
4. ECR → ECS (コンテナイメージのPull)
5. ECS → RDS Proxy → RDS Multi-AZ (Primary: AZ-A、Standby: AZ-B)
6. ECS → ElastiCache Redis (Primary: AZ-A、Replica: AZ-B)
7. ECS → S3 (ログ保存)
8. CloudFront → S3 (静的コンテンツ配信)

【管理・監視】
9. Systems Manager → ECS (パラメータ管理)
10. Secrets Manager → RDS Proxy (DB認証情報)
11. ALB → CloudWatch (メトリクス・ログ)

【レイアウト重要】
- キャンバスサイズ: 2400×1800px
- Region、VPCを階層的な枠で表現
- AZを左右に配置（左: AZ-A、右: AZ-B）
- 各AZ内でPublic/Privateサブネットを上下に配置
- ECSタスクを階段状に配置（線の交差を避ける）
- コンポーネント間の最小間隔: 100px以上

【スタイル】
- AWS 2025アイコンセット (mxgraph.aws4.*) を使用
- Region: 薄い青緑色の枠 (fillColor=#E6F6F7, strokeColor=#00A4A6)
- VPC: 薄い緑色の枠 (fillColor=#E9F3E6, strokeColor=#248814)
- AZ: 青色の点線枠 (strokeColor=#147EBA, dashed=1)
- Public/Private Subnet: 薄い青色 (fillColor=#E6F6F7, strokeColor=#00A4A6)
- Auto Scaling Group: オレンジ色の点線枠 (strokeColor=#D86613, dashed=1)
- 接続線の色分け:
  - 外部通信（HTTPS）: 青 (strokeColor=#0066CC)
  - 内部通信（HTTP）: オレンジ (strokeColor=#ED7100)
  - DB接続: 紫 (strokeColor=#C925D1)
  - セキュリティ: 赤 (strokeColor=#DD344C)
  - 管理・監視: ピンク (strokeColor=#E7157B)
  - ストレージ: 緑 (strokeColor=#7AA116)
- 矢印ラベルにプロトコル名とポート番号を表示
  - 例: "HTTPS:443"、"HTTP:8080"、"PostgreSQL:5432"
結果: 質が向上した構成図が生成されました。

 効果的なプロンプトの5原則
ネットワーク構成を明示する: VPC、サブネット、CIDR、AZを具体的に記載

コンポーネントの配置場所を指定する: どのサブネットに何を配置するか

レイアウトの詳細を指示する: 座標、間隔、方向性、重なり回避の方法

色やスタイルを統一する: 役割ごとに色を決め、一貫性を持たせる

接続関係に詳細情報を付ける: プロトコル、ポート番号、通信方向

 トラブルシューティング
 問題1: XMLを生成してくれない解決策: プロンプトの冒頭にXMLサンプルを提示します
以下の形式でdraw.io XMLを生成してください：

<mxfile host="65bd71144e">
    <diagram id="example" name="Example">
        <mxGraphModel>
            <root>
                <mxCell id="0"/>
                <mxCell id="1" parent="0"/>
            </root>
        </mxGraphModel>
    </diagram>
</mxfile>

 問題2: コンポーネントが重なる解決策: 座標を明示的に指示します
各コンポーネント間の最小間隔: 100px
横方向: X座標を0, 200, 400と等間隔に配置
縦方向: 層ごとにY座標を統一

 問題3: AWSアイコンが表示されない解決策: シェイプライブラリを明示します
以下のAWS公式シェイプを使用：
- CloudFront: shape=mxgraph.aws4.cloudfront
- S3: shape=mxgraph.aws4.s3
- ECS: shape=mxgraph.aws4.ecs

 問題4: 接続線が重なるこれは最も頻繁に発生する問題です。以下の解決策を組み合わせます。
解決策1: コンポーネントを階段状に配置
コンポーネントを階段状に配置：
- ECS Container 1: X=300, Y=450
- ECS Container 2: X=500, Y=480 （30pxずらす）
- ECS Container 3: X=700, Y=510
解決策2: 接続線の経路を指定
- ECS1 → RDS: 直線で下に接続
- ECS2 → RDS: 左に曲がってから下（waypoint: X=400）
- ECS3 → RDS: 大きく左に曲がってから下（waypoint: X=350）
解決策3: 接続点を指定
- ALB → ECS1: exitX=0.5, exitY=1 から entryX=0.25, entryY=0へ
- ALB → ECS2: exitX=0.5, exitY=1 から entryX=0.5, entryY=0へ
解決策4: 線スタイルを使い分ける
- 外部通信: 直線（edgeStyle=orthogonalEdgeStyle）
- 内部通信: 曲線（edgeStyle=curved）
- DB接続: ジグザグ（edgeStyle=elbowEdgeStyle）

 動作確認生成された構成図を確認します。
draw.ioビューで全コンポーネントが表示されているか確認
XMLソースで正しく生成されているか確認

 導入効果Before（手作業）:
構成図作成: 2-3時間
修正: 30分/回
複数パターン: ほぼ不可能
After（Copilot）:
構成図作成: 5分
修正: 1分/回
複数パターン: 10分で3パターン

 まとめGitHub Copilot Agentを使ってdraw.io構成図を自動生成する方法を紹介しました。
ポイント:
自然言語から構成図を生成可能
プロンプトは具体的に記述（コンポーネント、レイアウト、スタイル）
階層構造と色分けで視認性を確保
修正もプロンプト調整で即座に対応
今後の展開:
プロンプトテンプレート化でチーム内再利用
CI/CDパイプラインに組み込み自動生成
Terraformから構成図を自動生成

 付録: 完全なdraw.io生成プロンプト📝 本記事で使用したdraw.io構成図生成プロンプト全文以下のプロンプトをGitHub Copilot Chatに入力することで、本記事で紹介したAWS本番環境アーキテクチャ図を生成できます。
@workspace architecture-production.drawioファイルに、本番環境のAWS構成図をdraw.io XML形式で作成してください。AWS 2025の最新アイコンセットを積極的に使用してください。

【要件】

## ネットワーク構成
- AWS Region: ap-northeast-1 (Tokyo Region)
  - VPC (10.0.0.0/16)
    - Availability Zone A (ap-northeast-1a)
      - Public Subnet A (10.0.1.0/24)
      - Private Subnet A (10.0.10.0/24)
    - Availability Zone B (ap-northeast-1c)
      - Public Subnet B (10.0.2.0/24)
      - Private Subnet B (10.0.20.0/24)

## コンポーネント配置

### 外部層（VPC外部）
1. Internet / Users（Internetアイコン）
2. Route 53（DNSサービス）
3. CloudFront（CDN）
4. Shield（DDoS防御）
5. WAF（Webアプリケーションファイアウォール）
6. S3 (Static Assets)（静的コンテンツ配信）
7. CloudWatch（監視・ログ収集）

### ネットワーク層
8. Internet Gateway（インターネット接続）
9. NAT Gateway A（ap-northeast-1a）
10. NAT Gateway B（ap-northeast-1c）

### Public Subnet層（各AZ）
11. Application Load Balancer（ALB、Public Subnetに跨る）

### Private Subnet層（コンピュート）
12. Auto Scaling Group A（ap-northeast-1a内）
    - ECS Fargate Task A1
    - ECS Fargate Task A2
    - ECS Fargate Task A3
13. Auto Scaling Group B（ap-northeast-1c内）
    - ECS Fargate Task B1
    - ECS Fargate Task B2
    - ECS Fargate Task B3
14. Elastic Container Registry（ECR、コンテナイメージレジストリ）

### Private Subnet層（データベース）
15. RDS Proxy（コネクションプーリング）
16. RDS PostgreSQL（Primary、ap-northeast-1a）
17. RDS PostgreSQL（Standby、ap-northeast-1c）
18. ElastiCache Redis（Primary、ap-northeast-1a）
19. ElastiCache Redis（Replica、ap-northeast-1c）

### ストレージ・運用管理
20. S3 (Logs)（アプリケーションログ保存）
21. Systems Manager（パラメータストア、セッションマネージャー）
22. Secrets Manager（データベース認証情報管理）

## 接続関係とラベル

### 外部からの流入
- Internet → Route 53: "DNS Query"
- Route 53 → CloudFront: "HTTPS:443"
- CloudFront → WAF: "Security Check"（赤色、strokeColor=#DD344C）
- Shield → CloudFront: "DDoS Protection"（破線、赤色）
- CloudFront → S3 Static: "Static Content"（破線、緑色、strokeColor=#7AA116）
- Internet → Internet Gateway: "HTTPS:443"（青色、strokeColor=#0066CC）
- WAF → Internet Gateway: "HTTPS:443"（青色）

### 負荷分散
- Internet Gateway → ALB: "HTTPS:443"（青色、strokeWidth=2.5）
- ALB → ECS Fargate Task A1: "HTTP:8080"（オレンジ色、strokeColor=#ED7100）
- ALB → ECS Fargate Task A2: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task A3: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task B1: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task B2: "HTTP:8080"（オレンジ色）
- ALB → ECS Fargate Task B3: "HTTP:8080"（オレンジ色）

### コンテナイメージ管理
- ECR → ECS Fargate Task A2: "Pull Container Images"（破線、オレンジ色）

### データベース接続
- ECS Fargate Task A2 → RDS Proxy: "PostgreSQL:5432"（紫色、strokeColor=#C925D1、strokeWidth=2.5）
- RDS Proxy → RDS Primary: "Connection Pool"（紫色）
- RDS Primary → RDS Standby: "Synchronous Replication"（破線、紫色）

### キャッシュ接続
- ECS Fargate Task A2 → ElastiCache Redis A: "Redis:6379"（紫色）
- ECS Fargate Task B2 → ElastiCache Redis B: "Redis:6379"（紫色）
- ElastiCache Redis A → ElastiCache Redis B: "Replication"（破線、紫色）

### ログ・監視
- ECS Fargate Task B3 → S3 Logs: "Application Logs"（破線、緑色）
- ALB → CloudWatch: "Metrics & Logs"（破線、ピンク色、strokeColor=#E7157B）

### 運用管理
- Systems Manager → ECS Fargate Task A2: "Configuration"（破線、ピンク色）
- Secrets Manager → RDS Proxy: "DB Credentials"（破線、赤色）

## レイアウト要件

### キャンバスサイズ
- 幅: 2400px
- 高さ: 1800px

### コンポーネント配置座標（重要！線が交差しないよう精密に配置）

#### 外部層（Y座標: 40-180）
- Internet: X=1140, Y=40, width=80, height=80
- Route 53: X=360, Y=80, width=78, height=78
- CloudFront: X=620, Y=80, width=78, height=78
- Shield: X=980, Y=40, width=60, height=60
- WAF: X=860, Y=80, width=78, height=78
- S3 Static: X=1940, Y=80, width=78, height=78
- CloudWatch: X=2180, Y=80, width=78, height=78

#### Region（Y座標: 180-1720）
- Region Container: X=40, Y=180, width=2300, height=1540

#### VPC（Y座標: 260-1660）
- VPC Container: X=80, Y=260, width=2200, height=1400

#### Availability Zone A（X座標: 120-1120）
- AZ-A Container: X=120, Y=340, width=1000, height=1240
- Public Subnet A: X=160, Y=400, width=920, height=380
- Private Subnet A: X=160, Y=840, width=920, height=680

#### Availability Zone B（X座標: 1200-2200）
- AZ-B Container: X=1200, Y=340, width=1000, height=1240
- Public Subnet B: X=1240, Y=400, width=920, height=380
- Private Subnet B: X=1240, Y=840, width=920, height=680

#### ネットワーク層
- Internet Gateway: X=1090, Y=560, width=78, height=78（Regionの下、VPCの上）
- NAT Gateway A: X=320, Y=794, width=68, height=68（Public Subnet A内）
- NAT Gateway B: X=1400, Y=794, width=68, height=68（Public Subnet B内）
- ALB: X=1090, Y=680, width=78, height=78（Public Subnet中央）

#### コンピュート層（Private Subnet内、階段状配置で線の重複回避）
- Auto Scaling Group A: X=280, Y=1140, width=660, height=360
  - ECS Task A1: X=380, Y=1220, width=68, height=68
  - ECS Task A2: X=600, Y=1280, width=68, height=68
  - ECS Task A3: X=810, Y=1250, width=68, height=68
- Auto Scaling Group B: X=1360, Y=1140, width=660, height=360
  - ECS Task B1: X=1460, Y=1220, width=68, height=68
  - ECS Task B2: X=1680, Y=1280, width=68, height=68
  - ECS Task B3: X=1890, Y=1250, width=68, height=68
- ECR: X=1090, Y=1260, width=68, height=68（中央配置）

#### データベース層（Private Subnet内、最下層）
- RDS Proxy: X=1090, Y=1460, width=68, height=68（中央）
- RDS Primary: X=380, Y=1570, width=68, height=68（AZ-A）
- RDS Standby: X=1460, Y=1570, width=68, height=68（AZ-B）
- Redis Primary: X=600, Y=1610, width=68, height=68（AZ-A）
- Redis Replica: X=1680, Y=1610, width=68, height=68（AZ-B）

#### 運用管理（VPC外、右下）
- S3 Logs: X=2080, Y=1570, width=68, height=68
- Systems Manager: X=1090, Y=1700, width=68, height=68
- Secrets Manager: X=1090, Y=1810, width=68, height=68

## スタイル仕様（AWS 2025準拠）

### グループコンテナ
- Region: shape=mxgraph.aws4.group_region, fillColor=#E6F6F7, strokeColor=#00A4A6
- VPC: shape=mxgraph.aws4.group_vpc, fillColor=#E9F3E6, strokeColor=#248814
- Availability Zone: fillColor=none, strokeColor=#147EBA, dashed=1
- Public Subnet: shape=mxgraph.aws4.group_security_group, fillColor=#E6F6F7, strokeColor=#00A4A6
- Private Subnet: shape=mxgraph.aws4.group_security_group, fillColor=#E6F6F7, strokeColor=#00A4A6
- Auto Scaling Group: shape=mxgraph.aws4.group_auto_scaling_group, fillColor=none, strokeColor=#D86613, dashed=1

### AWSアイコン（resIcon指定）
- Internet: mxgraph.aws4.internet_alt2
- Route 53: mxgraph.aws4.route_53（fillColor=#8C4FFF）
- CloudFront: mxgraph.aws4.cloudfront（fillColor=#8C4FFF）
- Shield: mxgraph.aws4.shield（fillColor=#DD344C）
- WAF: mxgraph.aws4.waf（fillColor=#DD344C）
- S3: mxgraph.aws4.s3（fillColor=#7AA116）
- CloudWatch: mxgraph.aws4.cloudwatch_2（fillColor=#E7157B）
- Internet Gateway: mxgraph.aws4.internet_gateway（fillColor=#8C4FFF）
- NAT Gateway: mxgraph.aws4.nat_gateway（fillColor=#8C4FFF）
- ALB: mxgraph.aws4.application_load_balancer（fillColor=#ED7100）
- ECS Task: mxgraph.aws4.ecs_task（fillColor=#ED7100）
- ECR: mxgraph.aws4.ecr（fillColor=#ED7100）
- RDS Proxy: mxgraph.aws4.rds_proxy（fillColor=#C925D1）
- RDS PostgreSQL: mxgraph.aws4.rds_postgresql_instance（fillColor=#C925D1）
- ElastiCache Redis: mxgraph.aws4.elasticache_for_redis（fillColor=#C925D1）
- Systems Manager: mxgraph.aws4.systems_manager（fillColor=#E7157B）
- Secrets Manager: mxgraph.aws4.secrets_manager（fillColor=#DD344C）

### 接続線スタイル
- 実線: データフロー（strokeWidth=2.5）
- 破線: 管理・監視・レプリケーション（strokeWidth=2, dashed=1）
- edgeStyle: orthogonalEdgeStyle（直角接続）
- 矢印: 単方向（source → target）

### 接続の出入り口指定（線の重複回避に必須）
- exitX, exitY: 接続線の出発点（0=左端/上端、0.5=中央、1=右端/下端）
- entryX, entryY: 接続線の到着点（同上）
- 例: ALBから複数のECSへの接続
  - ALB exitX=0.15, ECS A1 entryX=0.5, entryY=0
  - ALB exitX=0.25, ECS A2 entryX=0.5, entryY=0
  - ALB exitX=0.35, ECS A3 entryX=0.5, entryY=0
  - ALB exitX=0.65, ECS B1 entryX=0.5, entryY=0
  - ALB exitX=0.75, ECS B2 entryX=0.5, entryY=0
  - ALB exitX=0.85, ECS B3 entryX=0.5, entryY=0

### フォント
- fontSize: 11-15px（コンポーネントサイズに応じて）
- fontStyle: 0（通常）、1（太字、グループタイトルのみ）
- fontFamily: sans-serif

## 重要な注意事項

1. **座標の厳密な遵守**: 上記の座標を正確に使用してください。ずれると線が交差します
2. **exitX/exitY の必須指定**: 接続線の出入り口を必ず指定してください
3. **AWS 2025アイコンの使用**: shape=mxgraph.aws4.resourceIcon, resIcon=mxgraph.aws4.xxx 形式で指定
4. **strokeColor の統一**: 用途ごとに色を統一（ネットワーク:#0066CC、コンピュート:#ED7100、DB:#C925D1、セキュリティ:#DD344C、管理:#E7157B、ストレージ:#7AA116）
5. **階層構造の表現**: Region > VPC > AZ > Subnet の入れ子構造を正確に表現
6. **Auto Scaling Groupの可視化**: ECSタスクをグループで囲む
7. **Multi-AZ構成の明確化**: 同一リソースが両AZに配置されていることを視覚的に示す

上記の仕様に従って、完全なdraw.io XML（mxfile形式）を生成してください。

 参考文献[公式] Draw.io Integration - VS Code Marketplace
[公式] GitHub Copilot 公式ドキュメント
[公式] draw.io 公式ドキュメント
[公式] AWS Architecture Icons
LLMでシステム構成図(draw.io)を自動生成する

はじめに

draw.ioとは

完成イメージ

前提条件

環境構築

1. Draw.io Integration 拡張機能のインストール

2. GitHub Copilotの有効化確認

実装手順

手順1: draw.ioファイルの作成

手順2: GitHub Copilot Chatでプロンプトを入力

手順3: 生成されたXMLをファイルに適用

試行錯誤の過程

試行1: 曖昧な指示では失敗

試行2: レイアウトが崩れる

試行3: 詳細な仕様で成功

効果的なプロンプトの5原則

トラブルシューティング

問題1: XMLを生成してくれない

問題2: コンポーネントが重なる

問題3: AWSアイコンが表示されない

問題4: 接続線が重なる

動作確認

導入効果

まとめ

付録: 完全なdraw.io生成プロンプト

参考文献

Discussion
