vuerd

ERD Editor

ERD

Generator SQL DDL

Generator Code

Visualization

SQL DDL Import

Document

Storybook
Live Demo
Live Demo Sample
Real-time simultaneous editing sample
Import SQL DDL support syntax
vscode extension
atom extension

Dependency

ES6
Proxy - Observable
custom elements - Web Standard Interface
shadow DOM - CSS encapsulation
Node.getRootNode() - Instance EditorContext Injection
CSS variables - Custom Theme

interface ERDEditorElement

interface ERDEditorElement extends HTMLElement {
  width: number;
  height: number;
  value: string;
  automaticLayout: boolean;
  focus(): void;
  blur(): void;
  initLoadJson(json: string): void;
  loadSQLDDL(sql: string): void;
  clear(): void;
  setTheme(theme: Theme): void;
  setKeymap(keymap: Keymap): void;
  setUser(user: User): void;
  sharePull(effect: (commands: Array<Command<CommandType>>) => void): void;
  sharePush(commands: Array<Command<CommandType>>): void;
  getSQLDDL(database?: Database): string;
}

Name	Type	Describe
width	Number	width
height	Number	height
value	String	editor data
automaticLayout	Boolean	automatic layout
change	Event	editor data
focus	Function	focus
blur	Function	blur
initLoadJson	Function	Do not record and save undo
loadSQLDDL	Function	import SQL DDL
clear	Function	editor data clear
setTheme	Function	custom theme
setKeymap	Function	custom keymap
setUser	Function	share user name
sharePull	Function	share pull
sharePush	Function	share push
getSQLDDL	Function	SQL DDL(MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, SQLite)

EditorElement Example

javascript

const container = document.querySelector("#app");
const editor = document.createElement("erd-editor");
container.appendChild(editor);

// editor data load
editor.initLoadJson("editor data...");
// or
// editor.value = "editor data...";

editor.addEventListener("change", (event) => {
  console.log(event.target.value);
});

// layout
window.addEventListener("resize", () => {
  editor.width = window.innerWidth;
  editor.height = window.innerHeight;
});
window.dispatchEvent(new Event("resize"));
// or
// editor.automaticLayout = true;

html

<erd-editor width="800" height="800"></erd-editor>
<!-- or -->
<!-- <erd-editor automatic-layout></erd-editor> -->

interface Custom Theme

interface Theme {
  canvas?: string;
  table?: string;
  tableActive?: string;
  focus?: string;
  keyPK?: string;
  keyFK?: string;
  keyPFK?: string;
  font?: string;
  fontActive?: string;
  fontPlaceholder?: string;
  contextmenu?: string;
  contextmenuActive?: string;
  edit?: string;
  columnSelect?: string;
  columnActive?: string;
  minimapShadow?: string;
  scrollBarThumb?: string;
  scrollBarThumbActive?: string;
  menubar?: string;
  visualization?: string;
}

Custom Theme Example

css

:root {
  --vuerd-theme-canvas: #282828;
  --vuerd-theme-table: #191919;
  --vuerd-theme-table-active: #14496d;
  --vuerd-theme-focus: #00a9ff;
  --vuerd-theme-key-pk: #b4b400;
  --vuerd-theme-key-fk: #dda8b1;
  --vuerd-theme-key-pfk: #60b9c4;
  --vuerd-theme-font: #a2a2a2;
  --vuerd-theme-font-active: white;
  --vuerd-theme-font-placeholder: #6d6d6d;
  --vuerd-theme-contextmenu: #191919;
  --vuerd-theme-contextmenu-active: #383d41;
  --vuerd-theme-edit: #ffc107;
  --vuerd-theme-column-select: #232a2f;
  --vuerd-theme-column-active: #372908;
  --vuerd-theme-minimap-shadow: black;
  --vuerd-theme-scrollbar-thumb: #6d6d6d;
  --vuerd-theme-scrollbar-thumb-active: #a2a2a2;
  --vuerd-theme-menubar: black;
  --vuerd-theme-visualization: #191919;
}

javascript

const editor = document.createElement("erd-editor");
editor.setTheme({
  canvas: "#282828",
  table: "#191919",
  tableActive: "#14496d",
  focus: "#00a9ff",
  keyPK: "#B4B400",
  keyFK: "#dda8b1",
  keyPFK: "#60b9c4",
  font: "#a2a2a2",
  fontActive: "white",
  fontPlaceholder: "#6D6D6D",
  contextmenu: "#191919",
  contextmenuActive: "#383d41",
  edit: "#ffc107",
  columnSelect: "#232a2f",
  columnActive: "#372908",
  minimapShadow: "black",
  scrollBarThumb: "#6D6D6D",
  scrollBarThumbActive: "#a2a2a2",
  menubar: "black",
  visualization: "#191919",
});

interface Custom Keymap

Name	Type	Describe
key	event.key or event.code	Key, Code

