ERDB (ER DiagramBase)

A database that grows out of the diagram. Write a Mermaid erDiagram and, in the same app, switch to data mode: every entity becomes an editable table in the browser, foreign keys become dropdowns pointing at rows of the related entity, and everything is saved locally. No backend, no SQL. Multiple projects, each with its own diagram and data.

Live: https://davydmaker.github.io/erdb/

Features

• Projects: switch between projects from the top bar; create, rename, duplicate and delete. Each project keeps its diagram, data, FK choices and selected entity.
• Structure mode: a CodeMirror editor with syntax highlighting for erDiagram, live linting and context-aware autocomplete (entities, cardinality operators, types, PK/FK/UK) next to the rendered diagram. Drag to pan, scroll or pinch to zoom, double-click an entity to open its data.
• Data mode: one editable grid per entity. Numeric primary keys auto-increment; duplicate PK/UK values and broken FKs are highlighted. Changing a PK cascades to referencing rows; deleting a referenced row asks for confirmation and clears the references.
• Foreign keys: Mermaid marks FK but does not say where it points. ERDB infers the target from the attribute name (customer_id, id_customer, customerId all resolve to CUSTOMER) or from the only 1:N relationship; when it cannot, the column header shows a selector so you can pick.
• Reverse relationships: the "one" side shows a column with the count of child rows; clicking it filters the child table by that row, and "New row" is created already linked to the parent.
• Language and theme: English and Portuguese; light, dark or system theme. The initial language follows the browser.
• Persistence: everything lives in localStorage (erdb for projects, erdb:settings for preferences). Import/Export saves one project per JSON file; importing creates a new project.
• Mobile: responsive layout with tabs for code and diagram, touch pan and pinch zoom.

Development

npm install
npm run dev      # http://localhost:5173
npm test         # parser, FK resolution and autocomplete tests
npm run build    # static output in dist/

Requires Node 20 or newer (.nvmrc pins 24).

Deploying

The build is fully static: dist/ contains index.html and an assets/ folder with relative paths, so it works from a domain root or any subfolder.

• GitHub Pages: the Deploy to GitHub Pages workflow builds and publishes dist/ on every push to main. In the repository settings, set Pages source to "GitHub Actions" once.
• Any static host: upload the contents of dist/. There are no routes, so no rewrite rules are needed.

Project structure

src/
  domain/schema/   schema types, erDiagram parser, FK resolution (pure TypeScript)
  domain/data/     rows, type coercion, keys, validation
  i18n/            pt-BR and en dictionaries, useTranslate hook
  theme/           light/dark theme via data-theme
  store/           workspace (projects) and settings with zustand + persist, import/export, useSchema hook
  features/structure/  CodeMirror editor, language mode, completion, pan/zoom canvas (Mermaid)
  features/data/       entity list, grid, cell editor, integrity-aware actions
  components/          toolbar, project switcher, dialogs, icons

UI strings live in src/i18n/locales/. Parser and validation return error codes that the UI translates.

Contributing

Issues and pull requests are welcome. Before opening a PR, run npx tsc --noEmit, npm test and npm run build; the CI workflow runs the same checks.

License

MIT