A local-first, open-source database diagram editor — write DBML on the left, see a live entity‑relationship diagram on the right.
A clone of the dbdiagram.io editing experience that runs entirely in your browser — no backend, no account, no paywall. Your schemas live in IndexedDB on your own machine.
dbdiagram.io is excellent but gates dark mode, exports, and unlimited diagrams behind a subscription, and its canvas degrades past ~30–40 tables. This project aims to be better in four deliberate ways:
- Free. Dark mode, all exports, table groups/colors, and unlimited diagrams — no paywall.
- Fast at scale. Smooth pan/zoom/drag targeting 100+ tables; canvas gestures bypass React and mutate the DOM imperatively.
- A better editor. Schema-aware autocomplete, precise inline errors, a problems panel, format-on-demand, and two-way editor↔canvas navigation.
- Stable by design. A syntax error never blanks the diagram — the canvas always renders the last good parse and shows a "stale" badge while you type.
- DBML editor built on CodeMirror 6 with syntax highlighting, schema-aware autocomplete (tables, columns, types, settings, block snippets), inline error squiggles with line/column, a problems panel with click-to-jump, and format-on-demand.
- Live ER diagram on a purpose-built SVG canvas — field-anchored orthogonal edges with crow's-foot markers, drag-to-move tables, and pan/zoom.
- Two-way navigation — double-click a table on the canvas to reveal it in the editor, and cursor position in the editor highlights the matching table.
- Local-first persistence — debounced autosave to IndexedDB; degrades gracefully to in-memory operation if storage is unavailable.
- Resilient parsing — DBML is parsed off the main thread in a Web Worker (with an
in-thread fallback), powered by
@dbml/core.
- Canvas depth — level-of-detail rendering, viewport culling, minimap, snap-to-grid, alignment guides, table groups, sticky notes, ELK auto-layout, dark theme.
- Interop — SQL DDL import/export (PostgreSQL, MySQL, SQL Server), PNG/SVG export, project snapshots and history.
- Hardening — end-to-end tests, performance CI, and a bundle-size budget.
| Concern | Choice |
|---|---|
| UI | React 19 + TypeScript (strict) |
| Build | Vite |
| State | zustand |
| Editor | CodeMirror 6 |
| DBML parsing | @dbml/core (Web Worker) |
| Diagram | Custom SVG renderer (no diagram library) |
| Persistence | IndexedDB via idb |
| Tests | Vitest |
Prerequisites: Node.js ≥ 20 and npm.
git clone https://github.com/msiShariful/dbdiagram-clone.git
cd dbdiagram-clone
npm install
npm run dev # start the Vite dev server (http://localhost:5173)npm run dev # start the dev server
npm run build # typecheck (strict, noEmit) + production build
npm test # run the full test suite once
npm run test:watch # run tests in watch mode
npx tsc --noEmit # typecheck onlyThe codebase enforces a strict layering rule: src/core/ is pure TypeScript and must never
import React, zustand, or any UI code — it is a framework-agnostic engine.
src/
core/ framework-agnostic engine (zero React imports)
model/ normalized Schema + Layout types — the single source of truth
parse/ @dbml/core wrapper (runs in a Web Worker), error normalization,
debounced latest-wins pipeline, position reconciliation
format/ whitespace-only DBML formatter (comment- and string-preserving)
editor/ CodeMirror integration — language mode, completion, linting, navigation
canvas/ SVG renderer — table nodes, edge routing, viewport
app/ zustand store, persistence, and top-level React wiring
Key invariants (see CLAUDE.md for the full list):
- Last good parse — parse failures update only the error state; the schema and layout are never cleared, so the canvas never blanks while you type.
- Text vs. layout — canvas interactions write layout state only, never DBML text.
- Performance contract — pan/zoom/drag bypass React and mutate the DOM via refs; the store commits once, on gesture end.
Design specs and per-milestone implementation plans live under
docs/superpowers/.
Contributions are welcome! Please read CONTRIBUTING.md for the development workflow, coding conventions, and the architecture invariants to preserve.
MIT © msiShariful