schema_erd 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 6e0909d6e3250f2b42bfda5607086a83517de9cbe64466d058cea239228eae3c
+  data.tar.gz: bfd827568642d3175fd65dcb826c80318d2c314a46cb76ac72039e22801d9ff3
+SHA512:
+  metadata.gz: 508215f63809b5a533bf0012b61eaf5a76d8ff0dbbfae0eda1bfa7af762a82f5479b44da742edcc7dbbf29298ed069f3ec983db3a815049c5908aa274f6e58f4
+  data.tar.gz: a5b61b9ecbaaca092adc4058e2f773cc15fae622a4b2e86ce4593dffde330b77866d10f39c50f6312e3121d42c9d05e9cd0a928d158ceaf78e29c1150a7908f7

data/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 0.1.1
+
+- Update project authorship.
+
+## 0.1.0
+
+- First release.
+- Parse tables, columns, indexes, defaults, constraints, and foreign keys from `db/schema.rb`.
+- Explore schemas on an interactive, searchable, zoomable canvas.
+- Focus a table and its direct relationships with shareable URLs.
+- Preserve hand-tuned layouts in local storage.

data/Gemfile

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dreaming Tulpa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,113 @@
+# Schema ERD
+
+**Your Rails schema, alive.**
+
+Schema ERD turns `db/schema.rb` into an interactive database map inside your Rails app. Mount one Rack endpoint and get a canvas you can search, pan, zoom, rearrange, and explore—without Graphviz, Node, model loading, or a build step.
+
+```ruby
+# config/routes.rb
+mount SchemaErd::App.new(schema_path: Rails.root.join("db/schema.rb")), at: "/rails/erd"
+```
+
+Open `/rails/erd`. That is the whole setup.
+
+## Why Schema ERD?
+
+Most ERD tools generate an artifact. Schema ERD gives you a workspace.
+
+- **Reads the source of truth.** Tables, columns, indexes, defaults, null constraints, primary keys, and foreign keys come straight from `db/schema.rb`.
+- **Feels immediate.** Refresh the page after a migration; there is nothing to regenerate.
+- **Handles real schemas.** Search tables and columns, hide Rails internals, toggle detail, and fit the entire graph to the window.
+- **Makes relationships navigable.** Click a table to isolate its references and dependents. The selected table lives in the URL, ready to paste into a pull request or team chat.
+- **Gets out of your way.** Drag cards into place, pan the canvas, zoom with the controls or keyboard, and let local storage remember the layout.
+- **Ships almost nothing.** The rendered page is standalone HTML, CSS, and JavaScript. The gem has no runtime dependencies.
+
+## Installation
+
+Schema ERD is a development tool. Keep it out of production:
+
+```ruby
+# Gemfile
+group :development do
+  gem "schema_erd"
+end
+```
+
+Then mount it behind a development-only route:
+
+```ruby
+# config/routes.rb
+Rails.application.routes.draw do
+  if Rails.env.development?
+    mount SchemaErd::App.new(
+      schema_path: Rails.root.join("db/schema.rb")
+    ), at: "/rails/erd"
+  end
+end
+```
+
+Run `bundle install`, boot Rails, and visit [http://localhost:3000/rails/erd](http://localhost:3000/rails/erd).
+
+## Controls
+
+| Action | Control |
+| --- | --- |
+| Find a table or column | Search box |
+| Focus a table and its neighbors | Click its header |
+| Move a table | Drag its header |
+| Pan | Drag empty canvas space |
+| Zoom | Buttons, `+` / `-`, or <kbd>Ctrl</kbd>/<kbd>⌘</kbd> + wheel |
+| Reset zoom | `0` |
+| Fit the diagram | `F` |
+| Leave focused view | <kbd>Esc</kbd> or “Show all tables” |
+
+Layout positions are stored in the browser and keyed by the schema version. A new migration gets a fresh layout; older layouts stay intact.
+
+## Rails internals
+
+Schema ERD recognizes common framework-owned tables such as Active Storage, sessions, `ar_internal_metadata`, and `schema_migrations`. They are visible by default and can be hidden from the controls.
+
+## Requirements and scope
+
+- Ruby 3.2 or newer.
+- A Rails-style Ruby schema file (`db/schema.rb`).
+- Any Rack-compatible Rails version capable of mounting an object that responds to `call`.
+
+`structure.sql` is not supported. Schema ERD parses the stable shape of Rails-generated Ruby schema files; it does not execute the schema or boot your models.
+
+## Use outside Rails
+
+The app is an ordinary Rack endpoint, so Rails is convenient rather than required:
+
+```ruby
+require "schema_erd"
+
+run SchemaErd::App.new(schema_path: File.expand_path("db/schema.rb", __dir__))
+```
+
+The parser is public too:
+
+```ruby
+schema = SchemaErd::Parser.call(File.read("db/schema.rb"))
+
+schema.tables.first.name
+schema.relationships.first.from_table
+```
+
+## Security
+
+An ERD exposes table and column names. Mount it only where intended—normally in development—and add your own authentication if you expose it in a shared environment. Responses are marked `no-store` and `noindex, nofollow`, but those headers are not access control.
+
+## Development
+
+```sh
+bundle install
+bundle exec rake
+bundle exec rake build
+```
+
+Bug reports and focused pull requests are welcome. Please include a minimal `schema.rb` fragment when reporting parser behavior.
+
+## License
+
+Schema ERD is available under the [MIT License](LICENSE.txt).

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "rake/testtask"
+require "bundler/gem_tasks"
+
+Rake::TestTask.new do |task|
+  task.libs << "test"
+  task.pattern = "test/**/*_test.rb"
+  task.warning = true
+end
+
+task default: :test

data/lib/schema_erd/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module SchemaErd
+  VERSION = "0.1.1"
+end

data/lib/schema_erd.rb

@@ -0,0 +1,894 @@
+# frozen_string_literal: true
+
+require "json"
+require_relative "schema_erd/version"
+
+module SchemaErd
+  module Html
+    ESCAPES = { "&" => "&amp;", '"' => "&quot;", "'" => "&#39;", "<" => "&lt;", ">" => "&gt;" }.freeze
+
+    def self.escape(value)
+      value.to_s.gsub(/[&"'<>]/, ESCAPES)
+    end
+  end
+
+  Column = Data.define(:name, :type, :nullable, :default, :primary_key, :foreign_key_to)
+  Index = Data.define(:columns, :unique)
+  Table = Data.define(:name, :columns, :indexes)
+  Relationship = Data.define(:from_table, :to_table, :column)
+  Schema = Data.define(:version, :tables, :relationships)
+
+  class Parser
+    COLUMN_PATTERN = /^\s+t\.(\w+)\s+"([^"]+)"(.*)$/
+    INDEX_PATTERN = /^\s+t\.index\s+\[(.+)\](.*)$/
+    TABLE_PATTERN = /^\s+create_table "([^"]+)"(.*) do \|t\|$/
+    FOREIGN_KEY_PATTERN = /^\s+add_foreign_key "([^"]+)", "([^"]+)"(.*)$/
+
+    def self.call(source)
+      new(source).call
+    end
+
+    def initialize(source)
+      @source = source
+      @tables = []
+      @relationships = []
+      @current_table = nil
+    end
+
+    def call
+      source.each_line { |line| parse_line(line) }
+      mark_foreign_keys
+
+      Schema.new(version:, tables:, relationships:)
+    end
+
+    private
+
+    attr_reader :source, :tables, :relationships
+
+    def parse_line(line)
+      table_match = line.match(TABLE_PATTERN)
+      return start_table(table_match) if table_match
+      return finish_table if current_table && line.match?(/^\s+end$/)
+      return parse_table_line(line) if current_table
+
+      foreign_key_match = line.match(FOREIGN_KEY_PATTERN)
+      parse_foreign_key(foreign_key_match) if foreign_key_match
+    end
+
+    def start_table(match)
+      name = match[1]
+      options = match[2]
+      columns = []
+      columns << Column.new(name: "id", type: primary_key_type(options), nullable: false, default: nil, primary_key: true, foreign_key_to: nil) unless options.include?("id: false")
+      @current_table = { name:, columns:, indexes: [] }
+    end
+
+    def finish_table
+      tables << Table.new(**current_table)
+      @current_table = nil
+    end
+
+    def parse_table_line(line)
+      if (match = line.match(INDEX_PATTERN))
+        columns, options = match.captures
+        current_table[:indexes] << Index.new(columns: columns.scan(/"([^"]+)"/).flatten, unique: options.include?("unique: true"))
+        return
+      end
+
+      match = line.match(COLUMN_PATTERN)
+      return unless match
+
+      type, name, options = match.captures
+      current_table[:columns] << Column.new(
+        name:,
+        type: column_type(type, options),
+        nullable: !options.include?("null: false"),
+        default: parse_default(options),
+        primary_key: false,
+        foreign_key_to: nil
+      )
+    end
+
+    def parse_foreign_key(match)
+      from_table, to_table, options = match.captures
+      column = options[/column:\s+"([^"]+)"/, 1] || inferred_foreign_key(to_table)
+      relationships << Relationship.new(from_table:, to_table:, column:)
+    end
+
+    def mark_foreign_keys
+      targets = relationships.group_by { |relationship| [ relationship.from_table, relationship.column ] }
+
+      @tables = tables.map do |table|
+        columns = table.columns.map do |column|
+          relationship = targets[[ table.name, column.name ]]&.first
+          relationship ? column.with(foreign_key_to: relationship.to_table) : column
+        end
+        table.with(columns:)
+      end
+    end
+
+    def current_table
+      @current_table
+    end
+
+    def version
+      raw = source[/\.define\(version:\s*([0-9_]+)\)/, 1]
+      raw&.tr("_", "-")
+    end
+
+    def primary_key_type(options)
+      options[/id:\s*:(\w+)/, 1] || "bigint"
+    end
+
+    def column_type(type, options)
+      details = []
+      limit = options[/limit:\s*(\d+)/, 1]
+      details << limit if limit
+      precision = options[/precision:\s*(\d+)/, 1]
+      scale = options[/scale:\s*(\d+)/, 1]
+      details << [ precision, scale ].compact.join(",") if precision
+      details.empty? ? type : "#{type}(#{details.join(",")})"
+    end
+
+    def parse_default(options)
+      raw = options[/default:\s*("(?:\\.|[^"])*"|'(?:\\.|[^'])*'|->\s*\{.*\}|[^,]+)/, 1]
+      return if raw.nil?
+
+      raw = raw.strip
+      quoted = (raw.start_with?('"') && raw.end_with?('"')) || (raw.start_with?("'") && raw.end_with?("'"))
+      quoted ? raw[1..-2] : raw
+    end
+
+    def inferred_foreign_key(table_name)
+      singular = if defined?(ActiveSupport::Inflector)
+        ActiveSupport::Inflector.singularize(table_name)
+      else
+        table_name.sub(/ies\z/, "y").sub(/s\z/, "")
+      end
+      "#{singular}_id"
+    end
+  end
+
+  class App
+    def initialize(schema_path:)
+      @schema_path = schema_path
+    end
+
+    def call(env)
+      return not_found unless env["REQUEST_METHOD"] == "GET"
+
+      schema = Parser.call(File.read(schema_path))
+      body = Page.new(schema:, schema_path:).render
+      [ 200, headers, [ body ] ]
+    rescue Errno::ENOENT => error
+      [ 500, headers, [ "<h1>Schema unavailable</h1><pre>#{Html.escape(error.message)}</pre>" ] ]
+    end
+
+    private
+
+    attr_reader :schema_path
+
+    def headers
+      {
+        "content-type" => "text/html; charset=utf-8",
+        "cache-control" => "no-store",
+        "x-robots-tag" => "noindex, nofollow"
+      }
+    end
+
+    def not_found
+      [ 404, { "content-type" => "text/plain; charset=utf-8" }, [ "Not found" ] ]
+    end
+  end
+
+  class Page
+    RAILS_INTERNAL_PREFIXES = %w[active_storage_ sessions ar_internal_metadata schema_migrations].freeze
+
+    def initialize(schema:, schema_path:)
+      @schema = schema
+      @schema_path = schema_path
+    end
+
+    def render
+      <<~HTML
+        <!doctype html>
+        <html lang="en">
+          <head>
+            <meta charset="utf-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <title>Rails database ERD</title>
+            <style>#{styles}</style>
+          </head>
+          <body class="hide-attributes">
+            <aside class="controls-card">
+              <header>
+                <div>
+                  <p class="eyebrow">Development tool</p>
+                  <h1>Database ERD</h1>
+                </div>
+                <a class="refresh" href="" title="Reload schema" aria-label="Reload schema">↻</a>
+              </header>
+              <p class="subtitle" title="#{escape(schema_path.to_s)}">Schema #{escape(schema.version || "unknown")}</p>
+              <section class="toolbar" aria-label="Diagram controls">
+                <label class="search">
+                  <span>Search</span>
+                  <input id="search" type="search" placeholder="Tables or columns…" autofocus>
+                </label>
+                <div class="toggle-grid">
+                  <label><input id="relationships" type="checkbox" checked> Relationships</label>
+                  <label><input id="internals" type="checkbox" checked> Rails internals</label>
+                  <label><input id="attributes" type="checkbox"> Attributes</label>
+                  <label><input id="details" type="checkbox" checked> Constraints</label>
+                </div>
+                <div class="control-row">
+                  <div class="zoom-controls" aria-label="Zoom controls">
+                    <button id="zoom-out" type="button" title="Zoom out (−)" aria-label="Zoom out">−</button>
+                    <button id="zoom-reset" type="button" title="Reset zoom (0)">100%</button>
+                    <button id="zoom-in" type="button" title="Zoom in (+)" aria-label="Zoom in">+</button>
+                    <button id="zoom-fit" type="button" title="Fit the complete diagram (F)">Fit</button>
+                  </div>
+                  <button id="reset-layout" class="secondary-control" type="button">Reset</button>
+                </div>
+                <button id="clear-focus" class="clear-focus" type="button" hidden>Show all tables</button>
+                <div class="stats"><strong id="visible-count">#{schema.tables.size}</strong> tables · #{schema.relationships.size} foreign keys</div>
+              </section>
+              <details class="help">
+                <summary>Canvas controls</summary>
+                <p>Drag the canvas to pan and table headers to move them. Click a header to arrange direct relationships. Use Ctrl/⌘ + wheel to zoom.</p>
+              </details>
+            </aside>
+            <main id="viewport">
+              <div id="surface">
+                <div id="canvas">
+                  <svg id="lines" aria-hidden="true">
+                    <defs>
+                      <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto-start-reverse">
+                        <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"></path>
+                      </marker>
+                    </defs>
+                  </svg>
+                  <div id="tables">#{table_cards}</div>
+                </div>
+              </div>
+            </main>
+            <script>#{javascript}</script>
+          </body>
+        </html>
+      HTML
+    end
+
+    private
+
+    attr_reader :schema, :schema_path
+
+    def table_cards
+      schema.tables.map do |table|
+        internal = RAILS_INTERNAL_PREFIXES.any? { |prefix| table.name.start_with?(prefix) }
+        search_text = ([ table.name ] + table.columns.flat_map { |column| [ column.name, column.type ] }).join(" ").downcase
+        <<~HTML
+          <article class="table-card" id="table-#{escape(table.name)}" data-table="#{escape(table.name)}" data-search="#{escape(search_text)}" data-internal="#{internal}">
+            <div class="table-heading">
+              <h2>#{escape(table.name)}</h2>
+              <span>#{table.columns.size} columns</span>
+            </div>
+            <ol class="columns">#{column_rows(table)}</ol>
+            #{indexes(table)}
+          </article>
+        HTML
+      end.join
+    end
+
+    def column_rows(table)
+      table.columns.map do |column|
+        badges = []
+        badges << '<span class="badge pk">PK</span>' if column.primary_key
+        badges << '<span class="badge fk">FK</span>' if column.foreign_key_to
+        constraints = []
+        constraints << "not null" unless column.nullable
+        constraints << "default: #{escape(column.default)}" unless column.default.nil?
+        relation = column.foreign_key_to ? "<span class=\"relation-target\">→ #{escape(column.foreign_key_to)}</span>" : ""
+        <<~HTML
+          <li data-column="#{escape(column.name)}">
+            <div class="column-main">
+              <span class="column-name">#{badges.join}#{escape(column.name)}</span>
+              <code>#{escape(column.type)}</code>
+            </div>
+            <div class="constraints">#{relation}#{constraints.map { |constraint| "<span>#{constraint}</span>" }.join}</div>
+          </li>
+        HTML
+      end.join
+    end
+
+    def indexes(table)
+      return "" if table.indexes.empty?
+
+      rows = table.indexes.map do |index|
+        unique = index.unique ? '<span class="badge unique">unique</span>' : ""
+        "<li>#{unique}<code>#{escape(index.columns.join(", "))}</code></li>"
+      end.join
+      "<details><summary>#{table.indexes.size} indexes</summary><ul class=\"indexes\">#{rows}</ul></details>"
+    end
+
+    def escape(value)
+      Html.escape(value)
+    end
+
+    def styles
+      <<~CSS
+        :root { color-scheme: light; --ink: #172033; --muted: #64748b; --line: #dbe4ef; --accent: #ff5a1f; --accent-soft: #fff3ed; --blue: #2563eb; }
+        * { box-sizing: border-box; }
+        html, body { height: 100%; }
+        body { margin: 0; overflow: hidden; background: #f6f8fb; color: var(--ink); font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+        .controls-card { position: fixed; z-index: 30; top: 16px; left: 16px; width: min(340px, calc(100vw - 32px)); border: 1px solid rgba(203,213,225,.9); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.94); box-shadow: 0 12px 32px rgba(15,23,42,.16); backdrop-filter: blur(12px); }
+        .controls-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+        h1 { margin: 0; font-size: 18px; line-height: 1.15; letter-spacing: -.025em; }
+        .eyebrow { margin: 0 0 2px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
+        .subtitle { overflow: hidden; margin: 5px 0 0; color: var(--muted); font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
+        .refresh { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border: 1px solid #cbd5e1; border-radius: 8px; color: var(--ink); background: white; font-size: 19px; font-weight: 700; line-height: 1; text-decoration: none; }
+        .refresh:hover { border-color: #fdba95; color: var(--accent); background: var(--accent-soft); }
+        .toolbar { display: grid; gap: 10px; margin-top: 12px; }
+        .toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
+        .toolbar label:not(.search) { display: flex; align-items: center; gap: 6px; min-height: 24px; white-space: nowrap; font-size: 11px; font-weight: 650; }
+        .search { display: grid; gap: 3px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
+        input[type="search"] { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 10px; color: var(--ink); background: white; font: inherit; outline: none; }
+        input[type="search"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+        input[type="checkbox"] { accent-color: var(--accent); }
+        button { font: inherit; }
+        .control-row { display: flex; gap: 8px; }
+        .zoom-controls { display: flex; flex: 1; align-items: center; min-height: 32px; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 8px; background: white; }
+        .zoom-controls button { flex: 1; min-width: 30px; height: 30px; border: 0; border-right: 1px solid #e2e8f0; color: var(--ink); background: white; font-size: 12px; font-weight: 750; cursor: pointer; }
+        .zoom-controls button:hover { background: var(--accent-soft); color: var(--accent); }
+        .zoom-controls button:last-child { border-right: 0; }
+        #zoom-reset { min-width: 48px; color: var(--muted); font-size: 10px; }
+        .clear-focus, .secondary-control { min-height: 32px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; color: var(--ink); background: white; font-size: 11px; font-weight: 750; cursor: pointer; white-space: nowrap; }
+        .clear-focus { border-color: #fdba95; color: #c2410c; background: var(--accent-soft); }
+        .secondary-control:hover { border-color: #fdba95; color: var(--accent); background: var(--accent-soft); }
+        .stats { color: var(--muted); font-size: 10px; white-space: nowrap; }
+        .stats strong { color: var(--ink); }
+        .help { margin-top: 9px; border-top: 1px solid #e2e8f0; padding-top: 8px; color: var(--muted); font-size: 10px; }
+        .help summary { cursor: pointer; font-weight: 700; }
+        .help p { margin: 6px 0 0; }
+        #viewport { width: 100vw; height: 100vh; overflow: auto; background: #eef2f7; cursor: grab; overscroll-behavior: none; touch-action: none; user-select: none; }
+        #viewport.panning { cursor: grabbing; }
+        #surface { position: relative; }
+        #canvas { position: absolute; top: 0; left: 0; width: 12000px; height: 12000px; transform-origin: top left; background-color: #f7f9fc; background-image: radial-gradient(circle, #cbd5e1 1.2px, transparent 1.2px); background-size: 24px 24px; }
+        #tables { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
+        #lines { position: absolute; z-index: 1; inset: 0; width: 12000px; height: 12000px; overflow: visible; pointer-events: none; }
+        #lines path.relationship { fill: none; stroke: #9fb0c5; stroke-width: 1.35; opacity: .42; marker-end: url(#arrow); }
+        #lines path.relationship.active { stroke: var(--accent); stroke-width: 2.5; opacity: .95; }
+        #lines path.relationship.dimmed { opacity: .06; }
+        #lines.hidden { display: none; }
+        .table-card { position: absolute; width: 260px; overflow: hidden; border: 1px solid #ccd7e5; border-radius: 10px; background: white; box-shadow: 0 3px 10px rgba(15,23,42,.07); transition: border-color .15s, box-shadow .15s, opacity .15s; pointer-events: auto; }
+        .table-card:hover, .table-card.selected { border-color: var(--accent); box-shadow: 0 7px 22px rgba(255,90,31,.16); }
+        .table-card.dragging { z-index: 10; border-color: var(--accent); box-shadow: 0 14px 34px rgba(15,23,42,.2); transition: none; }
+        .table-card.dimmed { opacity: .28; }
+        .table-card[hidden] { display: none; }
+        .table-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #eef3f8; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; }
+        .table-card.dragging .table-heading { cursor: grabbing; }
+        .table-heading h2 { overflow: hidden; margin: 0; font: 750 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
+        .table-heading span { flex: none; color: var(--muted); font-size: 9px; }
+        .columns { margin: 0; padding: 0; list-style: none; }
+        .columns li { padding: 7px 11px; border-bottom: 1px solid #edf1f6; }
+        body.hide-attributes .columns, body.hide-attributes .table-card > details { display: none; }
+        .column-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+        .column-name { min-width: 0; overflow-wrap: anywhere; font: 650 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
+        code { color: #52637a; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
+        .badge { display: inline-block; min-width: 20px; margin-right: 5px; border-radius: 4px; padding: 1px 4px; color: white; font: 800 8px/1.35 ui-sans-serif, system-ui; text-align: center; vertical-align: 1px; }
+        .badge.pk { background: #7c3aed; } .badge.fk { background: var(--blue); } .badge.unique { background: #0f766e; }
+        .constraints { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; color: #8a98aa; font-size: 9px; }
+        body.hide-details .constraints { display: none; }
+        .relation-target { color: var(--blue); font-weight: 700; }
+        .table-card > details { padding: 7px 11px 9px; background: #fafbfd; color: var(--muted); font-size: 10px; }
+        .table-card > details > summary { cursor: pointer; font-weight: 700; }
+        .indexes { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
+        .indexes li { display: flex; align-items: center; gap: 4px; }
+        @media (max-width: 900px) {
+          .controls-card { top: 10px; left: 10px; width: min(320px, calc(100vw - 20px)); }
+        }
+      CSS
+    end
+
+    def javascript
+      relationships = schema.relationships.map { |relationship| relationship.to_h }
+      layout_key = "schema-erd-layout:#{schema.version || "unknown"}"
+      <<~JAVASCRIPT
+        const relationships = #{JSON.generate(relationships)};
+        const layoutKey = #{JSON.generate(layout_key)};
+        const CANVAS_WIDTH = 12000;
+        const CANVAS_HEIGHT = 12000;
+        const CARD_WIDTH = 260;
+        const COLUMN_GAP = 50;
+        const ROW_GAP = 22;
+        const search = document.querySelector("#search");
+        const internalToggle = document.querySelector("#internals");
+        const relationshipToggle = document.querySelector("#relationships");
+        const attributeToggle = document.querySelector("#attributes");
+        const detailToggle = document.querySelector("#details");
+        const viewport = document.querySelector("#viewport");
+        const surface = document.querySelector("#surface");
+        const tables = document.querySelector("#tables");
+        const cards = [...document.querySelectorAll(".table-card")];
+        const svg = document.querySelector("#lines");
+        const canvas = document.querySelector("#canvas");
+        const zoomOutButton = document.querySelector("#zoom-out");
+        const zoomResetButton = document.querySelector("#zoom-reset");
+        const zoomInButton = document.querySelector("#zoom-in");
+        const zoomFitButton = document.querySelector("#zoom-fit");
+        const clearFocusButton = document.querySelector("#clear-focus");
+        const resetLayoutButton = document.querySelector("#reset-layout");
+        let selectedTable = null;
+        let scale = 1;
+        let positions = {};
+        let layoutFrame = null;
+
+        function visible(card) {
+          return !card.hidden;
+        }
+
+        function matchesFilters(card) {
+          const query = search.value.trim().toLowerCase();
+          const matchesQuery = !query || card.dataset.search.includes(query);
+          const matchesInternals = internalToggle.checked || card.dataset.internal !== "true";
+          return matchesQuery && matchesInternals;
+        }
+
+        function updateVisibleCount() {
+          document.querySelector("#visible-count").textContent = cards.filter(visible).length;
+        }
+
+        function clamp(value, minimum, maximum) {
+          return Math.max(minimum, Math.min(maximum, value));
+        }
+
+        function cardPosition(card) {
+          return positions[card.dataset.table] || { x: card.offsetLeft, y: card.offsetTop };
+        }
+
+        function setCardPosition(card, x, y) {
+          const position = {
+            x: clamp(Math.round(x), 40, CANVAS_WIDTH - card.offsetWidth - 40),
+            y: clamp(Math.round(y), 40, CANVAS_HEIGHT - card.offsetHeight - 40)
+          };
+          positions[card.dataset.table] = position;
+          card.style.left = `${position.x}px`;
+          card.style.top = `${position.y}px`;
+        }
+
+        function persistPositions() {
+          try {
+            localStorage.setItem(layoutKey, JSON.stringify(positions));
+          } catch (_error) {
+            // The diagram remains usable when local storage is disabled.
+          }
+        }
+
+        function restorePositions() {
+          try {
+            const stored = JSON.parse(localStorage.getItem(layoutKey));
+            if (!stored || typeof stored !== "object") return false;
+            if (!cards.every(card => Number.isFinite(stored[card.dataset.table]?.x) && Number.isFinite(stored[card.dataset.table]?.y))) return false;
+            positions = stored;
+            cards.forEach(card => setCardPosition(card, positions[card.dataset.table].x, positions[card.dataset.table].y));
+            return true;
+          } catch (_error) {
+            return false;
+          }
+        }
+
+        function defaultLayout() {
+          const columns = Math.min(8, Math.max(1, Math.ceil(Math.sqrt(cards.length))));
+          const originX = (CANVAS_WIDTH - (columns * CARD_WIDTH + (columns - 1) * COLUMN_GAP)) / 2;
+          const originY = 1200;
+          const heights = Array(columns).fill(originY);
+          positions = {};
+
+          cards.forEach(card => {
+            const column = heights.indexOf(Math.min(...heights));
+            setCardPosition(card, originX + column * (CARD_WIDTH + COLUMN_GAP), heights[column]);
+            heights[column] += Math.max(card.offsetHeight, 36) + ROW_GAP;
+          });
+        }
+
+        function drawRelationships() {
+          svg.querySelectorAll(".relationship").forEach(path => path.remove());
+          svg.classList.toggle("hidden", !relationshipToggle.checked);
+          if (!relationshipToggle.checked) return;
+
+          svg.setAttribute("viewBox", `0 0 ${canvas.scrollWidth} ${canvas.scrollHeight}`);
+          relationships.forEach((relationship, index) => {
+            const source = document.querySelector(`[data-table="${CSS.escape(relationship.from_table)}"]`);
+            const target = document.querySelector(`[data-table="${CSS.escape(relationship.to_table)}"]`);
+            if (!source || !target || !visible(source) || !visible(target)) return;
+
+            const sourceRect = {
+              left: source.offsetLeft,
+              top: source.offsetTop,
+              right: source.offsetLeft + source.offsetWidth,
+              bottom: source.offsetTop + source.offsetHeight,
+              width: source.offsetWidth,
+              height: source.offsetHeight
+            };
+            const targetRect = {
+              left: target.offsetLeft,
+              top: target.offsetTop,
+              right: target.offsetLeft + target.offsetWidth,
+              bottom: target.offsetTop + target.offsetHeight,
+              width: target.offsetWidth,
+              height: target.offsetHeight
+            };
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            if (source === target) {
+              const x = sourceRect.right;
+              const centerY = sourceRect.top + sourceRect.height / 2;
+              const halfSpan = clamp(sourceRect.height * .18, 8, 24);
+              const y1 = centerY - halfSpan;
+              const y2 = centerY + halfSpan;
+              path.setAttribute("d", `M ${x} ${y1} C ${x + 56} ${y1}, ${x + 56} ${y2}, ${x} ${y2}`);
+            } else {
+              const goingRight = targetRect.left >= sourceRect.left;
+              const x1 = goingRight ? sourceRect.right : sourceRect.left;
+              const y1 = sourceRect.top + Math.min(sourceRect.height * .34 + (index % 5) * 11, sourceRect.height - 18);
+              const x2 = goingRight ? targetRect.left : targetRect.right;
+              const y2 = targetRect.top + Math.min(targetRect.height * .34 + (index % 4) * 12, targetRect.height - 18);
+              const bend = Math.max(45, Math.abs(x2 - x1) * .45);
+              path.setAttribute("d", `M ${x1} ${y1} C ${x1 + (goingRight ? bend : -bend)} ${y1}, ${x2 + (goingRight ? -bend : bend)} ${y2}, ${x2} ${y2}`);
+            }
+            path.setAttribute("class", "relationship");
+            path.dataset.from = relationship.from_table;
+            path.dataset.to = relationship.to_table;
+            path.dataset.column = relationship.column;
+            svg.appendChild(path);
+          });
+          highlight(selectedTable);
+        }
+
+        function syncSurface() {
+          surface.style.width = `${CANVAS_WIDTH * scale}px`;
+          surface.style.height = `${CANVAS_HEIGHT * scale}px`;
+        }
+
+        function scheduleLayout() {
+          if (layoutFrame) cancelAnimationFrame(layoutFrame);
+          layoutFrame = requestAnimationFrame(() => {
+            layoutFrame = null;
+            syncSurface();
+            drawRelationships();
+          });
+        }
+
+        function setZoom(nextScale, anchorX = viewport.clientWidth / 2, anchorY = viewport.clientHeight / 2) {
+          const newScale = Math.max(.15, Math.min(2, Math.round(nextScale * 100) / 100));
+          const worldX = (viewport.scrollLeft + anchorX) / scale;
+          const worldY = (viewport.scrollTop + anchorY) / scale;
+          scale = newScale;
+          canvas.style.transform = `scale(${scale})`;
+          zoomResetButton.textContent = `${Math.round(scale * 100)}%`;
+          syncSurface();
+          viewport.scrollLeft = worldX * scale - anchorX;
+          viewport.scrollTop = worldY * scale - anchorY;
+        }
+
+        function visibleBounds() {
+          const visibleCards = cards.filter(visible);
+          if (!visibleCards.length) return null;
+          return visibleCards.reduce((bounds, card) => ({
+            left: Math.min(bounds.left, card.offsetLeft),
+            top: Math.min(bounds.top, card.offsetTop),
+            right: Math.max(bounds.right, card.offsetLeft + card.offsetWidth),
+            bottom: Math.max(bounds.bottom, card.offsetTop + card.offsetHeight)
+          }), { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity });
+        }
+
+        function centerBounds(bounds, behavior = "smooth") {
+          if (!bounds) return;
+          viewport.scrollTo({
+            left: ((bounds.left + bounds.right) / 2) * scale - viewport.clientWidth / 2,
+            top: ((bounds.top + bounds.bottom) / 2) * scale - viewport.clientHeight / 2,
+            behavior
+          });
+        }
+
+        function showDiagramStart(behavior = "auto") {
+          const bounds = visibleBounds();
+          if (!bounds) return;
+          viewport.scrollTo({
+            left: ((bounds.left + bounds.right) / 2) * scale - viewport.clientWidth / 2,
+            top: bounds.top * scale - 70,
+            behavior
+          });
+        }
+
+        function fitDiagram() {
+          const bounds = visibleBounds();
+          if (!bounds) return;
+          const availableWidth = Math.max(200, viewport.clientWidth - 28);
+          const availableHeight = Math.max(200, viewport.clientHeight - 28);
+          const fittedScale = Math.min(1, availableWidth / (bounds.right - bounds.left), availableHeight / (bounds.bottom - bounds.top));
+          setZoom(Math.max(.15, fittedScale));
+          centerBounds(bounds);
+        }
+
+        function highlight(tableName) {
+          if (!tableName) return;
+          const related = new Set([tableName]);
+          relationships.forEach(relationship => {
+            if (relationship.from_table === tableName) related.add(relationship.to_table);
+            if (relationship.to_table === tableName) related.add(relationship.from_table);
+          });
+          cards.filter(visible).forEach(card => card.classList.toggle("dimmed", !related.has(card.dataset.table)));
+          svg.querySelectorAll(".relationship").forEach(path => {
+            const active = path.dataset.from === tableName || path.dataset.to === tableName;
+            path.classList.toggle("active", active);
+            path.classList.toggle("dimmed", !active);
+          });
+        }
+
+        function clearHighlight() {
+          cards.forEach(card => card.classList.remove("dimmed"));
+          svg.querySelectorAll(".relationship").forEach(path => path.classList.remove("active", "dimmed"));
+        }
+
+        function placeColumn(columnCards, x, centerY) {
+          const totalHeight = columnCards.reduce((sum, card) => sum + card.offsetHeight, 0) + Math.max(0, columnCards.length - 1) * ROW_GAP;
+          let y = centerY - totalHeight / 2;
+          columnCards.forEach(card => {
+            setCardPosition(card, x, y);
+            y += card.offsetHeight + ROW_GAP;
+          });
+        }
+
+        function relatedCards(tableName) {
+          const referenceNames = new Set();
+          const dependentNames = new Set();
+          relationships.forEach(relationship => {
+            if (relationship.from_table === tableName && relationship.to_table !== tableName) referenceNames.add(relationship.to_table);
+            if (relationship.to_table === tableName && relationship.from_table !== tableName) dependentNames.add(relationship.from_table);
+          });
+          referenceNames.forEach(name => dependentNames.delete(name));
+          const allowed = card => internalToggle.checked || card.dataset.internal !== "true";
+          const byName = names => cards
+            .filter(card => names.has(card.dataset.table) && allowed(card))
+            .sort((a, b) => a.dataset.table.localeCompare(b.dataset.table));
+          return { references: byName(referenceNames), dependents: byName(dependentNames) };
+        }
+
+        function centerCard(card) {
+          viewport.scrollTo({
+            left: (card.offsetLeft + card.offsetWidth / 2) * scale - viewport.clientWidth / 2,
+            top: (card.offsetTop + Math.min(card.offsetHeight / 2, 220)) * scale - viewport.clientHeight / 2,
+            behavior: "smooth"
+          });
+        }
+
+        function tableFromUrl() {
+          const tableName = new URL(window.location.href).searchParams.get("table");
+          return cards.some(card => card.dataset.table === tableName) ? tableName : null;
+        }
+
+        function updateTableUrl(tableName, historyMode) {
+          if (!historyMode) return;
+          const url = new URL(window.location.href);
+          if (tableName) url.searchParams.set("table", tableName);
+          else url.searchParams.delete("table");
+          const method = historyMode === "replace" ? "replaceState" : "pushState";
+          window.history[method]({ table: tableName }, "", url);
+        }
+
+        function applyFilters() {
+          selectedTable = null;
+          clearFocusButton.hidden = true;
+          cards.forEach(card => {
+            card.hidden = !matchesFilters(card);
+            card.classList.remove("selected");
+          });
+          clearHighlight();
+          updateVisibleCount();
+          scheduleLayout();
+          updateTableUrl(null, "replace");
+        }
+
+        function focusTable(tableName, { historyMode = "push" } = {}) {
+          if (selectedTable === tableName) {
+            resetLayout({ historyMode });
+            return;
+          }
+
+          clearHighlight();
+          const selectedCard = cards.find(card => card.dataset.table === tableName);
+          if (!selectedCard) return;
+          const { references, dependents } = relatedCards(tableName);
+          const related = new Set([ selectedCard, ...references, ...dependents ]);
+          const viewportCenterX = (viewport.scrollLeft + viewport.clientWidth / 2) / scale;
+          const viewportCenterY = (viewport.scrollTop + viewport.clientHeight / 2) / scale;
+          const selectedX = clamp(viewportCenterX - selectedCard.offsetWidth / 2, 560, CANVAS_WIDTH - 900);
+          const selectedY = clamp(viewportCenterY - Math.min(selectedCard.offsetHeight / 2, 180), 300, CANVAS_HEIGHT - selectedCard.offsetHeight - 300);
+
+          cards.forEach(card => {
+            card.hidden = !related.has(card);
+            card.classList.toggle("selected", card === selectedCard);
+          });
+          setCardPosition(selectedCard, selectedX, selectedY);
+          placeColumn(references, selectedX - CARD_WIDTH - 120, selectedY + selectedCard.offsetHeight / 2);
+          placeColumn(dependents, selectedX + selectedCard.offsetWidth + 120, selectedY + selectedCard.offsetHeight / 2);
+
+          selectedTable = tableName;
+          clearFocusButton.hidden = false;
+          updateVisibleCount();
+          persistPositions();
+          scheduleLayout();
+          updateTableUrl(tableName, historyMode);
+          requestAnimationFrame(() => centerCard(selectedCard));
+        }
+
+        function clearFocus() {
+          selectedTable = null;
+          clearFocusButton.hidden = true;
+          cards.forEach(card => {
+            card.hidden = !matchesFilters(card);
+            card.classList.remove("selected");
+          });
+          clearHighlight();
+          updateVisibleCount();
+          scheduleLayout();
+        }
+
+        function resetLayout({ historyMode = "push", behavior = "smooth" } = {}) {
+          try {
+            localStorage.removeItem(layoutKey);
+          } catch (_error) {
+            // Reset still works for the current page.
+          }
+          clearFocus();
+          defaultLayout();
+          scheduleLayout();
+          updateTableUrl(null, historyMode);
+          requestAnimationFrame(() => showDiagramStart(behavior));
+        }
+
+        function reflowAfterCardResize() {
+          requestAnimationFrame(() => {
+            if (selectedTable) {
+              const tableName = selectedTable;
+              selectedTable = null;
+              focusTable(tableName, { historyMode: null });
+            } else {
+              defaultLayout();
+              persistPositions();
+              scheduleLayout();
+              requestAnimationFrame(() => showDiagramStart("smooth"));
+            }
+          });
+        }
+
+        function enableCardDragging(card) {
+          const heading = card.querySelector(".table-heading");
+          heading.addEventListener("pointerdown", event => {
+            if (event.button !== 0) return;
+            event.preventDefault();
+            event.stopPropagation();
+            const start = cardPosition(card);
+            const startX = event.clientX;
+            const startY = event.clientY;
+            let moved = false;
+            heading.setPointerCapture(event.pointerId);
+
+            const move = moveEvent => {
+              const deltaX = moveEvent.clientX - startX;
+              const deltaY = moveEvent.clientY - startY;
+              if (!moved && Math.hypot(deltaX, deltaY) < 4) return;
+              moved = true;
+              card.classList.add("dragging");
+              setCardPosition(card, start.x + deltaX / scale, start.y + deltaY / scale);
+              scheduleLayout();
+            };
+
+            const finish = finishEvent => {
+              heading.removeEventListener("pointermove", move);
+              heading.removeEventListener("pointerup", finish);
+              heading.removeEventListener("pointercancel", finish);
+              if (heading.hasPointerCapture(finishEvent.pointerId)) heading.releasePointerCapture(finishEvent.pointerId);
+              card.classList.remove("dragging");
+              if (moved) {
+                persistPositions();
+                scheduleLayout();
+              } else {
+                focusTable(card.dataset.table);
+              }
+            };
+
+            heading.addEventListener("pointermove", move);
+            heading.addEventListener("pointerup", finish);
+            heading.addEventListener("pointercancel", finish);
+          });
+        }
+
+        cards.forEach(card => {
+          card.addEventListener("mouseenter", () => { if (!selectedTable) highlight(card.dataset.table); });
+          card.addEventListener("mouseleave", () => { if (!selectedTable) clearHighlight(); });
+          enableCardDragging(card);
+        });
+
+        search.addEventListener("input", applyFilters);
+        internalToggle.addEventListener("change", applyFilters);
+        relationshipToggle.addEventListener("change", drawRelationships);
+        attributeToggle.addEventListener("change", () => {
+          document.body.classList.toggle("hide-attributes", !attributeToggle.checked);
+          reflowAfterCardResize();
+        });
+        detailToggle.addEventListener("change", () => {
+          document.body.classList.toggle("hide-details", !detailToggle.checked);
+          reflowAfterCardResize();
+        });
+        clearFocusButton.addEventListener("click", resetLayout);
+        resetLayoutButton.addEventListener("click", resetLayout);
+        zoomOutButton.addEventListener("click", () => setZoom(scale - .1));
+        zoomResetButton.addEventListener("click", () => setZoom(1));
+        zoomInButton.addEventListener("click", () => setZoom(scale + .1));
+        zoomFitButton.addEventListener("click", fitDiagram);
+        viewport.addEventListener("pointerdown", event => {
+          if (event.button !== 0 || event.target.closest(".table-card")) return;
+          event.preventDefault();
+          const startX = event.clientX;
+          const startY = event.clientY;
+          const startLeft = viewport.scrollLeft;
+          const startTop = viewport.scrollTop;
+          viewport.classList.add("panning");
+          viewport.setPointerCapture(event.pointerId);
+
+          const move = moveEvent => {
+            viewport.scrollLeft = startLeft - (moveEvent.clientX - startX);
+            viewport.scrollTop = startTop - (moveEvent.clientY - startY);
+          };
+          const finish = finishEvent => {
+            viewport.removeEventListener("pointermove", move);
+            viewport.removeEventListener("pointerup", finish);
+            viewport.removeEventListener("pointercancel", finish);
+            if (viewport.hasPointerCapture(finishEvent.pointerId)) viewport.releasePointerCapture(finishEvent.pointerId);
+            viewport.classList.remove("panning");
+          };
+
+          viewport.addEventListener("pointermove", move);
+          viewport.addEventListener("pointerup", finish);
+          viewport.addEventListener("pointercancel", finish);
+        });
+        viewport.addEventListener("wheel", event => {
+          if (!event.ctrlKey && !event.metaKey) return;
+          event.preventDefault();
+          const rect = viewport.getBoundingClientRect();
+          setZoom(scale + (event.deltaY < 0 ? .1 : -.1), event.clientX - rect.left, event.clientY - rect.top);
+        }, { passive: false });
+        document.addEventListener("keydown", event => {
+          if (event.target.matches("input, textarea, select")) return;
+          if (event.key === "Escape" && selectedTable) resetLayout();
+          if (event.key === "-" || event.key === "_") setZoom(scale - .1);
+          if (event.key === "+" || event.key === "=") setZoom(scale + .1);
+          if (event.key === "0") setZoom(1);
+          if (event.key.toLowerCase() === "f") fitDiagram();
+        });
+        window.addEventListener("resize", () => scheduleLayout());
+        window.addEventListener("popstate", () => {
+          const tableName = tableFromUrl();
+          if (tableName) {
+            selectedTable = null;
+            focusTable(tableName, { historyMode: null });
+          } else {
+            resetLayout({ historyMode: null });
+          }
+        });
+        const resizeObserver = new ResizeObserver(() => scheduleLayout());
+        cards.forEach(card => resizeObserver.observe(card));
+
+        const initialTable = tableFromUrl();
+        if (!restorePositions()) defaultLayout();
+        syncSurface();
+        setZoom(.75, 0, 0);
+        scheduleLayout();
+        requestAnimationFrame(() => {
+          if (initialTable) focusTable(initialTable, { historyMode: null });
+          else showDiagramStart();
+        });
+      JAVASCRIPT
+    end
+  end
+end

data/schema_erd.gemspec

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require_relative "lib/schema_erd/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "schema_erd"
+  spec.version = SchemaErd::VERSION
+  spec.authors = [ "Dreaming Tulpa" ]
+  spec.email = [ "hey@dreamingtulpa.com" ]
+
+  spec.summary = "An interactive ERD for your Rails schema"
+  spec.description = "Mount a fast, interactive entity-relationship diagram generated directly from db/schema.rb."
+  spec.homepage = "https://github.com/codegestalt/schema_erd"
+  spec.license = "MIT"
+  spec.required_ruby_version = ">= 3.2.0"
+
+  spec.metadata["allowed_push_host"] = "https://rubygems.org"
+  spec.metadata["source_code_uri"] = spec.homepage
+  spec.metadata["changelog_uri"] = "#{spec.homepage}/blob/main/CHANGELOG.md"
+
+  spec.files = Dir["CHANGELOG.md", "Gemfile", "LICENSE.txt", "README.md", "Rakefile", "schema_erd.gemspec", "lib/**/*", "test/**/*"]
+  spec.require_paths = [ "lib" ]
+
+  spec.add_development_dependency "minitest", "~> 5.0"
+  spec.add_development_dependency "rack", ">= 2.2"
+  spec.add_development_dependency "rake", "~> 13.0"
+end

data/test/schema_erd_test.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+require "tempfile"
+require "test_helper"
+
+class SchemaErdTest < Minitest::Test
+  SCHEMA = <<~RUBY
+    ActiveRecord::Schema[8.1].define(version: 2026_07_16_123456) do
+      create_table "accounts", force: :cascade do |t|
+        t.string "name", null: false
+        t.index ["name"], name: "index_accounts_on_name", unique: true
+      end
+
+      create_table "invoices", force: :cascade do |t|
+        t.bigint "account_id", null: false
+        t.decimal "total", precision: 12, scale: 2, default: "0.0", null: false
+      end
+
+      add_foreign_key "invoices", "accounts"
+    end
+  RUBY
+
+  def test_escapes_html_without_an_external_dependency
+    assert_equal "&lt;script data-name=&quot;x&quot;&gt;Tom &amp; Jerry&#39;s&lt;/script&gt;", SchemaErd::Html.escape(%(<script data-name="x">Tom & Jerry's</script>))
+  end
+
+  def test_parses_generated_schema_tables_attributes_indexes_and_relationships
+    schema = SchemaErd::Parser.call(SCHEMA)
+
+    assert_equal "2026-07-16-123456", schema.version
+    assert_equal %w[accounts invoices], schema.tables.map(&:name)
+    assert_equal %w[id name], schema.tables.first.columns.map(&:name)
+    assert schema.tables.first.indexes.first.unique
+
+    total = schema.tables.last.columns.find { |column| column.name == "total" }
+    assert_equal "decimal(12,2)", total.type
+    assert_equal "0.0", total.default
+    refute total.nullable
+
+    account_id = schema.tables.last.columns.find { |column| column.name == "account_id" }
+    assert_equal "accounts", account_id.foreign_key_to
+    assert_equal [ "invoices", "accounts", "account_id" ], schema.relationships.first.deconstruct
+  end
+
+  def test_renders_a_standalone_interactive_erd_page
+    Tempfile.create([ "schema_erd", ".rb" ]) do |file|
+      file.write(SCHEMA)
+      file.flush
+
+      response = Rack::MockRequest.new(SchemaErd::App.new(schema_path: file.path)).get("/")
+
+      assert_equal 200, response.status
+      assert_includes response.body, "Database ERD"
+      assert_includes response.body, "<aside class=\"controls-card\">"
+      assert_includes response.body, "data-table=\"invoices\""
+      assert_includes response.body, "account_id"
+      assert_includes response.body, "relationships"
+      assert_includes response.body, "id=\"zoom-out\""
+      assert_includes response.body, "id=\"zoom-fit\""
+      assert_includes response.body, "id=\"clear-focus\""
+      assert_includes response.body, "id=\"reset-layout\""
+      assert_includes response.body, "<body class=\"hide-attributes\">"
+      assert_includes response.body, "<input id=\"attributes\" type=\"checkbox\">"
+      assert_includes response.body, "hide-attributes"
+      assert_includes response.body, "#viewport { width: 100vw; height: 100vh"
+      assert_includes response.body, "function focusTable(tableName, { historyMode = \"push\" } = {})"
+      assert_includes response.body, "function tableFromUrl()"
+      assert_includes response.body, "url.searchParams.set(\"table\", tableName)"
+      assert_includes response.body, "window.addEventListener(\"popstate\""
+      assert_includes response.body, "focusTable(initialTable, { historyMode: null })"
+      assert_includes response.body, "function reflowAfterCardResize()"
+      assert_includes response.body, "fill=\"context-stroke\""
+      assert_includes response.body, "const halfSpan = clamp(sourceRect.height * .18, 8, 24)"
+      assert_includes response.body, "setZoom(.75, 0, 0)"
+      assert_includes response.body, "clearFocusButton.addEventListener(\"click\", resetLayout)"
+      assert_includes response.body, "function enableCardDragging(card)"
+      assert_includes response.body, "viewport.addEventListener(\"pointerdown\""
+      assert_includes response.body, "localStorage.setItem(layoutKey"
+      assert_equal "no-store", response["cache-control"]
+    end
+  end
+end

data/test/test_helper.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+$LOAD_PATH.unshift File.expand_path("../lib", __dir__)
+
+require "minitest/autorun"
+require "rack/mock"
+require "schema_erd"

metadata

@@ -0,0 +1,96 @@
+--- !ruby/object:Gem::Specification
+name: schema_erd
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- Dreaming Tulpa
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: rack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.2'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+description: Mount a fast, interactive entity-relationship diagram generated directly
+  from db/schema.rb.
+email:
+- hey@dreamingtulpa.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/schema_erd.rb
+- lib/schema_erd/version.rb
+- schema_erd.gemspec
+- test/schema_erd_test.rb
+- test/test_helper.rb
+homepage: https://github.com/codegestalt/schema_erd
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  source_code_uri: https://github.com/codegestalt/schema_erd
+  changelog_uri: https://github.com/codegestalt/schema_erd/blob/main/CHANGELOG.md
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.10
+specification_version: 4
+summary: An interactive ERD for your Rails schema
+test_files: []