dineug / erd-editor Goto Github PK

Hello! Сan you please tell me how to use automatic layout when loading data using loadsqlddl()?
If I use editor.current.automaticLayout = true, then all tables are lined up and the links are visually confused.

Maybe I'm just not seeing this feature, but I'm having trouble finding an option to create a multicolumn composite key.
It would be convenient if you were to be able to highlight multiple rows, right click, and create a composite key.

The graphic for this could have a small fork with indicators touching the columns in the key, and a key icon at the end of the stem of the fork.

Thanks for the extension

I did not find enum support

Do you have enum support or plan to add it ?

Thank you?

Project: lit-observable

import { defineComponent, html, observable } from '@dineug/lit-observable';

defineComponent('my-counter', {
  render() {
    const state = observable({ count: 0 });

    const onIncrement = () => {
      state.count++;
    };

    return () => html`
      <button @click=${onIncrement}>Increment</button>
      <span>${state.count}</span>
    `;
  },
});

const myCounter = document.createElement('my-counter');
document.body.appendChild(myCounter);

Hey,
I am having a scenario where multiple users will be editing the same ER diagram. So, I'm working on to update real-time data for those multiple users.

I have tried polling to achieve this and works as I want it to work.

I've found out that you have provided support for Real-time simultaneous editing API, but I couldn't find any detailed documentation about it. Can you provide me a link(or any resource) for the Real-time simultaneous editing API feature?

What is the parameter name for changing the color of the relationship line?
I didn't see it in the Example settings.json configuration for a light themed editor code block.

Thanks!

Is generating Queries (like MS Access) on the roadmap or a possible future feature? For me that would be the Killer application feature ;-)

Hi,
your tool is very nice and helpful but when generating the PostgreSQL DDL text the automatic incrementation of the primary key is missing. The Auto Increment button has no effect on PostgreSQL.

I miss the following expression:

CREATE TABLE public."table"
(
    id integer NOT NULL **GENERATED ALWAYS AS IDENTITY**
);

The delete key currently does not trigger a delete on the table/properties. Will try to issue a PR for this if this just hasn't been implemented.

Thank you for the excellent work. I think this has great potential.

Hi,
Great tool and super fast to use! I miss one small (but showstopping) feature:

When defining foreign keys it should be possible to set ON DELETE and ON UPDATE behavior.

Hello.
Thanks for making this tool.
I've been looking for something like this for a good while and i can't streess enough how it is helping me. 😄

I wanted to report that there's some weird behaviour with the import/export buttons.

Export:

• Uses vscode form, but defaults to my user home. I would suggest that instead. See link, if a project folder is open it should default to the root of that folder or missing that use the base path of the .vuerd file we're editing (or maybe always use this ?).

This is not really a bug per se, but i'm sure the case can be made that it is a better default as in most situations it would point to a path near to where you actually want to save/load things.

Import:

• All import buttons open the webview default file browser, wich would be fine if files were always local.
  But for example if you're using something likes SSHFS or RemoteDEV extension you can't really point the WebView file browser to that file since it doesn't exist on the machine.
  This would need to be done with the vscode form like the export.

Let me know what you think of this, i unfortunately don't have much experience with working with VSCode extension development but if it is easy enough i could help with the pull request.
Thank you again.

TODO

• v2
  • Integrating with reactive system components #181
  • Extension Panel API #182
  • Zoom Level Support #183
• Add options when creating SQL DDL
  • ex) Bracket
• generate template #94
• chrome extension vuerd App - https://vuerd.github.io/
  • ex)

From the UI, can you create a relationship between 2 existing "non-id" columns?

For example, I have a Vehicle table with 2 columns

VehicleID - pk
VIN

And a Sales table with 2 columns

SaleID - pk
VIN

Is it possible to create a relationship between the 2 tables using the VIN column?

Hi,

This tool is really cool and I love using it in VsCode.

This is more of a visual suggestion, it would be nice if there was an option to arrange (or rearrange) the diagram to see all relationships when the database is too big.

Currently, it shows all relationships but it is not posible to understand all the relations at a glance.

First of all, Thank you very much for this great extension, God bless your fingers.

Can you please add support for Code generation for :

• Go

When importing an SQL table containing indexes those are not parsed properly into index properties but are instead left as keys in the table.

