vuerd-iteria-test

vuerd

Entity-Relationship Diagram Editor

ERD

Document

• Playground
• Import SQL DDL support syntax
• vscode extension
• atom extension

interface ERDEditorElement

interface ERDEditorElement extends HTMLElement {
  width: number;
  height: number;
  value: string;
  automaticLayout: boolean;
  readonly: boolean;
  focus(): void;
  blur(): void;
  initLoadJson(json: string): void;
  loadSQLDDL(sql: string): void;
  clear(): void;
  setTheme(theme: Theme): void;
  setKeymap(keymap: Keymap): void;
  getSQLDDL(database?: Database): string;
  extension(config: Partial<ExtensionConfig>): void;
}

Name	Type	Describe
width	Number	width
height	Number	height
value	String	editor data
automaticLayout	Boolean	automatic layout
readonly	Boolean	readonly
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
getSQLDDL	Function	SQL DDL(MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, SQLite)
extension	Function	plugin API(scope instance)

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;
  preventDefault?: boolean;
  stopPropagation?: boolean;
}
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[];
  relationshipZeroOne?: KeymapOption[];
  relationshipZeroN?: KeymapOption[];
  relationshipOneOnly?: KeymapOption[];
  relationshipOneN?: KeymapOption[];
  tableProperties?: KeymapOption[];
  zoomIn?: KeymapOption[];
  zoomOut?: KeymapOption[];
}

Custom Keymap Example

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

Global API

function addIcon(...newIcons: IconDefinition[]): void;
function extension(config: Partial<ExtensionConfig>): void;

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;
        height: 100vh;
      }
    </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	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