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: