Have you ever wanted to understand a database structure, only to find there was no ER diagram?
And even when there is one, if it is just a static image, it can be so complex that it becomes unreadable.
So I built a tool that lets you browse ER diagrams easily and interactively:
RelavueER.
🟦 Getting Started
Just run the following command to start the container, then open http://localhost:30033 in your browser.
docker run --pull=always --rm -p 30033:30033 tkuni83/relavue-er
For more details, see here.
🟦 Features
🟠 Reverse-engineer from your database
RelavueER connects to your database and generates an ER diagram.
🟠 Highlighting
When you hover over an entity, related tables are highlighted.
The same works when you hover over a foreign key column.
🟠 Layout optimization
It optimizes entity placement so that related tables are positioned closer together.
🟠 Incremental reverse engineering
It supports incremental reverse engineering when your database schema changes.
You can re-run the reverse process while preserving the existing ER diagram layout.
You can also view the differences.
🟠 Add notes
You can write and keep notes directly on the diagram.
🟠 Save and load
You can save and load ER diagrams using Export and Import.
You can also save with Ctrl + S, and load a saved JSON file by dragging and dropping it onto the screen.
🟠 Supported databases
- MySQL
- PostgreSQL
🟠 Concept
- Ready to use immediately
- Focused on visualization, with an interactive and easy-to-read interface
🟠 What it cannot do
- It is not intended to be integrated into CI
- It is powerless if foreign keys are not defined
🟦 Side Note: Thoughts from Development
About six months ago, when Claude Code and the Claude MAX plan first came out, I started building this as an experiment in Vibe Coding.
At first, I tried doing it entirely with Vibe Coding. But when I got to implementing a layer feature, the project fell into a full regression spiral, so I gave up.
About six months later, I had more free time, so I decided to rebuild it from scratch. This time, I adopted a Flux-like architecture: I managed the frontend state as one large type, centralized all state updates into a single layer, and focused my tests heavily on that layer. That approach finally got the project to completion.
(Reference: AI-generated specification document)
I also think quality improved because, early in the rebuild, I organized the concept first and then handed off the technology selection to Deep Research, which led me to discover React Flow, a library that greatly helped with diagram rendering.
That’s all. If it sounds useful, I’d be happy if you give it a try 🙏
Top comments (0)