DBML Previewer

Transform your DBML files into beautiful, interactive database diagrams instantly.

Perfect for database architects, developers, and anyone working with database schemas. Turn text-based DBML into visual understanding with just one click.

What's New

v1.6.1 - Bug Fix Release

• Blank Preview Fix: Fixed the preview panel showing up empty in the installed extension (v1.6.0)
• Relationship Handles Fix: A column that is both the source of one relationship and the target of another now keeps both connection points

v1.6.0 - Optional Relationships Release

• Optional Relationship Syntax: DBML's ? relationship modifier (>?, ?>, <?, ?<) is now supported instead of failing to parse
• Multi-Schema Relationships Fix: Relationships between default-schema tables now render correctly in files that also use explicitly-named schemas

Key Features

Instant Visual Database Diagrams

• One-Click Preview - Transform DBML files into interactive diagrams instantly
• Real-Time Updates - See changes as you save your DBML files
• Drag & Drop Tables - Customize layout with automatic position saving
• Smart Table Notes - Clean popup tooltips for table documentation

Intelligent Relationship Mapping

• Visual Connections - See foreign key relationships at a glance
• Interactive Tooltips - Click relationships for detailed information
• Clickable Navigation - Click table names in tooltips to navigate instantly
• Column-Level Precision - Exact source and target column identification
• Cardinality Display - Clear 1:1, 1:_, _:* relationship indicators

Enterprise-Ready Schema Support

• Multi-Schema Files - Handle complex databases with multiple schemas
• Table Grouping - Visual organization with background containers
• Rich Column Details - Types, constraints, keys, and enum support
• Full DBML Specification - Complete support for all DBML features

Seamless VS Code Integration

• Flexible Theming - Choose VS Code theme inheritance or clean light theme
• Multiple Access Points - Command palette, context menu, keyboard shortcuts
• Side-by-Side Editing - Preview alongside your DBML file
• Quick Access - Ctrl+Shift+D / Cmd+Shift+D keyboard shortcut

Professional Export Capabilities

• PNG Export - High-resolution raster images for documentation
• SVG Export - Scalable vector graphics for presentations
• Configurable Quality - Adjust image quality and resolution
• Background Control - Export with or without background color

Get Started in 30 Seconds

Quick Install

From VS Code:

# VS Code / Visual Studio Code
code --install-extension rizkykurniawan.dbml-previewer

From VSCodium/Open VSX:

# VSCodium or other Open VSX compatible editors
codium --install-extension rizkykurniawan.dbml-previewer

Or search "DBML Previewer" in your editor's Extensions panel (Ctrl+Shift+X)

Supported Editors:

• Visual Studio Code (via VS Code Marketplace)
• VSCodium (via Open VSX Registry)
• Eclipse Theia
• Gitpod
• Any VS Code compatible editor

Instant Usage

1. Open any .dbml file in VS Code
2. Press Ctrl+Shift+D (Windows/Linux) or Cmd+Shift+D (macOS)
3. Done - Your database diagram appears instantly

Alternative Methods:

• Right-click file → "Preview DBML"
• Click preview button in editor title bar
• Command Palette → "DBML Previewer: Preview DBML"

Example DBML File

Create a .dbml file with this sample content to try the extension:

Project sample_project {
  database_type: 'PostgreSQL'
  Note: 'Sample e-commerce database schema'
}

Table users [headercolor: #27AE60] {
  id integer [primary key, increment]
  username varchar(50) [not null, unique]
  email varchar(100) [not null, unique]
  created_at timestamp [default: `now()`]

  Note: 'User accounts table'
}

Table orders [headercolor: #3498DB] {
  id integer [primary key, increment]
  user_id integer [not null, ref: > users.id]
  total decimal(10,2) [not null]
  status varchar(20) [default: 'pending']
  created_at timestamp [default: `now()`]

  Note: 'Customer orders'
}

