ERDesigner

A zero-install, single-file web application for visually creating, editing, and managing Entity-Relationship Diagrams (ERDs).

No Python. No dependencies. Nothing to install. Just open index.html in any modern browser (Chrome, Edge, Firefox, Safari) and start designing.

🌐 Use it Online

https://stastyle.github.io/ERDesigner/ — hosted via GitHub Pages (from the gh-pages branch), always up to date, nothing to download.

Getting Started (offline)

1. Download or clone this repository.
2. Double-click index.html — that's it.

Try it out by opening the bundled sample file test.erd (toolbar → Open, or drag & drop it onto the canvas). test_schema.sql demonstrates SQL import.

Main Features

• Visual ERD Creation and Editing
  • Add, delete, and edit tables and columns.
  • Create and manage relationships between tables.
  • Crow's Foot cardinality symbols and/or text labels (configurable in Settings).
  • Data type mismatch warnings with a one-click fix when creating relationships.
  • Wide range of column data types (fully customizable in Settings).
  • Primary Key (PK) and Foreign Key (FK) support, including self-references.
  • Copy and paste tables (Ctrl+C / Ctrl+V).
  • Duplicate column name validation during table editing.
• Intuitive User Interface
  • Drag-and-drop tables with grid snapping.
  • Zoom at cursor (mouse wheel), pan (drag the background), and zoom-to-fit.
  • Resizable tables (drag the right edge).
  • Re-routable relationship lines (drag the vertical segment).
  • Diagram Explorer tree with click-to-locate and double-click-to-edit.
  • Live SQL Preview panel with one-click copy.
  • Notes pane for diagram annotations (saved inside the .erd file).
  • Context menus on tables, relationships, and the canvas.
• Customization
  • Light and dark themes.
  • Per-table header and body colors.
  • Adjustable canvas size.
  • Editable list of column data types.
• File and Data Management
  • Save and open diagrams in the .erd format — fully compatible with files created by the original desktop app.
  • Export diagrams to SQL DDL (CREATE TABLE + ALTER TABLE ... FOREIGN KEY).
  • Import SQL DDL to generate a diagram (supports "quoted", `backtick`, and [bracket] identifiers).
  • Drag & drop .erd or .sql files onto the canvas to open them.
  • Automatic in-browser autosave — unsaved work is restored on your next visit.
  • Prompt to save unsaved changes before closing, opening, or importing.
• Undo/Redo for all operations, including moves, edits, deletions, and notes.

Keyboard Shortcuts

Shortcut	Action
T	Add table
R	Add relationship
F	Zoom to fit
Delete	Delete selected table / relationship
Ctrl+C / Ctrl+V	Copy / paste table
Ctrl+Z / Ctrl+Y	Undo / redo
Ctrl+S	Save .erd file
Ctrl+O	Open .erd file
Double-click canvas	New table at cursor
Double-click table / line	Edit it
Right-click	Context menu

File Format

Diagrams are stored as .erd files — a CSV-based format containing table/column definitions, table positions and colors, canvas size, relationships (including custom line routing), and diagram notes. Files produced by this web app open in the original PyQt6 desktop app and vice versa.

Hosting (optional)

Because the app is a single static file, you can also serve it from any static host (e.g. GitHub Pages) so it's available at a URL — no build step required.

Legacy Desktop App

The original PyQt6 desktop implementation is preserved in the legacy/ directory. It requires Python 3.x and PyQt6 (pip install PyQt6, then python legacy/main.py). The web app supersedes it; both use the same .erd file format.

Contributing

Contributions are welcome! Report bugs or suggest features by opening an issue, or submit a pull request.

Feel free to contact me at stas.meirovich@gmail.com

License

This project is licensed under the GNU General Public License v3.0.