SQL Schema Visualizer

Free, fast, in-browser database schema visualizer. Paste your SQL CREATE TABLE statements and instantly get a smooth, interactive ER diagram — no signup, no backend, nothing leaves your browser.

Tried every database schema diagram tool and they're all slow, clunky, or paywalled? This one isn't. Paste DDL, see your schema.

▶ Live demo: khanakia.com/apps/sql-schema-visualizer/

Dark mode — paste DDL, get an interactive ER diagram with FK edges and inline SQL comments.

Light mode — sidebar table/field search, collapsible tables, and the canvas toolbar.

Most SQL schema visualization tools are either paid, require a live database connection, ship your schema to a server, or feel sluggish on anything bigger than a toy database. SQL Schema Visualizer is a single-page app that parses DDL entirely client-side and renders a fluid, navigable diagram of your tables and relationships.

• 🔒 100% client-side — your schema never leaves the browser
• ⚡ Fast & smooth — pan, zoom, drag a 40+ table schema without lag
• 🆓 Free & open source — MIT licensed, no account, no limits
• 🧩 Multi-dialect — PostgreSQL, MySQL, SQLite, generic ANSI SQL

• Tolerant multi-dialect SQL parser — handles PostgreSQL, MySQL, SQLite and ANSI CREATE TABLE / ALTER TABLE, including backticks, [brackets], "quotes", schema prefixes, AUTO_INCREMENT/AUTOINCREMENT, UNSIGNED, composite keys and inline / table-level foreign keys.
• Interactive canvas — pan, zoom, drag nodes, auto-layout (horizontal or vertical), minimap, fit-to-view.
• Figma-style navigation — two-finger / trackpad scroll pans, ⌘/Ctrl+scroll zooms, double-click zooms in.
• Smart search — filter by table or column name; matching tables expand to show the hit fields.
• Click to navigate — jump straight to any table or field; the canvas centers and highlights it.
• SQL comments preserved — table- and column-level -- / # comments are captured and shown inline or as hover popovers (toggle: off → inline → hover).
• Foreign-key edges — column-to-column relationship lines with crow's-foot ERD markers (FK side blue with crow's foot; PK side amber with bar + arrowhead; nullable FKs get an extra circle).
• Follow-the-FK navigation — click the ↗ on any FK column or the edge itself to jump to the referenced table; navigation history with ⌥/Alt+← or ⌘/Ctrl+[ and a visible ← Back button.
• Table groups — name a subset of tables (e.g. billing, auth) and click to filter the canvas to just those; group memberships persist locally and travel in the share URL. Multi-select tables on the canvas (Shift/⌘-click or drag-rectangle) and right-click to bulk-add the whole selection to a group in one shot.
• -- @group: SQL annotations — drop -- @group: billing, reporting above a CREATE TABLE and the visualizer auto-creates a read-only group from the SQL (a table can belong to multiple groups). Surfaces with a 📌 SQL badge in the Groups sidebar tab.
• /* @doc */ rich descriptions — wrap multi-paragraph markdown in /* @doc … */ above a CREATE TABLE (table-level) or above a column line inside the parens (column-level). The diagram shows a 📖 (table) or 📝 (column) badge — hover for a portal-rendered preview popover, click to open a wider slide-in drawer with the full rendered markdown. Headings, bold, italic, inline + fenced code, lists, and links all render. Multiple @doc blocks for the same target concatenate.
• Notes sidebar tab — fourth tab with two modes: By table (auto-tracks the focused table; shows table + per-column descriptions with click-to-open-in-drawer buttons) and 📝 All field notes (every column-level @doc across the schema in one filterable list).
• Search digs into descriptions — the sidebar search box matches column names, short -- comments, and @doc body text. Type a phrase from any column's prose to find it.
• Resizable sidebar — drag the right edge of the sidebar to resize (240–700px); width persists locally.
• Multi-select & right-click menu — Shift/⌘-click to multi-select; right-click any selected table for a Groups ▸ submenu (toggle membership, "+ New group from N tables…").
• Searchable help modal — ? opens an inline help modal that indexes every feature (try "multi", "fk", "filter", "backup", "annotation").
• Backup / restore — ⤓ Export backup downloads a JSON snapshot of SQL + groups + preferences; ⤴ Import backup restores it after a confirm. Versioned format; tolerant decoder.
• Import — paste DDL or upload a .sql file. Built-in sample schemas: e-commerce, blog, SaaS, relationship-notation demo, mini-ERP (groups demo), social network, project management (MySQL), library catalogue (SQLite), banking ledger.
• Export — one-click PNG of the full diagram.
• Share — whole schema compressed into a URL fragment (deflate-raw, ~2.9×); groups + active group travel alongside in an additive &g= fragment. 100% client-side, no server.
• Dark / light UI, keyboard-friendly, pluggable storage (localStorage by default).
• Use it as a library — framework-agnostic core + composable React components (see Packages). Every UI piece is a named exported primitive: <HelpButton>, <HelpModal>, <GroupsPanel>, <GroupsContextMenu>, <ActiveGroupPill>, <BackButton>, <ErdMarkers>, <ExportBackupButton>, <ImportBackupButton>, and more.

This is a pnpm monorepo. The visualizer is reusable, not just an app:

flowchart LR
  subgraph core["@khanakia/sql-schema-core — pure TS"]
    PR["parseSchema"] --> SC["Schema model"]
    LG["layoutGraph · dagre"]
    CD["encodeSql / decodeSql"]
  end
  subgraph react["@khanakia/sql-schema-react — composable UI"]
    STORE["zustand store<br/>+ StorageAdapter"]
    UI["SchemaVisualizer / Provider<br/>Canvas · Sidebar · Toolbar"]
  end
  subgraph app["apps/web"]
    RT["TanStack hash router"]
    SH["share link #s= handling"]
  end
  SC --> STORE --> UI
  LG --> UI
  CD --> UI
  UI --> RT --> SH
  SH -. deploy .-> GP["GitHub Pages"]

Embed it in your own React app:

import { SchemaVisualizer } from '@khanakia/sql-schema-react'
import '@khanakia/sql-schema-react/styles.css'

<SchemaVisualizer sql="CREATE TABLE users ( id int PRIMARY KEY );" />

The repo ships an installable skills.sh skill that teaches your coding agent (Claude Code, Codex, Cursor, OpenCode, …) how to annotate a .sql file with -- @group: and /* @doc */ markdown so the visualizer renders it richly. One command to add it to any project:

# install into the current project
npx skills add khanakia/sql-schema-visualizer

# or globally, for Claude Code only
npx skills add khanakia/sql-schema-visualizer --skill sql-prep -g -a claude-code -y

Skill source lives in skills/sql-prep/ — see skills/README.md for the full list.

git clone https://github.com/khanakia/sql-schema-visualizer.git
cd sql-schema-visualizer
pnpm install
pnpm dev            # web app dev server (bundles packages from source, HMR)

Switch to the Paste / Import SQL tab, paste your CREATE TABLE statements (or upload a .sql file) and the diagram renders instantly.

pnpm build          # build @khanakia/sql-schema-core + @khanakia/sql-schema-react + the web app
pnpm test           # @khanakia/sql-schema-core unit tests (Vitest)
pnpm --filter @khanakia/sql-schema-web preview

If you have Task installed: task dev / task build / task test / task typecheck.

The parser is deliberately forgiving: a partially-understood dump still produces a useful diagram, with warnings surfaced in the sidebar.

TypeScript · pnpm workspaces · Vite · React 19 · TanStack Router · React Flow (@xyflow/react) · dagre (auto-layout) · Tailwind CSS · Zustand · Vitest · native CompressionStream (share codec) · html-to-image.

See CONTEXT.md for the full technical architecture, parser design, the documented gotchas, and known limitations.

Issues and PRs welcome — especially SQL dialect edge cases. See CONTRIBUTING.md. Releases are automated with Changesets — see docs/PUBLISHING.md.

MIT © khanakia