Mermaid GUI StudioでER図を作れるようにしたとき、ふと「逆に、すでにあるテーブル定義（DDL）から図を起こしたいときはどうする？」と思いました。手元の CREATE TABLE 文をコピペするだけでER図になれば、既存システムの構造を把握したいときや、レビュー資料を作るときにそのまま使えます。そこで作ったのが DDL → ER図 変換ツール です。

👉 DDL → ER図 変換ツールを開く

何を作ったか

ひとことで言うと、CREATE TABLE などのDDLを貼り付けると、Mermaid形式のER図に自動変換してくれるブラウザツールです。他の自作ツールと同じく、入力したDDLが外部サーバーに送信されることはなく、変換処理はすべてブラウザの中で完結します。

画面は3つの列に分かれています。

列 役割
DDL 入力 CREATE TABLE を含むDDLを貼り付けるエディタ
ER図 解析結果をMermaidのerDiagramとしてリアルタイム描画
Mermaid コード 生成されたMermaidコード。手動編集も可能

DDLを書き換えると、ER図とMermaidコードの両方が即座に更新されます。ヘッダーの「データベースの種類」で、貼り付けるDDLがPostgreSQL / MySQL / SQL Server / Oracle / SQLiteのどれかを選べるようになっていて、方言ごとの書き方の違いを吸収します。

flowchart LR
  DDL["DDL入力<br/>(CREATE TABLE / ALTER TABLE / COMMENT ON)"] --> PARSE["自作パーサー<br/>(テーブル・列・制約を抽出)"]
  PARSE --> MODEL["内部モデル<br/>(エンティティ・外部キー関係)"]
  MODEL --> MMD["Mermaidコード<br/>(erDiagram)"]
  MMD --> SVG["ER図プレビュー<br/>(Mermaid.jsで描画)"]

こだわったポイント

1. 「データベースの種類」は飾りにしない

DB選択のプルダウンをただ並べるだけのツールにはしたくなかったので、実際に解析結果が変わる部分を用意しました。

  • バッククォート（`）・ダブルクォート（"）・角括弧（[ ]）による識別子の引用は、選んだ種類に関わらずすべて自動判別します。
  • SQL Serverを選ぶと、バッチ区切りの GO 単独行を文の区切りとして認識します。ここを見落とすと、GO で区切られた2つ目以降の CREATE TABLE が前の文に飲み込まれて消えてしまうので、地味に重要な処理です。
  • Oracleを選ぶと、SQL*Plus形式の / 単独行を同じく文の区切りとして扱います。
  • 「サンプルを読み込む」ボタンは、選択中の種類に応じてAUTO_INCREMENT（MySQL）・IDENTITY（SQL Server）・SERIAL（PostgreSQL）など、その方言らしい書き方のサンプルDDLを表示します。

【SQL ServerのGO区切りの例（サンプル読み込みで再現可能）】

2. 外部キーの制約から、カーディナリティを機械的に推定する

DDLには「1対多」「1対1」のような関係の種類は書かれていませんが、制約からある程度は推測できます。

  • 外部キー列が NOT NULL または主キーの場合は、参照先テーブルとの関係を「1（必須）」、それ以外は「0または1（任意）」として表示します。
  • 外部キー列が、その列を持つテーブル自身の主キーやUNIQUE制約と一致する場合は「1対1」、それ以外は「1対多」として表示します（例えば order_items のように、複数の外部キーを組み合わせた複合主キーを持つ中間テーブルは、正しく「多」側として扱われます）。

もちろんDDLだけでは業務ルールまでは分からないので、あくまで「機械的に妥当な推定値」です。実態と違う場合は、右側のMermaidコードを直接書き換えて調整できます。

3. 解析に失敗しても、そこで止めない

現実のDDLには、このツールが完全には理解できない記法（トリガーやストアドプロシージャなど）が混ざっていることもあります。そうした行に出会っても処理を中断せず、その部分だけスキップしたうえで警告として一覧表示し、他のテーブルの解析は続行するようにしています。ALTER TABLE ... ADD CONSTRAINT ... FOREIGN KEY で後から追加される外部キーや、COMMENT ON TABLE / COMMENT ON COLUMN（PostgreSQL・Oracle）による論理名の取り込みにも対応しているので、実際のダンプに近い形式でもそれなりに解析できるはずです。

【一部エラーとなるインプット例】

【一部エラー時のアウトプット例】

4. Mermaidコードは、いつでも直接編集できる

自動生成された関係やカーディナリティが意図と違う場合のために、「手動編集する」チェックを入れると右側のMermaidコードを直接書き換えられます。チェックを外すと、DDLから再生成した内容に戻ります。

5. 保存・読み込みは3段構え

  • DDLを保存: 入力したDDLをそのまま .sql として保存
  • プロジェクト保存: DDL・選択中のDB種類・（手動編集していれば）そのMermaidコードをJSON化し、SHA-256のハッシュ値と一緒に .md へ埋め込んで保存。このツールで開き直すと、入力内容を完全に復元できます
  • 自動保存: 入力内容はブラウザのlocalStorageにも自動保存されるので、うっかりタブを閉じても次回開いたときに復元されます

実際に触ってみる

  1. ヘッダーの「データベースの種類」で、貼り付けるDDLの種類を選びます
  2. 左側のエディタに CREATE TABLE を含むDDLを貼り付けます（迷ったら「📋 サンプルを読み込む」で選んだ種類のサンプルが試せます）
  3. 中央にER図、右側にMermaidコードが自動的に表示されます
  4. 気になる関係があれば「手動編集する」でコードを直接調整し、必要な形式（DDL / Mermaidコード / SVG / 単独HTML / プロジェクト一式）で保存します
erDiagram
    customers ||--o{ orders : "references"
    orders ||--o{ order_items : "references"
    products ||--o{ order_items : "references"
    %% customers: 顧客
    customers {
        SERIAL id PK
        VARCHAR(100) name
        VARCHAR(255) email UK "メールアドレス"
    }
    products {
        SERIAL id PK
        VARCHAR(100) name
        NUMERIC(10,2) price
    }
    orders {
        SERIAL id PK
        INTEGER customer_id FK
        TIMESTAMP ordered_at
    }
    order_items {
        INTEGER order_id PK,FK
        INTEGER product_id PK,FK
        INTEGER quantity
    }

まとめ

「既存のテーブル定義から図を起こす」というのは地味な作業ですが、DDLを読みながら手作業でER図を書き起こすのは意外と骨が折れます。DB方言ごとの細かい違いを吸収しつつ、解析できない部分は警告に留めて処理を止めない、という2点を意識したことで、実務のダンプにもそれなりに耐えられるツールになったと思います。

手元のテーブル定義を貼り付けるだけなので、ぜひ試してみてください。

👉 DDL → ER図 変換ツールを開く

※この記事はAIを利用して作成しています