VibeBase
Interactive visual editor for DBML database diagrams and Markdown documents in VS Code.
Features
DBML Diagram Editor
- Visual diagram — opens
.dbml files as interactive ERD diagrams by default
- Drag & drop — reposition tables, zoom, pan
- Inline editing — double-click to edit table names, columns, types
- Right-click context menu — show in code, edit relationships, delete
- Crow's foot notation — proper ERD relationship indicators
- Auto layout — topological layering based on foreign key relationships
- Export — SVG, PNG (2x/4x), JSON
- DBML language support — syntax highlighting, autocomplete, hover, go-to-definition
Markdown Editor
- Preview mode — clean, beautiful rendered markdown (default)
- Visual editor — WYSIWYG contenteditable editing with formatting toolbar
- Full spec support — headings, bold/italic, code blocks, tables, blockquotes, lists, task lists, images, links, footnotes, definition lists, emoji, subscript/superscript, abbreviations, custom containers
Unified Design System
- 8 color themes — Dark, Light, Midnight, Nord, Rose Pine, Solarized Dark/Light, High Contrast
- Inherited mode — automatically matches your VS Code theme
- Per-file overrides — each file can use a different theme, saved in metadata
- Sidebar panel — VibeBase Center for quick access to settings and file creation
Settings
All settings available in the sidebar panel and VS Code Settings:
- Global color scheme (inherited from VS Code by default)
- Font family and size
- DBML: show/hide notes, indexes, types
- Background pattern (grid, dots, none)
- Export quality (1x–4x)
Getting Started
- Open any
.dbml file — the diagram editor opens automatically
- Open any
.md file — the preview opens automatically
- Click the VibeBase icon in the activity bar for settings and quick actions
Diagram positions, theme preferences, and viewport state are saved as a special comment at the end of .dbml files:
//[[vibebase.{"positions":{...},"preferences":{...}}]]
This metadata is auto-saved and transparent — no manual management needed.
| |