Table order_items {
  order_id integer [ref: > orders.id]
  product_id integer [not null]
  quantity integer [not null]
  price decimal(10,2) [not null]

  indexes {
    (order_id, product_id) [pk]
  }
}

DBML Support

This extension supports the full DBML specification including:

• Tables with columns, types, and constraints
• Primary Keys and Foreign Keys with visual indicators
• Relationships (>, <, -, <>) with proper cardinality display, including the optional ? modifier (e.g. >?, ?>)
• Unique Constraints and Not Null constraints
• Table Notes
• Indexes (simple and composite)
• Table Groups for schema organization
• Custom Colors for tables (headercolor) and groups (color)
• CHECK Constraints - Table-level and column-level check constraint support
• Multi-schema database support
• Default Values and Auto-increment fields

Controls and Navigation

Diagram Controls

• Zoom: Mouse wheel or zoom controls in bottom-left
• Pan: Click and drag empty space to move around
• Fit View: Reset zoom to fit entire diagram

Table Interaction

• Drag Tables: Click and drag table headers to reposition
• Group Movement: Drag table groups to move all contained tables
• Relationship Details: Hover a relationship line to see its details
• Navigate via Tooltips: Click table names in relationship tooltips to jump to that table

Relationship Interaction

• Reshape a Route: Click a relationship to enter edit mode, then drag a segment sideways to move it, or grab it near its middle to split it in two and drag that half. Segments that end up aligned merge back together on their own. Requires diagram.editableEdgeRouting.
• Choose a Side: Drag either end of a relationship across its table to pick the side it leaves from or arrives at, or right-click the end to switch it
• Reset a Route: Use the reset control that appears beside a relationship in edit mode to return it to its automatic route
• Leave Edit Mode: Click anywhere off the relationship

Keyboard Shortcuts

• Ctrl+Shift+D / Cmd+Shift+D: Open DBML preview
• Mouse wheel: Zoom in/out
• Space + drag: Pan diagram
• Escape: Close relationship tooltips

Configuration

The extension works out of the box with sensible defaults and includes the following configuration options:

Theme Configuration

• diagram.inheritThemeStyle (boolean, default: false)
  • Controls whether diagrams inherit VS Code theme styling
  • When disabled, uses a clean light theme optimized for diagram readability
  • Prevents issues with poorly designed VS Code themes

Cardinality Configuration

• diagram.showCardinalityLabels (boolean, default: false)
  • Show cardinality labels on relationship edges, in addition to the relationship markers
  • 1 = one-side, * = many-side
  • Useful for quickly reading relationship multiplicities without opening tooltips

Edge Type Configuration

• diagram.edgeType (string, default: "smoothstep")
  • Customizes the visual style of relationship connections
  • Available options:
    • "straight" - Direct straight lines between tables
    • "smoothstep" - Smooth step edges with rounded corners (recommended)
    • "bezier" - Curved bezier edges for organic appearance
  • A relationship whose route has been reshaped by hand is always drawn as orthogonal segments, since that is the shape its saved corners describe. This setting governs every relationship that has not been reshaped.

Relationship Edge Configuration

• diagram.autoEndpointSide (boolean, default: true)

  • Each end of a relationship connects to the side of its table that faces the related table, instead of always leaving on the right and arriving on the left
  • Cuts out the detours — and the crossings they cause — that appear when the related table sits to the left or above
  • Disable to restore the previous always-right-to-left behaviour

• diagram.relationshipMarkers (boolean, default: true)

  • Show entity-relationship markers on relationship edges: a crow's foot on the many side and a bar on the one side, drawn against the table border
  • Makes multiplicity readable at a glance, at any zoom

• diagram.editableEdgeRouting (boolean, default: false)

  • Allow relationship routes to be reshaped by hand; see Relationship Interaction above for the gestures
  • Reshaped routes are saved next to table positions in the layout file and survive reordering or inserting a Ref
  • Applies to orthogonal edges, so it has no effect while diagram.edgeType is "bezier" or "straight"
  • Saved routes are always drawn, whether or not this setting is on, so turning it off is a read-only mode rather than a way to lose work

