Mermaid ER Diagram Viewer

Mermaid の ER 図（.mmdファイル）をブラウザで表示し、エンティティをドラッグで自由に配置できるローカル Web ビューアーです。

なぜ作ったか

Mermaid の ER 図は自動レイアウト（Dagre/ELK）で配置されるため、テーブル数が増えるとノードの位置がぐちゃぐちゃになり、DB 構造を視覚的に理解しづらくなります。

このツールは .mmd ファイルを無加工のまま維持 しつつ、ノード座標だけをサイドカー JSON ファイル（*.mmd.layout.json）で管理します。エディター（VSCode / Zed / Terminal）で .mmd を編集するとブラウザが自動更新されるため、Claude Code などとの併用に最適です。

機能

• ブラウザ上のファイルピッカーで .mmd ファイルを選択（引数なし起動対応）
• 最近開いたファイルの履歴管理
• SVG によるカスタムレンダリング（Mermaid.js 不使用）
• エンティティのドラッグ＆ドロップ配置
• 座標のサイドカー JSON 自動保存
• .mmd ファイル監視によるライブリロード
• 直交線コネクタ＋ Crow's foot カーディナリティ記号
• パン（Ctrl+ドラッグ）＆ズーム（マウスホイール）
• テーブル選択時の親子関係ハイライト
• テキストクリックでコピー
• サイドカー JSON によるエンティティ日本語ラベル

使い方

クイックスタート

npm install
npm run dev -- sample.mmd

ブラウザが自動で http://localhost:3000 を開き、サンプルの ER 図が表示されます。

ファイルピッカーモード（引数なしで起動）

npm run dev

引数なしで起動すると、ブラウザにファイル選択画面が表示されます。

• ディレクトリをブラウズして .mmd ファイルを選択
• 最近開いたファイルの履歴から素早くアクセス（~/.mermaid-er-viewer/recent.json に最大20件保存）
• ビューアー内の「← File」ボタンでファイル選択画面に戻れます

自分の .mmd ファイルを直接表示する

npm run build
node dist/server/index.js path/to/your-diagram.mmd

• .mmd ファイルのパスを引数に指定して起動します
• 初回起動時にエンティティは自動レイアウトされます
• ドラッグで配置を変更すると、座標が your-diagram.mmd.layout.json に自動保存されます
• 次回起動時は保存済みの配置が復元されます

オプション

--port <number>   ポート番号（デフォルト: 3000）
--no-open         ブラウザを自動で開かない
--help            ヘルプを表示

Claude Code との連携

Claude Code で .mmd ファイルを編集しながら、ブラウザでリアルタイムに確認できます。

1. ターミナルでビューアーを起動しておく
2. 別のターミナルで Claude Code を使い .mmd ファイルを編集
3. ファイル保存と同時にブラウザが自動更新される

.mmd ファイル自体には座標情報を書き込まないため、Claude Code が生成する ER 図定義を汚しません。

マウス操作

| 操作 | 動作 | |------|------| | ドラッグ | エンティティを移動 | | クリック | エンティティを選択し、関連テーブルをハイライト | | テキストクリック | テーブル名・カラム名をクリップボードにコピー | | Ctrl + ドラッグ | キャンバスをパン（スクロール） | | ホイールボタン + ドラッグ | キャンバスをパン | | マウスホイール | ズームイン / ズームアウト | | 空白エリアをクリック | ハイライト解除 |

レイアウトファイル（.mmd.layout.json）

エンティティの座標・キャンバス状態・日本語ラベルを管理するサイドカーファイルです。.mmd ファイルと同じディレクトリに自動生成されます。

• 自動保存: エンティティをドラッグするたびに座標が保存されます
• 自動復元: 次回起動時に保存済みの配置が復元されます
• 新規エンティティ: .mmd に新しいテーブルを追加すると、自動レイアウトで配置されます
• Git 管理: .gitignore に *.layout.json を追加しておくと、チーム間でのコンフリクトを防げます（個人の配置はローカルのみ）

日本語ラベルの設定

labels にエンティティ名と日本語名の対応を記述すると、テーブルヘッダーに日本語名が併記されます。

{
  "labels": {
    "CUSTOMER": "顧客",
    "ORDER": "注文"
  }
}

キーボードショートカット

| キー | 操作 | |------|------| | Scroll | ズーム | | Ctrl+Drag | パン | | F | 全体フィット | | L | オートレイアウト | | Ctrl+0 | ズームリセット | | Esc | ハイライト解除 |

技術スタック

| レイヤー | 技術 | |----------|------| | バックエンド | Node.js + Express | | ファイル監視 | chokidar | | WebSocket | ws | | フロントエンド | Vanilla TypeScript + SVG | | ビルド | esbuild |