d-sch-viewer

Real-time Entity-Relationship Diagram (ERD) viewer for Prisma schemas with professional Graphviz-powered layout.

Watch your database schema come to life as you edit your .prisma files. Changes are reflected instantly in an interactive diagram.

Features

• Professional Layout: Uses Graphviz (via WASM) for optimal hierarchical node positioning
• Real-time updates: See changes as you edit your Prisma schema files
• Multi-file support: Reads all .prisma files in your schema directory
• Focus Mode: Click any table to highlight only that table and its direct relations (dims unrelated tables)
• Interactive Navigation: Zoom, pan, and explore your schema freely
• Beautiful Bezier curves: Smooth spline connections between tables
• All fields visible: Tables show all fields with dynamic height
• Relation visualization: Shows 1:1, 1:N, and N:M relationships with arrows
• Cross-file relations: Highlights relations between models in different files (orange)
• Auth models priority: Auth-related models positioned at top of diagram
• MiniMap: Navigate large schemas easily
• Dark theme: Easy on the eyes
• Auto port management: Automatically frees the port if already in use

Installation

npm install -g d-sch-viewer

Or use directly with npx:

npx d-sch-viewer

Or with bun:

bun add -g d-sch-viewer

Usage

Navigate to your project directory (where your Prisma schema is located) and run:

d-sch-viewer

Or use the short alias:

dsch

Then open http://localhost:4567 in your browser.

Options

-p, --port <port>    Port to run the server on (default: 4567)
-d, --path <path>    Path to schema directory (default: ./prisma/schema)
--no-watch           Disable file watching
-o, --open           Open browser automatically
-h, --help           Show help message
-v, --version        Show version number

Examples

# Start with defaults
d-sch-viewer

# Use a different port
d-sch-viewer -p 3333

# Custom schema path
d-sch-viewer -d ./database/prisma

# Open browser automatically
dsch --open

Controls

| Action | Description | |--------|-------------| | Click table | Enter Focus Mode - shows only selected table and its relations | | Click empty space | Exit Focus Mode - shows all tables | | ESC key | Exit Focus Mode | | Scroll wheel | Zoom in/out | | Click + Drag | Pan around the diagram | | Hover table | Highlight related tables (yellow outline) |

Schema Structure

d-sch-viewer expects your Prisma schema to be organized like this:

your-project/
└── prisma/
    └── schema/
        ├── schema.prisma     # Main schema
        ├── auth.prisma       # Auth models (positioned at top)
        └── ...               # Additional schema files

The tool reads all .prisma files in the root of the schema directory (not subdirectories).

Tech Stack

• Layout Engine: Graphviz via @viz-js/viz (WASM)
• Parser: @mrleebo/prisma-ast for Prisma schema parsing
• File Watcher: chokidar for real-time updates
• Server: Native Node.js HTTP + WebSocket
• Rendering: Vanilla JavaScript + SVG (no React dependency)

Compatibility

• Node.js: 18.0.0 or higher
• Bun: Fully compatible
• Prisma: Any version with standard schema syntax

Development

# Clone the repository
git clone https://github.com/Daniels9705/d-sch-viewer.git
cd d-sch-viewer

# Install dependencies
bun install

# Run in development mode
cd packages/cli
bun run dev -- -d /path/to/your/prisma/schema -o

Changelog

v0.1.1

• Focus Mode: Click any table to show only that table and its direct relations
• Auto port management: Automatically kills existing process on port before starting
• Improved UX: Drag to pan maintains focus mode, click without drag exits focus mode
• ESC key support: Press ESC to exit focus mode
• Removed table dragging (replaced with Focus Mode for better UX)

v0.1.0

• Initial release
• Graphviz-powered layout engine
• Real-time schema watching
• Multi-file Prisma schema support
• Interactive zoom/pan navigation
• MiniMap for large schemas

License

MIT