explaingit

jacksonpires/rails-realtime-erd

22RubyAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

TLDR

Ruby gem that mounts a live ER diagram viewer at /rails/erd inside any Rails app, rendering ActiveRecord models as Mermaid that updates after every migration.

Mindmap

mindmap
  root((rails-realtime-erd))
    Inputs
      ActiveRecord models
      Live database schema
    Outputs
      Mermaid diagram
      SVG export
      PNG export
      Shareable URL
    Use Cases
      Schema exploration
      Onboarding new devs
      Planning migrations
    Tech Stack
      Ruby
      Rails
      Hotwire
      Stimulus
      Mermaid

Things people build with this

USE CASE 1

Browse a live ER diagram of a Rails app at /rails/erd while developing

USE CASE 2

Onboard a new developer to a Rails codebase by showing the schema visually

USE CASE 3

Copy Mermaid source from the viewer into design docs or pull requests

USE CASE 4

Filter the diagram to a subset of models to plan a migration

Tech stack

RubyRailsHotwireStimulusMermaid

Getting it running

Difficulty · easy Time to first run · 5min

Add the gem in the development group, run bundle install, then visit /rails/erd in the running app.

MIT license, you can use, modify, and distribute freely with attribution.

In plain English

Rails Realtime ERD is a Ruby gem that adds a live entity relationship diagram viewer to any Rails app. An entity relationship diagram, or ERD, is a picture of the tables in a database and the connections between them. Rails developers often want this picture when they are working on a project, especially when joining a new codebase or planning a schema change. This gem makes the diagram show up at a URL inside the running app instead of having to keep a separate file in the repo. The way it works is simple. You add the gem to your Gemfile in the development group, run bundle install, start the Rails server, and visit http://localhost:3000/rails/erd in the browser. On every request the gem reads the current ActiveRecord models and live database schema, builds the diagram in the Mermaid format, and renders it client-side. If you run a database migration and refresh the page, the new diagram shows up straight away. There is no rake task to run and no HTML file to keep in sync with schema.rb. The frontend is built with Hotwire and Stimulus, which are the default JavaScript tools that ship with modern Rails. There is no Vue, no React, no build step, and no asset pipeline requirement in the host app. The author notes that all CSS and JavaScript are inlined by the engine layout, so the gem works the same way whether the host app uses Sprockets, Propshaft, importmap, or nothing at all. The viewer comes with several features beyond just showing the diagram. You can zoom and pan, filter the diagram to a subset of models from a sidebar, copy the Mermaid source code, copy a Markdown version, copy a shareable URL with the current state encoded in the URL hash, and download the rendered diagram as SVG or PNG. By default the gem mounts itself at /rails/erd in development and test environments only. You can change the mount path, disable auto mounting, or change which environments it activates in by creating a small initializer file. The README is honest about scope. The gem is for the live in-app case. If you want a static shareable file for documentation or CI artifacts, the author points to the project that inspired this one. Specs run against a SQLite-backed dummy Rails app in spec/dummy. The project is MIT licensed.

Copy-paste prompts

Prompt 1
Add rails-realtime-erd to my Gemfile and mount it at a custom path in development only
Prompt 2
Configure the gem so the viewer is also enabled in staging behind basic auth
Prompt 3
Export the current ERD as SVG and embed it in our README
Prompt 4
Walk me through how the engine inlines its CSS and JS so it works under importmap and Propshaft
Prompt 5
Write a system spec that loads /rails/erd against the dummy app in spec/dummy
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.