Display Configuration

• diagram.showMinimap (boolean, default: true)
  • Show the minimap in the bottom-right corner of the diagram
  • Disable to hide it

Export Configuration

• diagram.exportQuality (number, default: 0.95)

  • Image quality for PNG exports (0.1 to 1.0)
  • Higher values produce better quality but larger file sizes
  • Recommended: 0.95 for high-quality exports

• diagram.exportBackground (boolean, default: true)

  • Include background in exported images
  • When disabled, exported images have transparent background
  • Useful for presentations and documentation

• diagram.exportPadding (number, default: 20)

  • Padding around the diagram in exported images (in pixels)
  • Range: 0-100 pixels
  • Provides visual breathing room around your diagram

• diagram.bulkExport.outputFolder (string, default: "")

  • Path to the folder where bulk-exported files will be saved
  • Relative paths resolve from the workspace root
  • Leave empty to save into a dbml-exports subfolder inside the source folder

How to Configure

1. Open VS Code Settings (Ctrl+, / Cmd+,)
2. Search for "diagram" or "DBML Previewer"
3. Adjust settings to your preference
4. Changes apply immediately without restart

How to Export

Via UI Buttons (recommended):

1. Open any DBML file and preview it
2. Look for export buttons in the top-right stats panel
3. Click "Export PNG" or "Export SVG"
4. Image downloads automatically with timestamped filename

Via Command Palette:

1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Search for "Export Diagram to PNG" or "Export Diagram to SVG"
3. Execute the command
4. Image downloads automatically

How to Bulk Export

Via Explorer context menu (recommended):

1. Right-click any folder in the VS Code Explorer panel
2. Select "Bulk Export DBML Files to PNG" or "Bulk Export DBML Files to SVG"
3. All .dbml files in the folder are exported automatically

Via Keyboard Shortcuts:

• Ctrl+Shift+Alt+E / Cmd+Shift+Alt+E: Bulk export to PNG
• Ctrl+Shift+Alt+S / Cmd+Shift+Alt+S: Bulk export to SVG

Via Command Palette:

1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Search for "Bulk Export DBML Files to PNG" or "Bulk Export DBML Files to SVG"

Future Configuration Options

• Performance optimization toggles
• Advanced layout algorithm options

Development & Contributing

Want to contribute? Check out our Contributing Guide for detailed setup instructions, coding guidelines, and development workflow.

Quick Development Setup:

git clone https://github.com/kykurniawan/vscode-dbml-previewer.git
cd vscode-dbml-previewer
npm install && npm run build

Architecture: React + React Flow + DBML Core + Dagre Layout

Contributing

Love this extension? Help make it even better:

• Report Bugs - Found an issue? Let us know
• Request Features - Have ideas? Share them
• Star the Project - Show your support
• Code Contributions - Check our Contributing Guide

Quick Start: Fork → Branch → Code → Test → Pull Request

Issues and Support

Reporting Issues

If you encounter any problems:

1. Check existing issues on GitHub Issues
2. Create a new issue with:
   • Clear description of the problem
   • Steps to reproduce
   • Sample DBML file (if applicable)
   • VS Code version and OS information

Getting Help

• Check our documentation
• Join discussions in GitHub Issues
• Contact us at contact.rizkykurniawan@gmail.com

System Requirements

• VS Code: 1.102.0+
• File Format: .dbml files (DBML v2 syntax)
• Zero Setup: No additional dependencies required

License

This project is licensed under the MIT License - see the LICENSE file for details.

Special Thanks

Built with amazing open source tools:

• DBML Community - Database Markup Language specification
• React Flow - Interactive diagram library
• VS Code API - Robust extension platform

Why Developers Love It

• Zero Configuration - Works instantly with any DBML file
• Lightning Fast - Optimized for performance and responsiveness
• Professional Quality - Production-ready with enterprise features
• Community Driven - Built with real developer feedback