Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>ERD EditorNew to Visual Studio Code? Get it now.

ERD Editor

dineug

|
39,486 installs
| (20) | Free
ERD Editor vscode extension
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

vuerd-vscode

vuerd Entity-Relationship Diagram Editor vscode extension

VS Marketplace install VS Marketplace download VS Marketplace rating-star
npm version VS Marketplace version APM
GitHub PRs CI

ERD

vuerd

Usage

Webview API

  1. Create [any_filename].vuerd.json

  2. Open the file and click the Vuerd icon in the upper right corner of the Editor window or right click on file -> Open editor

    Image
    Image

Custom Editor API

  1. Create [any_filename].vuerd

Using Liquibase

  1. Create [any_filename].vuerd.json in the same folder as Liquibase changelog with name changelog.xml
  2. Open Vuerd and changelog.xml will be automatically loaded
  3. When exporting, set changelog id to the save location (if the location has changelog that was previously imported, Vuerd will try to add the changes to that file)

Theme settings.json

Synchronize the current vscode theme

{
  "dineug.vuerd-vscode.themeSync": true,
  // will NOT synchronize the color list
  "dineug.vuerd-vscode.theme": {
    "keyPK": "#B4B400",
    "keyFK": "#dda8b1",
    "keyPFK": "#60b9c4",
    "edit": "#ffc107"
  }
}

Example settings.json configuration for a light themed editor

{
  "dineug.vuerd-vscode.themeSync": false,
  "dineug.vuerd-vscode.theme": {
    "canvas": "#d7d7d7",
    "table": "#e6e6e6",
    "tableActive": "#ebb692",
    "focus": "#ff5600",
    "keyPK": "#B4B400",
    "keyFK": "#dda8b1",
    "keyPFK": "#60b9c4",
    "font": "#5d5d5d",
    "fontActive": "black",
    "fontPlaceholder": "#929292",
    "contextmenu": "#e6e6e6",
    "contextmenuActive": "#c7c2be",
    "edit": "#003ef8",
    "columnSelect": "#dcd5d0",
    "columnActive": "#c8d6f7",
    "minimapShadow": "#5d5d5d",
    "scrollbarThumb": "#929292",
    "scrollbarThumbActive": "#5d5d5d",
    "menubar": "white",
    "visualization": "#d7d7d7"
  }
}

Keymap settings.json

{
  "dineug.vuerd-vscode.keymap": {
    "find": [
      {
        "altKey": true,
        "key": "F"
      }
    ],
    "selectAllColumn": [] // remove keymap
  }
}

Document

  • Playground
  • Import SQL DDL support syntax

Editor Keymap(default)

Name Keymap
Editing - ERD dblclick, Enter
Editing - Grid dblclick, Enter
All Stop Escape
Search - find, filter Ctrl + F, Cmd + F
Undo - ERD Ctrl + Z, Cmd + Z
Redo - ERD Ctrl + Shift + Z, Cmd + Shift + Z
Selection - table, memo Ctrl + Drag, Click, Ctrl + Click, Ctrl + Alt + A, Cmd + Drag, Cmd + Click, Cmd + Alt + A
Selection - column, filter Click, Ctrl + Click, Cmd + Click, Shift + Click, Shift + Arrow key(up, down), Alt + A
Movement - table, memo, column, filter Drag, Ctrl + Drag, Cmd + Drag
Copy - column Ctrl + C, Cmd + C
Paste - column Ctrl + V, Cmd + V
Contextmenu - ERD, Table, Relationship, SQL, GeneratorCode Right-click
Table Properties Ctrl + Space, Alt + Space
New Table Alt + N
New Memo Alt + M
New - column, filter Alt + Enter
Delete - table, memo Ctrl + Delete, Ctrl + Backspace, Cmd + Delete, Cmd + Backspace
Delete - column, filter Alt + Delete, Alt + Backspace
Select Hint - dataType, find Arrow key(right), Click
Move Hint - dataType, find Arrow key(up, down)
Primary Key Alt + K
checkbox - Grid, filter Space, Click
Move checkbox - Grid, filter Arrow key(up, down, left, right)
Relationship - Zero One Ctrl + Alt + 1, Cmd + Alt + 1
Relationship - Zero N Ctrl + Alt + 2, Cmd + Alt + 2
Relationship - One Only Ctrl + Alt + 3, Cmd + Alt + 3
Relationship - One N Ctrl + Alt + 4, Cmd + Alt + 4
Zoom In - ERD Ctrl + Equal, Cmd + Equal
Zoom Out - ERD Ctrl + Minus, Cmd + Minus
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2022 Microsoft