Acacia ERD — Interactive Entity Relationship Diagrams for VS Code

Create, visualize, and share Entity Relationship Diagrams (ERDs) in VS Code. Design database schemas with drag-and-drop, auto-discover table relationships, and export interactive HTML diagrams that anyone can explore in a browser.

Key Features

• Interactive ERD Editor — Drag-and-drop entities on a canvas, visualize relationships, and edit in real time
• Interactive HTML Export — Export standalone HTML files that work in any browser with zoom, pan, search, and dark/light themes
• Smart Entity Management — Auto-discover relationships, search and filter entities, manage columns
• Multiple View Modes — Interactive canvas, entity tree (list and card views), describe entity, and ERD generation
• Database Integration — Import schemas from Oracle, PostgreSQL, and MySQL with ready-to-use SQL queries
• SVG & JSON Support — Save diagrams as SVG, load entity definitions from JSON files

Screenshots

Interactive ERD Editor

Interactive HTML Export — Shareable Diagrams

WordPress Database ERD

Discourse Database ERD

Redmine Database ERD

What's New in v2.3.3

Open Diagram — Reliable Entity Loading

• Saved entities always shown — Clicking an ERD diagram in the Assets tree now reliably renders all saved entities with their saved positions, even when the ERD Editor is opened fresh
• No more empty canvas — Fixed a race condition where opening a diagram on a newly created panel could show a blank canvas because entity data hadn't been loaded into the webview yet

Previously in v2.3.2

ERD Diagram Management — Named, Persistent Diagrams

• Diagrams in the Assets tree — Named ERD diagrams appear as children of their Entities List, with entity count badges and double-click to open
• Full CRUD — Add, open, rename, delete, and duplicate diagrams from the Assets tree context menu
• Save & Save As — Save the current canvas state (entity selection + positions) as a named diagram, or create a new one from any ERD
• Entity Sync Detection — When opening a diagram, missing entities are detected and you're warned with options to "Open Anyway", "Remove Missing & Open", or "Cancel"
• Auto-generated storage — Diagrams are stored in a *.diagrams.json file alongside the entities JSON, created automatically on first use
• SVG snapshots — Each save also produces an SVG file alongside the diagram data

Previously in v2.3.1

Dimensions — Categorize & Filter Your Assets

• Dimension Manager — Define custom dimensions (Level, Environment, Schema, etc.) with configurable values, persisted to a JSON file
• Dimension Editor — Full webview panel to create, edit, and delete dimensions and assign them to assets
• Assign Dimensions — Right-click any asset in the Assets tree to tag it with dimension values
• Filter by Dimensions — Multi-step Quick Pick to filter the Assets tree by dimension values; badge shows active filter count
• Inline badges — Dimension values displayed as badges on each asset in the tree

Previously in v2.3.0

Create Entities Lists from UI

• New or Open — The "Choose Entities List" dialog now lets you create a brand-new entities JSON file or browse for an existing one
• Save dialog — Native VS Code save dialog pre-filled with your workspace root and a .json filter

Previously in v2.2.3

Unified Assets Tree & Entities Lists

• Assets sidebar — Single tree view combining Entities Lists, Source Folders, and DB Connections with collapsible sections
• Entities Lists management — Add, remove, rename, and switch between multiple entities JSON files
• Active list indicator — See which entities list is currently loaded with a check icon (✓) and "active" badge
• Entity Tree file indicator — Know which file is loaded directly in the Entity Tree header
• Smart empty state — Contextual guidance when no entities are loaded, with quick "Browse Assets" action

Project Dashboard

• Quick Actions — View Entities and View Assets buttons for fast navigation
• Live Status — Real-time counts for entities, entities lists, source folders, and DB connections

EntityManager Improvements

• File watcher auto-reloads entities on external changes
• Event emitters for reactive UI updates across all views
• Improved path resolution and proper resource disposal

Interactive HTML Export

Export your ERDs as standalone interactive HTML files — share database diagrams with anyone, no VS Code required.

• One-click export to interactive HTML
• Full interactivity: zoom, pan, search, click to explore
• Beautiful light/dark themes, mobile-responsive design
• Perfect for sharing with stakeholders, teams, and documentation

Learn more about Interactive HTML Export

Quick Start

Installation

1. Open VS Code
2. Press Ctrl+P (or Cmd+P on macOS)
3. Type: ext install manacacia.acacia-erd
4. Press Enter

Or search for "Acacia ERD" in the VS Code Extensions marketplace.

First Steps

1. Open the Acacia ERD sidebar — click the ERD icon in the Activity Bar
2. Open the ERD Editor — use the Command Palette (Ctrl+Shift+P) and type Acacia ERD: Open ERD Editor
3. Add entities — generate from a JSON file or drag from the Entity Tree
4. Arrange entities — drag and drop or click "Apply Grid" for automatic layout
5. Save your diagram — Ctrl+S to save as SVG
6. Export as Interactive HTML — click the "Export HTML" button in the toolbar

Usage Guide

Exporting Interactive HTML

Create shareable, interactive diagrams:

1. Open your ERD in the Interactive ERD Editor
2. Click "Export HTML" in the toolbar (green button)
3. Choose a location and save the file
4. Share — recipients open it in any browser

