ブラウザだけで利用できる ERMaster 代替を目指した ER 図作成ツール ERD Designer を作っていることは何度か投稿している (背景等は過去のエントリ参照)。前回の VSCode 拡張機能対応の投稿からしばらく経ってしまったが、地味に機能追加は続けていたので、まとめて紹介したい。
- AI コーディングエージェント連携 (Agent Plugin)
- 対応データベースの追加 (MariaDB, SQLite, BigQuery, Snowflake)
- Canvas の検索パネル
- CHECK 制約、文字コード/COLLATE などの細かい機能追加
なお、GitHub のリポジトリ、VSCode Marketeplace, Google Workspace で公開しているアプリのリンクはこちら。
AI エージェント連携について
前回の投稿で、「生成 AI の活用を想定した場合 MCP Server への対応は必要だろう」と書き、VSCode 拡張機能で MCP Server を起動できるようにした。これはこれで動くのだが、使ってみると気になる点があった。MCP Server を使うには VSCode を起動しておく必要があり、エージェントが CLI 越しに動くような環境 (Claude Code をターミナルで使う、CI 上でエージェントを動かす、など) だと相性が良くない。
そこで、MCP Server を介さず、SKILLS より .erd ファイルを直接編集できるようにした。これにより、Claude Code や GitHub Copilot CLI から直接操作できるようなる。また、MCP Server だと常時コンテキストを消費するが、SKILLS なら利用する場合のみ読み込むので、トークン浪費を回避できる。
なお、SKILLS より直接 .erd の JSON を編集させるのではなく、SKILLS に node のスクリプトを含め、このスクリプトを呼び出すようにしている。
これは、直接ファイルを編集させると、カラムやリレーションが ID 参照で繋がっているため、リファレンスの整合性や Canvas 上の配置が簡単に壊れてしまうからである。
スクリプト経由であれば、テーブルを消せば紐づくリレーションも一緒に片付く、といった後始末をアプリ本体と同じロジックで行える。
導入方法
Claude Code の場合はプラグインとして追加する。
claude plugin marketplace add kajitiluna/erd-designer claude plugin install erd-designer@erd-designer
GitHub Copilot CLI の場合も同様。
copilot plugin marketplace add kajitiluna/erd-designer copilot plugin install erd-designer@erd-designer
使い方
SKILL が読み込まれると、あとはいつも通りチャットで頼むだけでよい。エージェントは SKILL.md の指示に従って、使うツールを list-tools / describe で確認しながら同梱の CLI を呼び出し、.erd ファイルを更新する。
.erd の JSON を直接編集させるのではなく CLI を経由させているのは、カラムやリレーションが ID 参照で繋がっているため、手で JSON を書き換えるとリファレンスの整合性や Canvas 上の配置が簡単に壊れてしまうからである。CLI 経由であれば、テーブルを消せば紐づくリレーションも一緒に片付く、といった後始末をアプリ本体と同じロジックで行える。
実際に試してみる
試しに、BigQuery のサンプルドキュメントに対して Claude Code でこう頼んでみた。
> ./bq_sample.erd に order テーブルを追加してください。 > INT64 型を PK とする order_id を定義してください。また、user_id を持ち、user:order=1:0..N の関連を定義してください。 > orderテーブルの色は黄色系にしてください
エージェントは erd-designer の SKILL を読み込み、list-tools を実行し利用可能な tools を確認。
以降 list-tools の結果に基づき、必要なコマンドを順次実行していった。
(下記では省略しているが、list-tables で既存テーブルを確認の上、add-table → create-relation の順に CLI を呼び出した)
⏺ Skill(erd-designer:erd-designer) Successfully loaded skill Searched for 1 pattern, ran 1 shell command まず既存テーブル一覧とuserテーブルの構造を確認する。 Ran 4 shell commands INT64のcolumnTypeIdは17。次にorderテーブルを追加する(order_id: INT64 PK、user_id: INT64、色は黄色系)。 Ran 1 shell command orderテーブルを作成できたので、user:order = 1:0..Nの関連を作成する。 Ran 2 shell commands order.user_idのcolumnIdが判明した。関連を作成する。 Ran 1 shell command ✅ 完了しました。bq_sample.erd に以下を追加しました。 - order テーブル(黄色系ヘッダー #FFF9C4) - order_id (INT64, PK, NOT NULL) - user_id (INT64, NOT NULL) - 関連: user (1) — order (0..N)、user.user_id → order.user_id
VSCode にて .erd ファイルを表示していると、上記の更新が即時に反映される。
users / orders の位置揃えこそ手で直したくなるが、カラムの型・PK・FK の関係は期待通り作成できた。
手作業だと手間がかかるテーブルやカラム追加はエージェントに任せることで、作成作業は効率化できると思われる。
おそらく、テーブル設計の改善をエージェントと壁打ちしながら .erd に反映、といったこともできると思われる。
その他 MCP Server 側の改善
SKILLS とは別に、VSCode 拡張機能の MCP Server 側も、参照系の操作を resource だけでなく tool としても呼べるように整理した。resource URI を組み立てるのが苦手な、tool 呼び出し中心のエージェントでも ERD のデータを読めるようにするための変更である。
なお、SKILLS も MCP Server も、まだ実験的な機能という位置づけ。
対応データベースの追加
DB 追加のリクエストがいくつか溜まっていたので、まとめて対応した。MariaDB, SQLite, BigQuery, Snowflake の 4 種を追加し、既存の PostgreSQL, MySQL, MS SQL Server と合わせて計 7 種の DDL を出力できるようになった。
MariaDB は MySQL 互換の DDL に UUID / INET4 / INET6 型を加えたもの、SQLite は型アフィニティベースの列型と rowid ベースの主キー、Snowflake は VARIANT / OBJECT / ARRAY などの半構造化型やスキーマ定義に対応している。なお、Amazon Aurora や CockroachDB, TiDB のような PostgreSQL/MySQL 互換データベースは、対応する方言でおおむねモデリングできるはず。
BigQuery の STRUCT カラム
BigQuery を対応するにあたり、他の RDBMS と大きく異なる機能として STRUCT 型に対応した。 既存の column と同様、複数のテーブルで同じ STRUCT を使いまわすことができ、STRUCT の中に別の STRUCT を入れ子にすることもできる (STRUCT が自分自身を再帰的に参照するような定義はエラーにしている)
テーブル編集画面では、「Add column」「Add group column」に並んで「Add struct column」が追加され (BigQuery のドキュメントでのみ表示される)、これより STRUCT のメンバーを編集するダイアログが開く。
Canvas 上では STRUCT のメンバーをインデントして展開表示するようにした。
DDL に出力するとこうなる。
CREATE TABLE users ( user_id INT64 NOT NULL OPTIONS(description="User ID"), user_name STRING OPTIONS(description="User Name"), address STRUCT<street STRING, zip STRING> OPTIONS(description="Address"), PRIMARY KEY (user_id) NOT ENFORCED ) OPTIONS(description="Users");
仕様書エクスポートでは STRUCT 自体の行に加えて、メンバーひとつひとつに address.street のようなドット区切りの行が別途出力されるようにしている。
BigQuery は CREATE INDEX や UNIQUE 制約自体をサポートしていない (Snowflake も標準テーブルでは CREATE INDEX 非対応) ので、そのあたりの機能は該当 DB を選んだ場合は自動的に UI 上から消えるようにしてある。
Canvas の検索パネル
Ctrl+F (macOS は ⌘+F) で検索パネルを開き、テーブル・カラム・リレーション・メモを横断して検索できるようにした。ヒットした箇所は Canvas 上でハイライトされ、矢印ボタンや Enter / Shift+Enter で次のヒットに移動できる。検索対象はチェックボックスでカテゴリごとに絞り込める。
従来はブラウザの検索機能で代替していたが、canvas サイズの制限をなくしたことにより、ブラウザの機能が利用できなくなった。このため、独自実装で提供するようにした。
その他の細かい機能追加
- テーブル・カラムへの CHECK 制約 (
${column_name}/${this}プレースホルダで参照名を解決) - CHARACTER SET / COLLATE / オプション式の指定 (前回記事で「今後取り組む」と書いていた分)
- DDL エクスポート時のコメント形式選択 (論理名のみ / 論理名+説明)
- インタラクティブな HTML / SVG エクスポート (@shlomi-dr さんの貢献。#177, #178)
今後の機能追加について
SKILLS を使うことにより作成の手間は軽減できるようになったが、現状、活用できる場面がローカルの .erd ファイルを編集する場合に限られる。
Google Drive App の場合、ローカルに同期することで SKILLS を利用することはできるが、描画をリアルタイムに反映することはできない。
このあたりの利用しづらさを改善したい。
