erd-editor

erd-editor Entity-Relationship Diagram Editor vscode extension

ERD

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

   
   

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)