What you get: fully interactive diagram with zoom, pan, search, entity highlighting, dark/light theme toggle, and mobile-responsive design. No installation required to view.

Full Interactive HTML Export guide

Creating an ERD from JSON

1. Prepare your entities JSON file (see format below)
2. Click "Generate ERD from Entities List" in the toolbar
3. Select your JSON file and configure generation parameters
4. Click "Generate ERD"

JSON Format

[
  {
    "id": "user",
    "name": "User",
    "description": "User account information",
    "columns": ["id", "username", "email", "created_at"],
    "linkedEntities": ["Post", "Comment"]
  },
  {
    "id": "post",
    "name": "Post",
    "description": "Blog posts created by users",
    "columns": ["id", "user_id", "title", "content", "published_at"],
    "linkedEntities": ["User", "Comment", "Category"]
  }
]

Keyboard Shortcuts

ERD Editor

• Ctrl+S / Cmd+S — Save ERD as SVG
• Ctrl+Shift+S / Cmd+Shift+S — Save As new SVG file
• Ctrl+F / Cmd+F — Focus search (in Entity Tree)

Interactive HTML Export (in browser)

• + / = — Zoom in
• - — Zoom out
• 0 — Reset view
• F — Fit to screen
• T — Toggle theme
• / — Focus search
• Esc — Clear search

Entity Tree

• Double-click entity — Open entity details
• Right-click entity — Show context menu

Entity Tree Views

• List View — Compact list showing entity names and metadata
• Card View — Expanded cards with descriptions and statistics

Context Menu Options

• Open Details — View/edit entity properties
• Describe Entity — See detailed column information
• Delete Entity — Remove entity from diagram

Configuration

Configure the extension in VS Code settings:

{
  "acacia-erd.entitiesJsonPath": "resources/entities.json",
  "acacia-erd.entitiesLists": [
    { "name": "Main Schema", "jsonPath": "resources/entities.json" },
    { "name": "Auth Module", "jsonPath": "resources/auth_entities.json" }
  ],
  "acacia-erd.sourceFolders": [
    { "name": "App Source", "path": "src" },
    { "name": "Migrations", "path": "db/migrate" }
  ],
  "acacia-erd.dbConnections": [
    { "name": "Dev DB", "connectionPath": "sqlite:///data/dev.db" },
    { "name": "Test DB", "connectionPath": "localhost:5432/testdb" }
  ],
  "acacia-erd.dimensionsFilePath": "acacia-erd.dimensions.json"
}

Database Integration

Import your existing database schema into Acacia ERD using SQL queries for Oracle, PostgreSQL, and MySQL.

Oracle

SELECT JSON_ARRAYAGG(
    JSON_OBJECT(
        'id' VALUE LOWER(table_name),
        'name' VALUE LOWER(table_name),
        'description' VALUE NULL,
        'columns' VALUE (
            SELECT JSON_ARRAYAGG(LOWER(column_name) ORDER BY column_id)
            FROM all_tab_columns t1
            WHERE t1.owner = t.owner AND t1.table_name = t.table_name
        ),
        'linkedEntities' VALUE (
            SELECT JSON_ARRAYAGG(DISTINCT LOWER(r.table_name))
            FROM all_constraints c
            JOIN all_cons_columns cc ON c.constraint_name = cc.constraint_name 
                AND c.owner = cc.owner
            JOIN all_constraints r ON c.r_constraint_name = r.constraint_name 
                AND c.r_owner = r.owner
            WHERE c.owner = t.owner 
                AND c.table_name = t.table_name 
                AND c.constraint_type = 'R'
        )
    )
) AS entities
FROM all_tables t
WHERE owner = 'YOUR_SCHEMA_NAME'
ORDER BY table_name;

PostgreSQL

SELECT json_agg(
    json_build_object(
        'id', table_name,
        'name', table_name,
        'columns', (
            SELECT json_agg(column_name)
            FROM information_schema.columns c
            WHERE c.table_schema = t.table_schema 
                AND c.table_name = t.table_name
        )
    )
)
FROM information_schema.tables t
WHERE table_schema = 'public'
    AND table_type = 'BASE TABLE';

MySQL

SELECT JSON_ARRAYAGG(
    JSON_OBJECT(
        'id', table_name,
        'name', table_name,
        'columns', (
            SELECT JSON_ARRAYAGG(column_name)
            FROM information_schema.columns c
            WHERE c.table_schema = t.table_schema 
                AND c.table_name = t.table_name
        )
    )
)
FROM information_schema.tables t
WHERE table_schema = 'your_database';

Use Cases

• Database Design — Plan and visualize database schemas
• Documentation — Create interactive diagrams for technical documentation
• Team Collaboration — Share diagrams that anyone can explore in their browser
• Client Presentations — Present interactive ERDs without requiring VS Code
• Migration Planning — Understand relationships before schema changes
• Training Materials — Create self-explanatory database documentation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This extension is licensed under the MIT License.

Issues & Feature Requests

Found a bug or have a feature request? Please open an issue on GitHub.

Additional Resources

• Wiki Documentation
• GitHub Repository

Show Your Support

If you find this extension helpful, please consider:

• Starring the GitHub repository
• Writing a review on the VS Code Marketplace
• Sharing with your developer community

Made with care by AcaciaMan