To reproduce:

SQL Code:

CREATE TABLE 'users' (
  'id' bigint unsigned NOT NULL AUTO_INCREMENT,
  'name' varchar(30) NOT NULL,
  'email' varchar(30) NOT NULL,
  PRIMARY KEY ('id'),
  UNIQUE KEY 'users_email_unique' ('email'),
  KEY 'user_name_index' ('name')
);

Result:

Additionally the index section of the table properties is not populated.

Hello.

This would be useful when importing separate sql files into the same vuerd view.

On import instead of clearing the vuerd view, it would be usefull to instead append or replace (based on table names) new sql statements into the view.

The old start from scratch behaviour could be preserved by asking the user which one he wants.

I'm trying to use this with React. I was able to set it up like this
https://codesandbox.io/s/vuerd-react-test-uzfld?file=/src/App.js

I see that there are these options to customize styles here
https://vuerd.github.io/vuerd/?path=/docs/example-demo--erd-editor

but I am not able to figure out how to actually use them in the code.

Any help is appreciated. Thanks!

UI Panel Extension Modularization

If you have more features, your library will become too large and you need to be able to choose.

UI Related Issues List

• SQL-Query generator
• Custom generate code

I've implemented all the features I want, so I'm not motivated at the moment.

I don't know when the v2.0.0 task will start.

Maybe I'll work on it after my new pet project.

Currently, we are only going to do small bugs and maintenance.

If you have a feature you want, open the issue.

Hello, how can I remove some of the default navbar options?

I would like to keep only a few.

The following contains a conversion table from SQL Server types to equivalent C# types:
https://docs.microsoft.com/en-us/sql/relational-databases/clr-integration-database-objects-types-net-framework/mapping-clr-parameter-data

Many of these conversions are missing from the generator code, such as uniqueidentifier to Guid and various numeric type conversions. Can this listing be reviewed to determine which (if any) conversions can be added to the generator code?

The suggestions (autocomplete) are awesome and I can move with arrows, but I cannot use only keyboard to fill the values.

Idea: When adding datatype to column, use Tab/Enter to autocomplete

It seems that when selecting MSSQL in the SQL DLL section doesn't seem to add Auto_Increment.

Adding a simple color to the header

the present tippyjs shadow dom interactive issues

It will be reflected when the next version of tippyjs is released.
fix not working interactive option

#198 @Daybayzayd

First I love this extension,
Thanks for adding Zoom Feature

I think it would be nice if I can toggle on/off zoom when scroll
because I think user behavior when scroll was scrolling the media/page

I would like to ask you what you think of some ideas I would like to implement. Some are very easy and same may take longer and may change some functionality of vuerd.

• (Idea) Have option to have diagram read-only so we could somehow show anybody how our GraphQL endpoints look like on live database

• Make working with VSCode extension much easier - add some better communication that can be easily expanded

• [1 of 2] #212

• #213

• #214

COLUMN NUMBER NOT NULL DEFAULT 1 // it's error
COLUMN NUMBER DEFAULT 1 NOT NULL // it's works

when a relationship with a serial field is created, the type cannot remain the same in the related table. It must be another type with int or bigint ...

If you change the type in the destination table, it also changes in the source table. This way it makes the tool non-functional when using relationships and sequences for PostgreSQL

if cant, what should I do to make it can?

IndexedDB does not persist in vscode environment Need to think about how to save information

On the latest version (0.7.15) after exporting to png the picture doesn't contain keys and cuts longer names of tables and columns.

To support all dialects
Develop Loose DDL Parser

sql ddl

create table a (
  id,
  varchar(50),
  ,
  ,
)

to json

{
  "name": "a",
  "columns": [
    {
      "name": "id",
      "dataType": "",
    },
    {
      "name": "",
      "dataType": "varchar(50)",
    }
  ],
}

No strict DDL parser is required.

To write (or share) roadmap to postgres support.

Add alert() support for vscode. It could be done by modifing current showPrompt() to show only message.
Currently alert() doesn't work, because vscode extension automatically blocks it. allow-modals microsoft/vscode #67109

I really liked what I saw in the images here and I was looking at this tool as something where I might be able to script the build of a new ERD for each migration and use those to manually build plans for new migrations.

