README.en.md

🗂️ SQL / DBML → ER Diagram Generator

Elegant online tool to convert SQL table creation statements into ER diagrams

English · Simplified Chinese

🌐 Try Online · Live Demo

---

✨ Overview

A pure front-end web tool for generating Chen-model ER diagrams from SQL CREATE TABLE statements and DBML code. No login, no payment, fully free and open source.

Tip

If you need a logical model (rather than the Chen model), we recommend dbdiagram.io — also free.

---

🚀 Quick Start

The easiest way — just open the online version, no installation needed:

🔗 ER Diagram Generator

Or run it locally:

git clone https://github.com/ystemsrx/sql_to_ER.git
cd sql_to_ER

Warning

Do not open sql2er.html by double-clicking it. Due to browser security restrictions on the file:// protocol, CSS / JS resources will fail to load and the page will render blank or error out. Start a local HTTP server instead:

# Option 1: Python 3 (recommended, no extra install)
python -m http.server 8000

# Option 2: Node.js
npx serve .

# Option 3: VS Code "Live Server" extension

Then visit http://localhost:8000/sql2er.html in your browser.

---

📖 Usage

1. Serve sql2er.html via a local HTTP server (see Quick Start above, or just use the online demo)
2. Paste your SQL CREATE TABLE statements or DBML code into the input area
3. Click the "Generate ER Diagram" button
4. If you are not happy with node positions, drag nodes to adjust; double-click a node to edit its content
5. For complex diagrams, drag each rectangle (entity) roughly to the desired position, then click "Smart Optimization" to auto-arrange the layout

---

🧩 Supported Formats

📘 SQL Example

CREATE TABLE users (
    id INT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE
);

CREATE TABLE posts (
    id INT PRIMARY KEY,
    author_id INT,
    title VARCHAR(255),
    FOREIGN KEY (author_id) REFERENCES users(id)
);

📗 DBML Example

Table users {
  id INT [pk]
  username VARCHAR(255) [not null]
  email VARCHAR(255) [unique]
}

Table posts {
  id INT [pk]
  author_id INT
  title VARCHAR(255)
}

Ref: posts.author_id > users.id

---

🎨 Chen Model Elements

Shape	Meaning	Database Concept
🟦 Rectangle	Entity	Table
🔶 Diamond	Relationship	Foreign Key
⚪ Ellipse	Attribute	Column
Underline	Primary Key marker	Primary Key attribute

---

⚖️ Differences from the Standard Chen Model

Important

For ease of use, this tool deviates from the standard Chen model in the following ways. If you need strict academic correctness, adjust manually per the notes below.

• Relationship Naming — The standard Chen model expects diamonds to carry semantic names (e.g., belongs to, owns). This tool displays the foreign-key field name by default.
• Entity & Attribute Naming — The standard recommends business terminology. This tool uses raw database table and column names by default.
• Custom Editing
  • ✏️ Double-click any graphical element to edit its display content
  • 🔁 Or modify the source (SQL / DBML) and regenerate

---

🖼️ Showcase

Tip

When the code is complex, the initial diagram may not be tidy. In that case:

1. Click "Smart Layout" for auto-arrangement — this usually produces a reasonably clean result with only minor tweaks needed.
2. If still messy, click "Force Alignment" for a more aggressive alignment pass, then use "Smart Layout" again for an ideal result.
3. In rare cases, manually drag the rectangles (entities) to suitable positions (no need to move other elements), then click "Smart Layout".

🔧 Direct Generation

✨ Align + Smart Layout

---

🤝 Contributing

Issues and Pull Requests are welcome! If this project helps you, please leave a ⭐ Star — it really motivates further work.

---

📄 License

Released under the MIT License.