Skip to content

JP‐2. Quick Start

Jump to bottom
Yoshiki Kajihara edited this page Jun 20, 2026 · 8 revisions

ERD Designer 利用マニュアル

Note

本マニュアルは作成中のため、誤った記載が含まれている可能性があります。

マニュアル目次

2. クイックスタートガイド

2.1 新規作成

ERD Designer で新しい ER 図を作成する手順をご説明します。

  1. ツールへのアクセス : Webブラウザでkajitiluna.github.io/erd-designerにアクセスします。

    start page

    [!NOTE] ERD Designer はブラウザの IndexedDB を使用してドキュメントをローカルに保存するため、IndexedDB の使用許可に関する通知が表示される場合があります。

  2. 新規作成の開始 : スタート画面に表示される「Create New ER Diagram」ボタンをクリックします。

  3. プロジェクト設定 : 表示されるダイアログで以下の項目を設定します。

  • Diagram name : プロジェクト名やシステム名など、わかりやすい名前を入力します（例 : 「ECサイト_ユーザー管理」）
  • Database : 対象となるデータベース管理システムを選択します（PostgreSQL, MySQL, MS SQL Server）

  1. 作成完了 :「Start design ER Diagram.」ボタンをクリックすると、新しい ER 図のキャンバスが表示され、設計作業を開始できます。

    canvas

2.2 最初の ER 図作成（5分で完了）

実際にサンプルの ER 図を作成しながら、基本的な操作方法を習得しましょう。ここでは、シンプルなブログシステムのデータベース設計を例に説明します。

ステップ1 : ユーザーテーブルの作成（1分）

  1. 左操作メニューから「TABLE」を選択します。

  2. キャンバス上の空いている場所でクリックします。

  3. テーブル名入力欄に「user」と入力します。

    add-table

  4. 「OK」をクリックして、テーブル作成を確定します。もしくは、テキストフィールドにフォーカスされているときにEnterキーを押下しても構いません。

ステップ2 : ユーザーテーブルのカラム定義（2分）

  1. 左操作メニューから「SELECT」を選択します。もしくは、 ESC キー押下でも構いません。

  2. 作成した「user」テーブルをダブルクリックして、テーブル編集ダイアログを開きます。

  3. 「Add Column」ボタンをクリックして、以下のカラムを順次追加します。

    user_id: データ型 INTEGER, Primary Key, NOT NULL
username: データ型 VARCHAR(50), NOT NULL, UNIQUE
email: データ型 VARCHAR(255), NOT NULL, UNIQUE
password_hash: データ型 TEXT, NOT NULL
created_at: データ型 TIMESTAMP, NOT NULL, DEFAULT CURRENT_TIMESTAMP
updated_at: データ型 TIMESTAMP, NOT NULL, DEFAULT CURRENT_TIMESTAMP
    add-columns

  4. 各カラムの設定が完了したら、「OK」ボタンをクリックして変更を保存します。

ステップ3 : 投稿テーブルの作成とリレーション設定（2分）

  1. 関連先テーブルの作成 : 左操作メニューから「TABLE」を選択します。

  2. 再度キャンバス上の空いている場所でクリックします。

  3. テーブル名入力欄に「post」と入力します。

  4. post テーブルに以下のカラムを追加します。

    post_id: データ型 INTEGER, Primary Key, NOT NULL
user_id: データ型 INTEGER, NOT NULL（外部キー用）
title: データ型 VARCHAR(200), NOT NULL
content: データ型 TEXT
published: データ型 BOOLEAN, NOT NULL, DEFAULT FALSE
created_at: データ型 TIMESTAMP, DEFAULT CURRENT_TIMESTAMP
updated_at: データ型 TIMESTAMP, DEFAULT CURRENT_TIMESTAMP

    なお、user_id は user テーブルを作成した際に定義した user_id カラムと同一定義なので、以前定義した内容を流用できます。

    • 「Add Column」ボタンをクリックして表示される Edit table column ダイアログにて、「Create new column model.」のテキストの右側に配置されている検索ボタンをクリックします。 click-search

    • Search column model ダイアログにて、流用する user_id をクリックして選択後、「OK」ボタンをクリックします。 click-search

    • Edit table column ダイアログに user_id の内容が反映されています。なお、Primary Key, Not Null, Unique 設定は流用されずテーブルごとに管理されるので、必要に応じて個別に定義してください。 click-search

      [!NOTE] 上記で流用したカラムの定義は、流用元と同じ定義を参照しています。つまり post テーブル側で user_id のカラム定義を変更した場合、user テーブルの user_id にも同じ変更内容が反映されます。

  5. リレーションシップの作成 : 左操作メニューから「RELATION」を選択します。

  6. user テーブル上にてマウスを押下し、（マウスボタンを押したまま）post テーブルまでドラッグします。もしくは user テーブルをクリック後、post テーブルをクリックするのでも構いません。

    add-columns

  7. リレーション設定ダイアログが表示されるので、「user.user_id」と「post.user_id」の関連付けを確認し、「OK」をクリックします。

    add-columns

2.3 編集モードの概要

