Git Product home page Git Product logo

finestwork / my-schema-flow Goto Github PK

View Code? Open in Web Editor NEW
27.0 2.0 8.0 5.69 MB

An electron.js application designed to assist you in creating diagrams, especially for MySQL databases. It offers a user-friendly interface that allows you to visualize and comprehend your database structure more easily.

Home Page: https://my-schema-flow-landing-page.vercel.app/

License: GNU General Public License v3.0

JavaScript 0.74% TypeScript 41.54% HTML 0.10% Vue 55.96% CSS 1.66%
electronjs tailwindcss vuejs diagram-editor erdiagram

my-schema-flow's Introduction

banner.png

Heads-up

Kindly be informed that the application is currently in its development phase. While I strive to implement all features, there may be instances where some functionalities might not perform as expected. I highly value your participation and invite you to experiment with it, sharing any insights or suggestions that could help in refining this app. Please note that the application has been tested on Windows 11, however, considering its nature as an Electron app, it is expected to function on macOS and Linux platforms as well.

Powered by:

Special thanks to:

Get Started

Make sure that you run the code below first before anything else:

$ npm install

Development

$ npm run dev

Build

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux

Contributing

Please refer to the contribution guide

my-schema-flow's People

Contributors

bril3d avatar definitelynotanassassin avatar finestwork avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

my-schema-flow's Issues

Video Demonstration

Video Demonstration of the following

  1. How to Install
  2. Functionalities and Features
  3. How to contribute

[Feat]: Add UNIQUE constraint

Hey thereee! MySchemaFlow needs your help. A form for adding a UNIQUE constraint is currently not implemented. The primary key is automatically configured for uniqueness by default, there are situations where a column, such as an email column, should also be unique. For more details on unique constraints, please visit this awesome website. Happy coding ~

[FEAT]: Add Feature to Export Diagrams as Text

Mabuhay, contributors! 🌟

MySchemaFlow needs your help. Your task is to create a feature where user can export diagrams as textβ€”a SQL Script. As of now, we only have 5 options available for exporting our diagrams. It would be nice if user could also export diagrams as a text, right? πŸ”₯

Happy Coding ~

[FEAT]: Add Index

One feature currently missing in the application is the ability to add indexes to the tables. For more information, please visit this website.

Documentation Request

Documentation Request for:

  1. API / Functions used throughout the system
  2. Installation
  3. Project Contribution for Students

Support for SQLite

Currently only supports MySQL Data Types, there shall be a button to select what type of database is it.

Back Button at Playground

Can we enable the user to go back to the database selection menu, so that they can change the database if they misclicked (instead of fully reloading the application)

Playground UI / UX

Re: Implementation of feature request #17 at PR: #19 the caveats of the implementations are:

  • Lack of Proper Icon
  • Lack of Proper Table format
  • Lack of Dark Mode Support

image
image
image

[FEAT]: Create cardinality

  • Ability to define relationships between entities (one-to-one, one-to-many, many-to-many).
  • Users can specify cardinality (e.g., 1, 0..1, , 0..) for relationships.

Diagram Interactivity

  • Ability to perform CRUD operations on table nodes.
  • Ability to clone table nodes.
  • Ability to establish connections between table nodes.
  • Show active state when a node is dragged, clicked, or when an edge is clicked.
  • Dynamically position the handle of the table node.
  • Highlight the corresponding column relationship when hovering over the edge component.
  • Automatic positioning of nodes.
  • Option to position nodes either from top to bottom or from left to right.

SQL Playground

Utilize the SQL.js library to get the CREATE TABLE statement and create a virtual database in memory for the user test SQL Statements

Import from SQL schema

A good complement would be to be able to import from a SQL schema / dump, the same way one can export to SQL.
It could help bootstraping the creation of a schema, or just visualize an existing database.

[BUG]: Issues with Foreign Key Constraints and Dump from PhpMyAdmin

Works well one the DDL is cleaned up, but with a fresh dump from PhpMyAdmin, I encountered a couple bugs.
I don't know if you'd rather me open a couple new issues on this repo, but I'll summarize them here.
For each test, you can create a .sql file containing the SQL dumps snippets below :

  • When a contraint is named after the foreign key, the relation is not created (here "second_first_id_foreign")