The issue I'm having is that I can't seem to type anything into the SQL tab If I create a tab from the GUI it will appear with syntax highlighting but if I type the exact same statement its just plain white letters, no syntax highlighting, and it doesn't render anything based on my inputs.

Is this expected behavior? Are we just not there yet in the development of this package?

Hi,
In my case, I'm using this library with LitElement.
Everything works as expected, but I cannot seem to click the menu options (the one that appears after I right-click the canvas).

❗ JS Fiddle for what I tried and the issue.

Whenever I click on any of these menu options, nothing happens:

My understanding

Also, when I used the chunk of code provided from CDN Quickstart in vanilla JS, everything worked as expected. I think there's some issue because of the shadow DOM.

I propose following small improvements for better user experience while adding new columns:

• autofocus on inputs (at least in name of the column) after clicking add column (to avoid double clicking)
• add button near delete button (to simplify mouse movement)
• keyboard shortcut for adding new column

There is still a open point with the crowfoot notation. (see my already resolved issue at (dineug/vuerd-vscode#8))

According Wikipedia there are only four types of cardinalities that an entity may have in a relationship:
ring and dash → minimum zero, maximum one (optional)
dash and dash → minimum one, maximum one (mandatory)
ring and crow's foot → minimum zero, maximum many (optional)
dash and crow's foot → minimum one, maximum many (mandatory)

But vuerd is still showing Cardinality with only one dash and is missing to show the information, if the relationship is mandatory on the other side or not by showing an addional dash or an additional ring.

Example: The relationship iteself is not showing, if a comment must have a blog or not:

Vuerd is a cool tool. But it is very inconvenient to use. drawsql is much easier to use. It might be better to learn from drawsql. This is my personal opinion.

Hope Vuerd became more popular.

Your work is very good, I compared dozens of tools, your work is the most suitable, very friendly to developers and readers.

I have tried trevor's ERD function before. The most attractive point for me is to highlight the relationship. This function is very useful when there are a lot of tables. It is very intuitive. I hope you can use it.

thanks

https://trevor.io/create-an-er-diagram-online/

Hi, first of all, thanks for such a great tool.

When I zoom out the canvas rectangle on which the diagram sits, keeps sliding down. How do I fix its position?

I'm not sure if it's my limited understanding of how MSSQL works, but the SQL DLL section seems to add brackets to the datatype, which gives an error when creating tables with varchar columns, but it seems to handle int just fine.

Hi, can you please point me to the code that calculates the automatic layout of tables?

SQLite supports AUTOINCREMENT only on INTEGER PRIMARY KEY and the syntax is like this:

CREATE TABLE table
(
  TableId INTEGER NOT NULL UNIQUE,
  Name   TEXT    NULL    ,
  PRIMARY KEY (TypeId AUTOINCREMENT)
);

Whereas in vuerd (in VS Code extensions) AUTOINCREMENT can be used on any column and the generated DDL is incorrect (even when used on correct column):

CREATE TABLE table
(
  TableId INTEGER NOT NULL UNIQUE AUTOINCREMENT,
  Name   TEXT    NULL    ,
  PRIMARY KEY (TypeId)
);

See also official documentation at https://sqlite.org/autoinc.html

Great tool!

But on my small screen, only 5 or 6 tables are visible, others are outside the screen.
A zoom feature would be very helpful.

Add a simple button when table is empty (only if table is empty, else it will disappear) to add boilerplate: Id (Integer, with PK and Auto Inc.), Created_at (timestamp), Updated_at (timestamp)

• Random colors to relationships and their keys so user can better see what belongs to what - colors will generate automatically and can be re-generated a another option in context menu

• (Done #219) Also it would be cool to add some colored frame around table that we can color

interface

export interface Panel {
  render(): HTMLElement;
  beforeMount?(): void;
  mounted?(): void;
  unmounted?(): void;
  beforeFirstUpdate?(): void;
  firstUpdated?(): void;
  beforeUpdate?(): void;
  updated?(): void;
}

export interface PanelProps {
  width: number;
  height: number;
}

export interface PanelClass {
  new (props: PanelProps, api: ERDEditorContext): Panel;
}

export interface Icon {
  prefix: string;
  name: string;
  size?: number;
}

export interface PanelConfig {
  type: PanelClass;
  icon: Icon;
  name?: string;
  key: string;
}