rails-realtime-erd 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: efe3b4e2ea8f20ac758e39b19f90494e08dc462d6582e8581555eebf69f2baa6
-  data.tar.gz: 053f0a83cd28180b2a95895d27e69e13d73299495effbaadc3dc5a97f6806521
+  metadata.gz: 2ae54e73c4ce9a8ab0a5c5c5b74f195f3f3442aee53a7696c60dd1186b76a129
+  data.tar.gz: 4b0951392d68a93e7a9993854e930dbf465d6e60ecb8a0456fb77fc1a738c4ef
 SHA512:
-  metadata.gz: 17ef9d429795bc8100e029edadbb3e78f548cdd8d687f910b019eb1e0e894a0a550fcc5e60d8e848129895dcd03bde37b5e3950bbf08e414a045128bfdbb71f1
-  data.tar.gz: 71e1b2f091c753a558d1daf47f837fb95328b516f52d36491c368d8468a70657036883f8aeab84defccc855996f487fdbd80fa4781948ac72f7e8009ce7dfd22
+  metadata.gz: e68e63082526393acf1ab417a137625cddacf2bb6adb4f51668eaa2b1aa196dbe506bb5c788dc5b1d84f7b8077bdb4c1be35b8491f343b7f8bf5b3df6e40c3df
+  data.tar.gz: e01dc9df62a4fc40781961de6cec26a177e340ddc1bf1ceea6393300936fc8b4ded496690e2c6b845b9fe3e745bf1adef46a0bc68e34fc559efc9e20fff4d535

data/CHANGELOG.md