# -- test-fail1.sql - Constraint named after foreign key: Relation not created
CREATE TABLE `first` (`id` bigint(20) UNSIGNED NOT NULL, `label` varchar(255) DEFAULT NULL);
CREATE TABLE `second` (`id` bigint(20) UNSIGNED NOT NULL, `first_id` bigint(20) DEFAULT NULL, `label` varchar(255) DEFAULT NULL);
ALTER TABLE `first` ADD PRIMARY KEY (`id`);
ALTER TABLE `second` ADD PRIMARY KEY (`id`), ADD KEY `second_first_id_foreign` (`first_id`);
ALTER TABLE `second` ADD CONSTRAINT `second_first_id_foreign` FOREIGN KEY (`first_id`) REFERENCES `first` (`id`) ON DELETE CASCADE ON UPDATE NO ACTION;
  • When the constraint doesn't have any action, or is missing the update action, an error is thrown.
# -- test-fail2.sql - Missing OnUpdate action : Error -> TypeError: Cannot read properties of undefined (reading 'action')
CREATE TABLE `first` (`id` bigint(20) UNSIGNED NOT NULL, `label` varchar(255) DEFAULT NULL);
CREATE TABLE `second` (`id` bigint(20) UNSIGNED NOT NULL, `first_id` bigint(20) DEFAULT NULL, `label` varchar(255) DEFAULT NULL);
ALTER TABLE `first` ADD PRIMARY KEY (`id`);
ALTER TABLE `second` ADD PRIMARY KEY (`id`), ADD KEY `second_first_id_foreign` (`first_id`);
ALTER TABLE `second` ADD CONSTRAINT `second_ibfk_17f1cf36` FOREIGN KEY (`first_id`) REFERENCES `first` (`id`) ON DELETE CASCADE;

For this one, it comes from src/renderer/src/utilities/ImportHelper.ts:113 :

constraints: {
    onDelete: fk.reference.on[0].action.toUpperCase(),
    onUpdate: fk.reference.on[1].action.toUpperCase(), /* <~~ action is undefined if the "ON UPDATE" clause is missing */
},

Here's a valid version of the above

# -- test-valid.sql - Valid
CREATE TABLE `first` (`id` bigint(20) UNSIGNED NOT NULL, `label` varchar(255) DEFAULT NULL);
CREATE TABLE `second` (`id` bigint(20) UNSIGNED NOT NULL, `first_id` bigint(20) DEFAULT NULL, `label` varchar(255) DEFAULT NULL);
ALTER TABLE `first` ADD PRIMARY KEY (`id`);
ALTER TABLE `second` ADD PRIMARY KEY (`id`), ADD KEY `second_first_id_foreign` (`first_id`);
ALTER TABLE `second` ADD CONSTRAINT `second_ibfk_17f1cf36` FOREIGN KEY (`first_id`) REFERENCES `first` (`id`) ON DELETE CASCADE ON UPDATE NO ACTION;

Originally posted by @7ute in #7 (comment)

[FEAT]: Implement Auto-Updater

Hello contributors!πŸ‘‹ MySchemaFlow currently does not have an auto-updater in place and it's important to provide our users with a seamless way to receive updates and bug fixes. This issue is created to track the implementation of an auto-updater for our application.

add mssql

I want add mssql database or .bak to import my database

Foreign Key Constraints (ON DELETE)

For foreign key, kindly add another row (that will only be shown if FK is selected as option) that will be specified ON DELETE and ON UPDATE constraints of the FK,

Refer to the MySQL specification below:

[CONSTRAINT [symbol]] FOREIGN KEY
    [index_name] (col_name, ...)
    REFERENCES tbl_name (col_name,...)
    [ON DELETE reference_option]
    [ON UPDATE reference_option]

reference_option:
    RESTRICT | CASCADE | SET NULL | NO ACTION | SET DEFAULT

[FEAT]: Add Feature to Import Diagrams from Text

Mabuhay, contributors! 🌟

As of now, there are two ways to:
image

MySchemaFlow needs your help. Your task is to create a feature where user can generate diagrams from textβ€”a SQL Script. Like the example below:

image

Enjoy coding ~

[FEAT]: Limit the Viewport Movement

Mabuhay, contributors! 🌟

MySchemaFlow needs your assitance. Your task is to create a feature where user can enable a setting to restrict the viewport's movement. You can use this translateExtent property to set a boundary.

Tip:

  • Calculate the total width and left position of each node
  • Calculate the total height and top position of each node
  • This will provide you with an idea of the minimum and maximum values for the translateExtent property.
  • You can use Math.min and Math.max.

Happy Coding ~

Logo

Heyaaaa! I am currently for someone who can help me create a logo for MySchemaFlow app. Please contact me on discord and i'll share the details with you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.