interface KeymapOption {
  metaKey: boolean;
  ctrlKey: boolean;
  altKey: boolean;
  shiftKey: boolean;
  key?: string;
}
interface Keymap {
  edit?: KeymapOption[];
  stop?: KeymapOption[];
  find?: KeymapOption[];
  undo?: KeymapOption[];
  redo?: KeymapOption[];
  addTable?: KeymapOption[];
  addColumn?: KeymapOption[];
  addMemo?: KeymapOption[];
  removeTable?: KeymapOption[];
  removeColumn?: KeymapOption[];
  primaryKey?: KeymapOption[];
  selectAllTable?: KeymapOption[];
  selectAllColumn?: KeymapOption[];
  copyColumn?: KeymapOption[];
  pasteColumn?: KeymapOption[];
  relationshipZeroOneN?: KeymapOption[];
  relationshipZeroOne?: KeymapOption[];
  relationshipZeroN?: KeymapOption[];
  relationshipOneOnly?: KeymapOption[];
  relationshipOneN?: KeymapOption[];
  relationshipOne?: KeymapOption[];
  relationshipN?: KeymapOption[];
  tableProperties?: KeymapOption[];
}

Custom Keymap Example

const editor = document.createElement("erd-editor");
editor.setKeymap({
  addTable: [
    {
      metaKey: false,
      ctrlKey: false,
      altKey: true,
      shiftKey: false,
      key: "N",
    },
  ],
  addColumn: [
    {
      metaKey: false,
      ctrlKey: false,
      altKey: true,
      shiftKey: false,
      key: "Enter",
    },
  ],
  addMemo: [], // remove keymap
});

Install

$ yarn add vuerd
or
$ npm install vuerd

Usage

import "vuerd";
// import "vuerd/theme/abyss.css";
// import "vuerd/theme/kimbie-dark.css";
// import "vuerd/theme/monokai.css";
// import "vuerd/theme/monokai-dimmed.css";
// import "vuerd/theme/one-dark-pro.css";
// import "vuerd/theme/red.css";
// import "vuerd/theme/solarized-dark.css";
// import "vuerd/theme/solarized-light.css";
// import "vuerd/theme/tomorrow-night-blue.css";
// import "vuerd/theme/vscode-dark.css";

const container = document.querySelector("#app");
const editor = document.createElement("erd-editor");
container.appendChild(editor);

CDN Quick Start

<!DOCTYPE html>
<html>
  <head>
    <title>vuerd demo</title>
    <style>
      body {
        margin: 0;
      }
    </style>
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/abyss.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/kimbie-dark.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/monokai.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/monokai-dimmed.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/one-dark-pro.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/red.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/solarized-dark.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/solarized-light.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/tomorrow-night-blue.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/vscode-dark.css" rel="stylesheet" /> -->
  </head>
  <body>
    <erd-editor></erd-editor>
    <script src="https://cdn.jsdelivr.net/npm/vuerd/dist/vuerd.min.js"></script>
    <!-- or module -->
    <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/vuerd/dist/vuerd.esm.js"></script> -->
    <script>
      const editor = document.querySelector("erd-editor");
      window.addEventListener("resize", () => {
        editor.width = window.innerWidth;
        editor.height = window.innerHeight;
      });
      window.dispatchEvent(new Event("resize"));
    </script>
  </body>
</html>

Editor Keymap(default)

Name	Keymap
Editing - ERD	dblclick, Enter
Editing - Grid	dblclick, Enter
All Stop	Escape
Search - find, filter	Alt + F, Ctrl + Alt + 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
Delete - column, filter	Alt + Delete
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 N	Ctrl + Alt + 1, Cmd + Alt + 1
Relationship - Zero One	Ctrl + Alt + 2, Cmd + Alt + 2
Relationship - Zero N	Ctrl + Alt + 3, Cmd + Alt + 3
Relationship - One Only	Ctrl + Alt + 4, Cmd + Alt + 4
Relationship - One N	Ctrl + Alt + 5, Cmd + Alt + 5
Relationship - One	Ctrl + Alt + 6, Cmd + Alt + 6
Relationship - N	Ctrl + Alt + 7, Cmd + Alt + 7

License

MIT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

vuerd

ERD

Generator SQL DDL

Generator Code

Visualization

SQL DDL Import

Document

Dependency

interface ERDEditorElement

EditorElement Example

javascript

html

interface Custom Theme

Custom Theme Example

css

javascript

interface Custom Keymap

Custom Keymap Example

Install

Usage

CDN Quick Start

Editor Keymap(default)

License

Files

README.md

Latest commit

History

README.md

File metadata and controls

vuerd

ERD

Generator SQL DDL

Generator Code

Visualization

SQL DDL Import

Document

Dependency

interface ERDEditorElement

EditorElement Example

javascript

html

interface Custom Theme

Custom Theme Example

css

javascript

interface Custom Keymap

Custom Keymap Example

Install

Usage

CDN Quick Start

Editor Keymap(default)

License