@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [0.2.0] - 2026-11-12
+
+### Added
+
+- "Show Column Type & Size" option: displays each column's raw database type
+  (`varchar(255)`, `numeric(10,2)`, `timestamp(6)`, …) instead of the abstract
+  Rails type. Verbose Postgres types are shortened to their standard aliases
+  (`character varying` → `varchar`, `timestamp with time zone` → `timestamptz`,
+  `double precision` → `float8`). ([#1], [#3])
+- Declared `required_ruby_version >= 2.5.0`. ([#2])
+
+### Changed
+
+- The viewer now fills the browser window: the page never scrolls, the model
+  sidebar scrolls on its own and the ERD/Code panes take the remaining height,
+  with the zoom/pan controls always at the bottom of the window. Previously a
+  long model list or a small window made the whole page scroll. ([#4])
+- Diagrams are fitted inside the pane on render (never upscaled), so tall
+  diagrams are no longer clipped at the top and bottom. SVG/PNG downloads still
+  export the full-size diagram. ([#4])
+
+### Fixed
+
+- The footer link now points to the gem's repository instead of github.com.
+
+### Compatibility
+
+- Tested against Rails 6.1, 7.2 and 8.1 on Ruby 3.0 through 4.0 in CI. ([#2])
+
+## [0.1.0] - 2026-05-17
+
+- Initial release.
+
+[0.2.0]: https://github.com/jacksonpires/rails-realtime-erd/compare/v0.1.0...v0.2.0
+[0.1.0]: https://github.com/jacksonpires/rails-realtime-erd/releases/tag/v0.1.0
+[#1]: https://github.com/jacksonpires/rails-realtime-erd/pull/1
+[#2]: https://github.com/jacksonpires/rails-realtime-erd/pull/2
+[#3]: https://github.com/jacksonpires/rails-realtime-erd/pull/3
+[#4]: https://github.com/jacksonpires/rails-realtime-erd/pull/4

data/README.md

@@ -6,6 +6,10 @@ Inspired by [`rails-mermaid_erd`](https://github.com/koedame/rails-mermaid_erd)
 
 The frontend is plain Hotwire (Stimulus) — **no Vue**, no build step, no asset pipeline required in the host app.
 
+![Rails Realtime ERD](docs/rails-realtime-erd.gif)
+
+---
+
 ## Features
 
 - Mounts `/rails/erd` automatically in `development` and `test` environments
@@ -14,6 +18,8 @@ The frontend is plain Hotwire (Stimulus) — **no Vue**, no build step, no asset
 - Copy Mermaid code, Copy Markdown, Copy shareable URL (state in `location.hash`)
 - Download SVG / PNG of the rendered diagram
 - Sidebar filter to scope the diagram to a subset of models
+- Optional raw column types & sizes as reported by the database (`varchar(255)`, `numeric(10,2)`, …)
+- Full-window viewer: the sidebar scrolls on its own and the diagram is fitted to the pane on render
 - Works with any host asset pipeline (Sprockets, Propshaft, importmap, or none) — all CSS/JS is inlined by the engine layout
 
 ## Installation
@@ -69,8 +75,24 @@ Specs run against a SQLite-backed dummy Rails app in `spec/dummy`. SQLite does n
 ```bash
 $ bundle install
 $ bundle exec rspec
+$ bundle exec standardrb
+```
+
+The root `Gemfile` targets the latest Rails. Older supported Rails versions have their own Gemfile under `gemfiles/`:
+
+```bash
+$ BUNDLE_GEMFILE=gemfiles/rails_6_1.gemfile bundle install
+$ BUNDLE_GEMFILE=gemfiles/rails_6_1.gemfile bundle exec rspec
 ```
 
+CI (`.github/workflows/ci.yml`) runs the suite against this matrix:
+
+| Rails | Ruby |
+|---|---|
+| 6.1 (`gemfiles/rails_6_1.gemfile`) | 3.0, 3.3 — Rails 6.1 itself does not load on Ruby ≥ 3.4 |
+| 7.2 (`gemfiles/rails_7_2.gemfile`) | 3.3, 4.0 |
+| 8.1 (`Gemfile`) | 3.4, 4.0 |
+
 ## License
 
 MIT. See `MIT-LICENSE`.

data/app/assets/stylesheets/rails_realtime_erd/erd.css

@@ -109,8 +109,8 @@ a { color: inherit; text-decoration: inherit; }
 .h-4 { height: 1rem; }
 .h-6 { height: 1.5rem; }
 .h-full { height: 100%; }
-.min-h-\[calc\(100vh-56px-32px\)\] { min-height: calc(100vh - 56px - 32px); }
-.min-h-\[calc\(100vh-56px-32px-56px\)\] { min-height: calc(100vh - 56px - 32px - 56px); }
+.h-screen { height: 100vh; height: 100dvh; }
+.min-h-0 { min-height: 0; }
 
 /* ------- Borders ------- */
 .border { border-width: 1px; }
@@ -176,6 +176,8 @@ a { color: inherit; text-decoration: inherit; }
 
 /* ------- Misc ------- */
 .overflow-hidden { overflow: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+.resize-none { resize: none; }
 
 /* ------- Mermaid override ------- */
 #mermaid-erd { fill: #9c9c9c !important; }
@@ -206,9 +208,15 @@ a { color: inherit; text-decoration: inherit; }
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
+  /* Bottom padding keeps the fitted diagram clear of the overlaid
+   * Movement/Zoom hint bar at the bottom of the pane. */
+  padding: 1rem 1rem 5rem;
 }
+/* Fit the diagram inside the pane on first render (never upscaled: Mermaid
+ * caps the SVG at its natural size via an inline max-width). Zoom/pan then
+ * works from there. */
 #rre-preview svg {
   max-width: 100%;
+  max-height: 100%;
   height: auto;
 }

data/app/javascript/rails_realtime_erd/application.js

@@ -17,8 +17,8 @@ window.RailsRealtimeErdStimulus = application;
 class FilterController extends Controller {
   static targets = [
     "search", "modelList", "modelRow", "modelCheckbox",
-    "previewRelations", "showRelationComment", "showKey", "showComment", "hideColumns", "showOnlyKeys",
-    "showKeyLabel", "showCommentLabel", "showOnlyKeysLabel"
+    "previewRelations", "showRelationComment", "showKey", "showComment", "showType", "hideColumns", "showOnlyKeys",
+    "showKeyLabel", "showCommentLabel", "showTypeLabel", "showOnlyKeysLabel"
   ];
 
   connect() {
@@ -28,6 +28,7 @@ class FilterController extends Controller {
       isShowRelationComment: false,
       isShowKey: false,
       isShowComment: false,
+      isShowType: false,
       isHideColumns: false,
       isShowOnlyKeys: false,
       filterText: ""
@@ -56,6 +57,7 @@ class FilterController extends Controller {
     if (this.hasShowRelationCommentTarget) this.showRelationCommentTarget.checked = !!this.state.isShowRelationComment;
     if (this.hasShowKeyTarget) this.showKeyTarget.checked = !!this.state.isShowKey;
     if (this.hasShowCommentTarget) this.showCommentTarget.checked = !!this.state.isShowComment;
+    if (this.hasShowTypeTarget) this.showTypeTarget.checked = !!this.state.isShowType;
     if (this.hasHideColumnsTarget) this.hideColumnsTarget.checked = !!this.state.isHideColumns;
     if (this.hasShowOnlyKeysTarget) this.showOnlyKeysTarget.checked = !!this.state.isShowOnlyKeys;
     if (this.hasSearchTarget) this.searchTarget.value = this.state.filterText;
@@ -81,12 +83,14 @@ class FilterController extends Controller {
     const inputs = [
       this.hasShowKeyTarget && this.showKeyTarget,
       this.hasShowCommentTarget && this.showCommentTarget,
+      this.hasShowTypeTarget && this.showTypeTarget,
       this.hasShowOnlyKeysTarget && this.showOnlyKeysTarget
     ].filter(Boolean);
     inputs.forEach(input => { input.disabled = disabled; });
     const labels = [
       this.hasShowKeyLabelTarget && this.showKeyLabelTarget,
       this.hasShowCommentLabelTarget && this.showCommentLabelTarget,
+      this.hasShowTypeLabelTarget && this.showTypeLabelTarget,
       this.hasShowOnlyKeysLabelTarget && this.showOnlyKeysLabelTarget
     ].filter(Boolean);
     labels.forEach(label => {
@@ -119,6 +123,7 @@ class FilterController extends Controller {
       isShowRelationComment: this.hasShowRelationCommentTarget && this.showRelationCommentTarget.checked,
       isShowKey: this.hasShowKeyTarget && this.showKeyTarget.checked,
       isShowComment: this.hasShowCommentTarget && this.showCommentTarget.checked,
+      isShowType: this.hasShowTypeTarget && this.showTypeTarget.checked,
       isHideColumns: this.hasHideColumnsTarget && this.hideColumnsTarget.checked,
       isShowOnlyKeys: this.hasShowOnlyKeysTarget && this.showOnlyKeysTarget.checked
     };
@@ -158,6 +163,7 @@ class FilterController extends Controller {
       isShowRelationComment: false,
       isShowKey: false,
       isShowComment: false,
+      isShowType: false,
       isHideColumns: false,
       isShowOnlyKeys: false,
       filterText: ""
@@ -232,7 +238,8 @@ class DiagramController extends Controller {
           if (state.isShowOnlyKeys && !column.key) return;
           const key = state.isShowKey ? (column.key || "") : "";
           const comment = state.isShowComment ? `"${column.comment || ""}"` : "";
-          lines.push(`        ${column.type} ${column.name} ${key} ${comment}`);
+          const type = state.isShowType ? this.sanitizeType(column.sql_type) || column.type : column.type;
+          lines.push(`        ${type} ${column.name} ${key} ${comment}`);
         });
       }
       lines.push("    }");
@@ -247,6 +254,35 @@ class DiagramController extends Controller {
     return lines.join("\n");
   }
 
+  // Mermaid erDiagram attribute types must match [*A-Za-z_][A-Za-z0-9\-_\[\]()]*
+  // — no spaces, commas or quotes. Postgres reports verbose multi-word types,
+  // so map those to their standard short aliases first, then make whatever is
+  // left parser-safe:
+  //   character varying(255)          -> varchar(255)
+  //   timestamp(6) without time zone  -> timestamp(6)
+  //   timestamp with time zone        -> timestamptz
+  //   decimal(10,2)                   -> decimal(10_2)
+  //   enum('a','b')                   -> enum(a_b)
+  //   integer[]                       -> integer[]
+  sanitizeType(raw) {
+    let s = String(raw || "").trim();
+    s = s
+      .replace(/^character varying/i, "varchar")
+      .replace(/^character\b/i, "char")
+      .replace(/^bit varying/i, "varbit")
+      .replace(/^double precision/i, "float8")
+      .replace(/^(timestamp|time)(\(\d+\))? without time zone/i, "$1$2")
+      .replace(/^(timestamp|time)(\(\d+\))? with time zone/i, "$1tz$2");
+    s = s
+      .replace(/['"`]/g, "")
+      .replace(/\s*,\s*/g, "_")
+      .replace(/[^A-Za-z0-9\-_\[\]()]+/g, "_")
+      .replace(/_+/g, "_")
+      .replace(/^_+|_+$/g, "");
+    if (/^[0-9\-\[\]()]/.test(s)) s = `_${s}`;
+    return s;
+  }
+
   filteredData(state) {
     const selected = new Set(state.selectModels || []);
     let relations;
@@ -330,6 +366,7 @@ class HashStateController extends Controller {
         isShowRelationComment: !!parsed.isShowRelationComment,
         isShowKey: !!parsed.isShowKey,
         isShowComment: !!parsed.isShowComment,
+        isShowType: !!parsed.isShowType,
         isHideColumns: !!parsed.isHideColumns,
         isShowOnlyKeys: !!parsed.isShowOnlyKeys
       });
@@ -344,6 +381,7 @@ class HashStateController extends Controller {
       isShowRelationComment: state.isShowRelationComment,
       isShowKey: state.isShowKey,
       isShowComment: state.isShowComment,
+      isShowType: state.isShowType,
       isHideColumns: state.isHideColumns,
       isShowOnlyKeys: state.isShowOnlyKeys
     };

data/app/views/rails_realtime_erd/erd/_main.html.erb

@@ -1,9 +1,9 @@
-<div class="space-x-2 inline-flex p-4">
+<div class="space-x-2 flex flex-none p-4">
   <button type="button" data-tab-target="erdButton" data-action="click->tab#showErd" class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-white text-gray-900">ERD</button>
   <button type="button" data-tab-target="codeButton" data-action="click->tab#showCode" class="text-xs py-1 px-2 rounded hover:bg-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-900 bg-gray-400 text-gray-900">Code</button>
 </div>
 
-<div data-tab-target="erdPane" class="px-4 w-full min-h-[calc(100vh-56px-32px-56px)] relative overflow-hidden" data-zoom-pan-target="canvas">
+<div data-tab-target="erdPane" class="px-4 w-full flex-1 min-h-0 relative overflow-hidden" data-zoom-pan-target="canvas">
   <div data-zoom-pan-target="area">
     <div id="rre-preview" data-diagram-target="preview"></div>
   </div>
@@ -37,4 +37,4 @@
   </div>
 </div>
 
-<textarea data-tab-target="codePane" data-rre-hidden data-diagram-target="codeOutput" readonly class="px-4 bg-gray-900 text-gray-300 font-mono w-full text-xs min-h-[calc(100vh-56px-32px-56px)] border-0 focus:ring-0 block"></textarea>
+<textarea data-tab-target="codePane" data-rre-hidden data-diagram-target="codeOutput" readonly class="px-4 bg-gray-900 text-gray-300 font-mono w-full text-xs flex-1 min-h-0 resize-none border-0 focus:ring-0 block"></textarea>

data/app/views/rails_realtime_erd/erd/_sidebar.html.erb

@@ -63,6 +63,11 @@
       <span class="text-xs text-gray-900">Show Column Comment</span>
     </label>
 
+    <label class="relative flex items-start hover:bg-gray-100 rounded text-sm" data-filter-target="showTypeLabel">
+      <input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-red-600 mr-2 focus:ring-red-600" data-filter-target="showType" data-action="change->filter#onOptionChange">
+      <span class="text-xs text-gray-900">Show Column Type &amp; Size</span>
+    </label>
+
     <label class="relative flex items-start hover:bg-gray-100 rounded text-sm" data-filter-target="showOnlyKeysLabel">
       <input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-red-600 mr-2 focus:ring-red-600" data-filter-target="showOnlyKeys" data-action="change->filter#onOptionChange">
       <span class="text-xs text-gray-900">Only Show Keys</span>

data/app/views/rails_realtime_erd/erd/show.html.erb

@@ -2,13 +2,14 @@
 
 <div
   id="rre-app"
+  class="flex flex-col h-screen overflow-hidden"
   data-controller="hash-state filter diagram clipboard download tab zoom-pan"
   data-hash-state-filter-outlet="[data-controller~='filter']"
   data-filter-diagram-outlet="[data-controller~='diagram']"
   data-clipboard-diagram-outlet="[data-controller~='diagram']"
   data-download-diagram-outlet="[data-controller~='diagram']"
 >
-  <header class="bg-red-600">
+  <header class="bg-red-600 flex-none">
     <nav class="mx-auto px-4">
       <div class="flex w-full items-center justify-between py-4">
         <h1 class="text-white inline-flex space-x-2 items-center">
@@ -24,19 +25,19 @@
     </nav>
   </header>
 
-  <div class="flex">
-    <aside class="w-[250px] border-r border-gray-300 flex-none p-2">
+  <div class="flex flex-1 min-h-0">
+    <aside class="w-[250px] border-r border-gray-300 flex-none p-2 overflow-y-auto">
       <%= render "sidebar" %>
     </aside>
 
-    <main class="flex-1 bg-gray-900 min-h-[calc(100vh-56px-32px)]">
+    <main class="flex-1 min-w-0 bg-gray-900 flex flex-col">
       <%= render "main" %>
     </main>
   </div>
 
-  <footer class="bg-gray-100">
+  <footer class="bg-gray-100 flex-none">
     <p class="text-center text-xs text-gray-600 py-2">
-      <a href="https://github.com/" class="hover:text-gray-400" target="_blank" rel="noopener noreferrer">
+      <a href="<%= RailsRealtimeErd::HOMEPAGE %>" class="hover:text-gray-400" target="_blank" rel="noopener noreferrer">
         Rails Realtime ERD v<%= @version %>
       </a>
     </p>

data/config/routes.rb

@@ -1,4 +1,4 @@
 RailsRealtimeErd::Engine.routes.draw do
   root to: "erd#show", as: :erd
-  get "assets/:name", to: "assets#show", as: :engine_asset, constraints: {name: /[\w.\-]+/}
+  get "assets/:name", to: "assets#show", as: :engine_asset, constraints: {name: /[\w.-]+/}
 end

data/lib/rails-realtime-erd/builder.rb

@@ -37,6 +37,7 @@ module RailsRealtimeErd
             model[:Columns] << {
               name: column.name,
               type: column.type,
+              sql_type: column.sql_type,
               key: key,
               comment: column.comment
             }

data/lib/rails-realtime-erd/engine.rb

@@ -11,7 +11,7 @@ module RailsRealtimeErd
 
       mount_path = config.mount_path
       app.routes.append do
-        mount RailsRealtimeErd::Engine => mount_path, as: :rails_realtime_erd
+        mount RailsRealtimeErd::Engine, at: mount_path, as: :rails_realtime_erd
       end
     end
   end

data/lib/rails-realtime-erd/version.rb

@@ -1,3 +1,4 @@
 module RailsRealtimeErd
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
+  HOMEPAGE = "https://github.com/jacksonpires/rails-realtime-erd"
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: rails-realtime-erd
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Jackson Pires
-autorequire: 
 bindir: bin
 cert_chain: []
-date: 2026-05-17 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,62 +23,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 6.1.7.10
-- !ruby/object:Gem::Dependency
-  name: sqlite3
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 1.5.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 1.5.0
-- !ruby/object:Gem::Dependency
-  name: rspec-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 6.1.5
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 6.1.5
-- !ruby/object:Gem::Dependency
-  name: rake
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 13.4.2
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 13.4.2
-- !ruby/object:Gem::Dependency
-  name: standard
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 1.28.5
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 1.28.5
 description: Mounts /rails/erd in your Rails app. On every request the gem introspects
   ActiveRecord models and renders a Mermaid ERD viewer with Stimulus-driven filters,
   zoom/pan, copy & download. No pre-generated HTML file.
@@ -89,6 +32,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - MIT-LICENSE
 - README.md
 - Rakefile
@@ -114,9 +58,8 @@ homepage: https://github.com/jacksonpires/rails-realtime-erd
 licenses:
 - MIT
 metadata:
-  homepage_uri: https://github.com/jacksonpires/rails-realtime-erd
   source_code_uri: https://github.com/jacksonpires/rails-realtime-erd
-post_install_message: 
+  changelog_uri: https://github.com/jacksonpires/rails-realtime-erd/blob/main/CHANGELOG.md
 rdoc_options: []
 require_paths:
 - lib
@@ -124,15 +67,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.5.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3.1
-signing_key: 
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Live Mermaid ERD viewer mounted as a Rails route, powered by Hotwire.
 test_files: []