dineug / erd-editor Goto Github PK
View Code? Open in Web Editor NEWEntity-Relationship Diagram Editor
Home Page: https://erd-editor.io
License: MIT License
Entity-Relationship Diagram Editor
Home Page: https://erd-editor.io
License: MIT License
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?
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
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
To write (or share) roadmap to postgres support.
To support all dialects
Develop Loose DDL Parser
create table a (
id,
varchar(50),
,
,
)
{
"name": "a",
"columns": [
{
"name": "id",
"dataType": "",
},
{
"name": "",
"dataType": "varchar(50)",
}
],
}
No strict DDL parser is required.
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?
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,
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).
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.
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!
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.
If you have more features, your library will become too large and you need to be able to choose.
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.
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.
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);
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**
);
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
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?
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
Hello, how can I remove some of the default navbar options?
I would like to keep only a few.
Is generating Queries (like MS Access) on the roadmap or a possible future feature? For me that would be the Killer application feature ;-)
First of all, Thank you very much for this great extension, God bless your fingers.
Can you please add support for Code generation for :
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.
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:
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:
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.
Thanks for the extension
I did not find enum support
Do you have enum support or plan to add it ?
Thank you?
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?
It seems that when selecting MSSQL in the SQL DLL section doesn't seem to add Auto_Increment.
COLUMN NUMBER NOT NULL DEFAULT 1 // it's error
COLUMN NUMBER DEFAULT 1 NOT NULL // it's works
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.
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?
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.
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
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.
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.
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.
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
IndexedDB does not persist in vscode environment Need to think about how to save information
Hi, can you please point me to the code that calculates the automatic layout of tables?
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.
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!
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:
if cant, what should I do to make it can?
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.
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;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.