AI Session Notes - 2026-03-26

draw.io の環境構築と活用方法

学んだこと

draw.io は完全無料のオープンソース（Apache License 2.0）ダイアグラムツール。収益モデルは Atlassian や Google Workspace 向けの有料連携プラグイン
デスクトップアプリは brew install --cask drawio でインストール可能
.drawio ファイルの中身は XML なので、テキストエディタでも直接編集できる（ただし座標やスタイルが細かいため、GUIでの作業が基本）
AWS アイコンセットが組み込まれており、サイドバーで「aws」と検索するとサービスアイコンが使える。年ごとにバージョンがあるので最新年のものを使う

CLI からエクスポートが可能:

# PNG
draw.io --export --format png --output output.png input.drawio
# SVG
draw.io --export --format svg --output output.svg input.drawio
# PDF
draw.io --export --format pdf --output output.pdf input.drawio

draw.io ファイルの管理戦略

.drawio は XML なので git diff が効き、リポジトリ肥大化も少ない。PNG などのバイナリと比べて git との相性が良い
.drawio.svg 形式（--embed-diagram オプション）で保存すると、SVG として画像表示でき、かつ draw.io で編集もできる一石二鳥のファイルになる
```
draw.io --export --format svg --embed-diagram --output output.drawio.svg input.drawio
```
Neovim では GUI 埋め込み編集はできない。draw.io ファイルの編集はデスクトップアプリか VS Code 系エディタの拡張が適している

ネットワーク基礎と AWS 構成の理解

学んだこと

AWS の各サービスはネットワークの基本概念に名前を付けたもの（VPC=仮想ネットワーク、Route 53=DNS、ALB=ロードバランサなど）。ネットワーク基礎を先に理解するとAWSの設定が「なぜそうなるか」で理解できる

IPアドレスとCIDR表記

10.0.0.0/16 の /16 は「先頭16ビットがネットワーク部（固定）、残り16ビットがホスト部（自由）」を意味する
/16 → 約65,534台分、/24 → 約254台分のアドレスが使える
VPC（/16）の中にサブネット（/24）を切り出す構造

プライベートIPアドレス

10.0.0.0/8、172.16.0.0/12、192.168.0.0/16 は内部ネットワーク専用の予約範囲（RFC 1918）
家庭のWi-Fiルーターが 192.168.x.x を振るのも同じ仕組み
VPC 同士は完全に分離されているため、異なるユーザーが同じプライベートIP範囲を使っても衝突しない

VPC と Public/Private Subnet

VPC の「Private」 = 他の AWS ユーザーから分離されているという意味
Subnet の「Public/Private」 = インターネットとの通信ができるかどうかの区分
技術的な違いはルートテーブルの1行だけ:
Public Subnet: 0.0.0.0/0 → IGW のルートがある
Private Subnet: そのルートがない
0.0.0.0/0 は「他のルールに当てはまらない全ての宛先」を意味する

インターネットゲートウェイ（IGW）とNAT

IGW は VPC とインターネットを接続する出入口。VPC に1つ取り付ける
IGW の役割は2つ: インターネットとの通り道になること、パブリックIP ↔ プライベートIP の変換（NAT）
NAT（Network Address Translation） はIPアドレスを別のIPアドレスに変換する仕組み。家庭のルーターも同じことをしている

ルートテーブル

各サブネットに紐づく「宛先ごとにどこへパケットを送るか」のルール表
VPC 内部の通信（10.0.0.0/16 → local）はどのサブネットでも自動的にルーティングされる
Private Subnet のサーバーがインターネット宛のパケットを送ろうとしても、ルートがないため破棄される → これがセキュリティの仕組み

DNS（Route 53）とALB

DNS は「ドメイン名 → IPアドレス」の変換（電話帳のようなもの）。Route 53 は AWS の DNS サービス
ALB（Application Load Balancer） はリクエストを複数のサーバーに振り分ける。目的は負荷分散と可用性（1台が落ちてもサービス継続）

リクエストの全体フロー

ユーザーが myapp.com にアクセス
Route 53 が「54.238.xx.xx だよ」と返す（DNS解決）
リクエストが IGW に到達
IGW がパブリックIP → プライベートIP に変換して ALB に届ける
ALB が EC2 インスタンスに振り分ける
Rails アプリが処理し、必要に応じて RDS（DB）に問い合わせる
レスポンスが逆の経路でユーザーに返る

LLM での図生成と Mermaid

学んだこと

LLM に図を生成させる場合、draw.io の XML は冗長（スタイル属性・座標が大量）でトークン消費が大きく、生成が遅い
Mermaid がテキストベースのダイアグラム記法として LLM との相性が最も良い。同等の図を draw.io XML の数分の一のトークンで表現できる
Mermaid の主要な図の種類:
フローチャート (graph TD) - 処理の流れや条件分岐
シーケンス図 (sequenceDiagram) - サービス間の通信の時系列
ER図 (erDiagram) - テーブルのリレーション
状態遷移図 (stateDiagram-v2) - オブジェクトの状態変化

draw.io と Mermaid の使い分け

用途	ツール	理由
フロー図・シーケンス図・ER図	Mermaid	テキストで十分。git diff も読みやすい
ノードを自由配置するネットワーク図	draw.io	位置の自由度が必要
LLM にたたき台を作らせる	Mermaid	トークン効率が良く高速
GUI で細かく仕上げる	draw.io	ドラッグ＆ドロップで直感的

MkDocs Material での Mermaid 有効化

MkDocs Material には Mermaid の JS が組み込み済みなので、追加パッケージのインストールは不要

mkdocs.yml の pymdownx.superfences に custom_fences 設定を追加するだけで有効化できる:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

GitHub も .md 内の ```mermaid ブロックをネイティブでレンダリングするため、特別な設定なしで表示される

メタ情報

ツール: Claude Code
関連技術: draw.io, Mermaid, MkDocs Material, AWS, VPC, Subnet, IGW, NAT, CIDR, DNS, Route 53, ALB, EC2, RDS, ネットワーク基礎