ERD Designer には、異なる目的に応じた5つの編集モードがあります。モードは画面左側のパネルで切り替えることができます。

  • SELECT モード: テーブルやリレーションの選択、移動、編集に使用します（最も頻繁に使用するモード）
  • GRAB モード: キャンバス全体を自由に移動させるモード（パンニング専用）
  • TABLE モード: 新しいテーブルを追加するモード。キャンバス上でクリックするとテーブルが作成されます
  • RELATION モード: テーブル間のリレーション（外部キー関係）を作成するモード。親テーブルから子テーブルへドラッグして作成します
  • MEMO モード: ER図上にメモ（付箋）を配置するモード。設計時の注釈やグルーピングに活用できます

Tip

作業の流れに応じてモードを切り替えることで、効率的に設計作業を進められます。例えば、複数のテーブルを連続して作成する場合は TABLE モードのままにし、編集や移動を行う場合は SELECT モードに切り替えます。

2.4 基本操作の概要

キャンバス操作

  • テーブルの移動 : テーブルの任意の場所をクリックしてドラッグすることで、自由に位置を変更できます
  • ズーム機能 : 画面右下部のズームコントロールにて調整できます
  • パン（画面移動） : 右クリックを押しながらドラッグすることで、表示範囲を移動できます

テーブル操作の詳細

  • テーブルの追加 : Table 作成モード時に、キャンバス上でクリックします
  • テーブルの選択 : テーブルをクリックすることで選択状態となり、テーブルの右下に操作アイコンが表示されます
  • テーブルの編集 : テーブルをダブルクリックすることで、テーブル名やカラム定義の編集ダイアログが開きます
  • テーブルの削除 : 削除対象のテーブルを選択（クリック）してからDeleteキーを押します。関連するリレーションシップも自動的に削除されます

リレーションシップ操作の詳細

  • リレーションシップの作成 : リレーション作成モード時に、親テーブル（参照される側）から子テーブル（参照する側）に向かってドラッグすることで作成します
  • リレーションシップの選択 : 関係を表す線をクリックすることで選択状態となり、マウスカーソルの近くに操作アイコンが表示されます
  • リレーションシップの編集 : 関係を表す線をダブルクリックすることで、カーディナリティや参照整合性の設定を変更できます
  • リレーションシップの削除 : 関係線を選択してDeleteキーを押すことで削除できます

2.5 SQLスクリプトの生成と出力

設計した ER 図から実際のデータベースを構築するための SQLス クリプトを生成する方法を説明します。

DDL生成の基本手順

  1. エクスポート機能へのアクセス : メニューバーの「Export」メニューから「Export DDL」を選択します。

  2. DDL生成オプションの設定: 表示されるダイアログで以下のオプションを選択します。

  • Tables: CREATE TABLE 文を含める（通常はON）
  • Indexes: インデックス作成文を含める（パフォーマンス向上のため推奨：ON）
  • Foreign Keys: ALTER TABLE 文による外部キー制約の追加を含める（推奨：ON）
  • Comments: テーブルやカラムのコメント文を含める（ドキュメント化のため推奨：ON）
  • Schemas: スキーマ名を含める（PostgreSQL、MS SQL Server の場合のみ有効）

  1. ファイル名の設定: 出力される SQL ファイルの名前を指定できます（例：database_schema.sql）

  2. DDL生成の実行: 「EXPORT DDL」ボタンをクリックすると、設定に応じた SQL スクリプトが生成され、ファイルのダウンロードが始まります。

Tip

生成された DDL ファイルは、psql、mysql、sqlcmd などのコマンドラインツール、またはデータベース管理ツールで実行することで、実際のデータベースを構築できます。

2.6 ERD ファイルの保存と読み込み

設計した ER 図をファイルとして保存し、後で読み込むことができます。バックアップや他の環境への移行に便利です。

ERD ファイルのエクスポート（保存）

  1. メニューバーの「Export」メニューから「Save to ERD File」を選択します。
  2. ファイル名を指定して、.erd ファイルとしてダウンロードされます。
  3. このファイルには、テーブル定義、リレーション、配置情報など、すべての設計情報が含まれます。

ERD ファイルのインポート（読み込み）

Important

ERD ファイルのインポートはオンラインツールのみサポートしています。

  1. オンラインツール Top 画面にて「Import from .erd file」を選択します。
  2. 保存した .erd ファイルを選択します。
  3. ER 図が復元され、編集を続行できます。

2.7 DDLからのインポート（Experimental）

既存のデータベースから生成された DDL を読み込んで、自動的に ER 図を作成することができます。

基本的な使い方

  1. メニューバーの「Import」メニューから「Import from DDL」を選択します。
  2. DDL テキストを貼り付けます。
  3. 必要に応じて「Comment Separator」を設定します（カラムコメントから論理名を抽出する場合）。
  4. 「IMPORT」ボタンをクリックすると、DDL が解析され、ER 図が生成されます。

Note

DDL インポート機能は実験的機能（Experimental）です。複雑な DDL 構文や一部の高度な機能には対応していない場合があります。インポート後は、生成された ER 図を確認し、必要に応じて手動で調整してください。

Comment Separator とは

カラムのコメントに論理名と説明を含めている場合（例：COMMENT ON COLUMN users.username IS 'ユーザー名 | ログイン時に使用する一意の識別子';）、セパレータ（この例では |）を指定することで、論理名と説明を自動的に分離できます。

Clone this wiki locally