A Developer-Friendly ERD Editor That Lives in Your Browser

If you've ever spent more time fighting your database diagram tool than actually designing your schema, you know the struggle. Most ERD (Entity-Relationship Diagram) editors feel like they were built for a different era—clunky, desktop-bound, or hidden behind a paywall and a complex UI. That's why the open-source erd-editor project caught my eye. It's a clean, modern take on a fundamental developer tool.

Built with web technologies, this editor brings database visualization right into your browser, making it accessible, portable, and surprisingly powerful. It's the kind of tool you can spin up instantly to sketch out an idea, document an existing system, or collaborate on a new design.

What It Does

erd-editor is a standalone web application for creating entity-relationship diagrams. You can visually define tables (entities), their columns, data types, and the relationships (one-to-one, one-to-many, etc.) between them. It follows standard ERD notation, so the diagrams it produces are immediately recognizable and useful for documentation or planning discussions.

The core workflow is intuitive: add a table, define its fields and primary keys, then draw connections to establish relationships. It handles the visual layout, letting you focus on the structure of your data.

Why It's Cool

The beauty of this project is in its focused simplicity and technical choices.

• It's Just a Web App: There's nothing to install. You can run it locally from source or use the live demo. This makes it perfect for quick sketches or for environments where installing software is a hassle.
• Portable Data: Your diagrams are saved as a single JSON file. This is a game-changer for version control. You can commit your .erd files alongside your project's migration scripts or schema definitions, giving you a visual history of how your database evolved.
• Open Source & Self-Hostable: Being on GitHub means you can inspect the code (it's built with Vite, Vue 3, and TypeScript), contribute fixes, or customize it for your team's needs. You can also easily host it internally.
• Keyboard-Friendly: The developer behind it clearly prioritized a smooth workflow. You can navigate and manipulate elements using keyboard shortcuts, which is a huge speed boost once you get the hang of it.
• Clean Output: The diagrams are uncluttered and professional-looking, making them suitable for embedding in project documentation or sharing with stakeholders.

How to Try It

The easiest way to kick the tires is to head straight to the live demo: https://dineug.github.io/erd-editor

You can start diagramming immediately right there in your browser. To run it locally or explore the code:

git clone https://github.com/dineug/erd-editor.git
cd erd-editor
npm install
npm run dev

Then open http://localhost:3000 and you're off to the races.

Final Thoughts

erd-editor fills a nice niche. It's not trying to be a heavyweight database modeling suite with reverse-engineering and SQL generation (though features like that could be amazing future additions). Instead, it excels at being a fast, frictionless tool for the initial design phase and for maintaining clear, version-controlled visual docs.

For developers who need to quickly communicate a schema idea in a PR, document a service's data model, or brainstorm before writing the first migration, this tool is a fantastic addition to the toolbox. It respects your time and workflow, which is the highest praise you can give a developer utility.

Check out the repo, star it if you find it useful, and maybe even open an issue with a feature idea.

Follow us for more cool projects: @githubprojects