Examples

Every diagram below is rendered live in your browser by the schema WASM module from a Rails-style structure.sql (23 tables, 2 schemas, partitions, views and enums). Each one is just a <div data-schema> with a different config — expand “config” to copy it.

Full schema, layered

The default: a left-to-right layered layout (referenced tables first), orthogonal edges attached to the FK / PK columns (each in its own lane, hopping where lines cross) and crow's-foot cardinality. Rails bookkeeping tables are excluded by default; partitions fold into their parent (+2P).

config

{ "columns": "all" }

Visual diff between two versions

Pass a base version and schema marks what changed: new tables and columns in green, drops in red and dashed, modified columns in amber with old → new types, plus changed indexes and constraints. Toggle “changes only” in the toolbar to cut the diagram down to the affected tables.

config

{ "edges": { "style": "orthogonal" }, "hide_columns": ["created_at", "updated_at"] }
<div data-schema data-src="structure.next.sql" data-base-src="structure.sql" …>

Focus on a table and its neighbours

Focus on tasks with one hop in both directions, laid out radially. Relations to tables outside the focus are summarised with ↗N on each header. Double-click any table to re-focus.

config

{ "focus": ["tasks"], "focus_depth": 1, "layout": { "algorithm": "radial" }, "hide_columns": ["*_at"] }

Grouped by schema, keys only

Cluster tables by Postgres schema (or name prefix, or your own groups), top-to-bottom, showing only primary / foreign / unique key columns.

config

{ "columns": "keys", "layout": { "group_by": "schema", "direction": "TB" },
  "exclude": ["schema_migrations", "ar_internal_metadata", "active_storage_*"] }

Force-directed overview with views

Headers only, force-directed, including views and materialized views (dashed) with their dependencies.

config

{ "columns": "none", "show_views": true, "layout": { "algorithm": "force" }, "edges": { "anchor": "table", "style": "straight" } }

Inline SQL

No file needed — put DDL straight into the page. Hand-written schemas with inline REFERENCES work too; this one also infers relations from *_id columns (dotted).

code

<script src="schema.embed.js"></script>
<div data-schema data-title="Blog" data-config='{"edges":{"inferred":true}}' style="height:420px">
  <script type="application/sql">
    create table authors (id serial primary key, name text not null, email text unique);
    create table posts (id serial primary key, author_id int not null references authors(id) …);
    …
  </script>
</div>

Standalone HTML export

schema html writes a single self-contained file — SQL, WASM and viewer inlined — that works offline and from file://. Handy for PR comments, tickets and design docs.

Open diff.html Open focus.html

schema html structure.next.sql --base-file structure.sql -o diff.html --title "PR #482"
schema html structure.sql --focus billing.* --depth 1 --columns keys -o focus.html