Skip to main content

Database Schema

Includes support for tables, views, multiple columns types, and column relationships. Easily extensible.
Vanilla JS
React
Angular
Vue
Svelte
Typescript
DRAG NEW:
Table
View
JsPlumb, build diagrams and rich visual UIs fast

The source code for this demo is available on Github.

Vanilla JS
Angular
Vue
React
https://github.com/jsplumb-demonstrations/schema-builder

If you haven't got a license for JsPlumb, we offer 30 day evaluations.

Start a free trial
Database Schema Builder
What is a database?

A database is an organized collection of structured information, or data, typically stored electronically in a computer system. Databases may be stored on local file systems or hosted on a server. End users and applications interact with a database via a database management system (DBMS).

Databases are classified by the database model that they support. Two of the most popular currently are Relational Databases andNoSQL databases.

What is a relational database?

In a relational database, data is modelled as rows and columns in a series of tables, and queried via a language called SQL. This starter application is a builder for a schema for a relational database: you can add tables, configure their columns, and also configure "views", which are SQL queries that operate on the contents of the database.

What is SQL?

SQL - Structured Query Language - is the language used to query or update a relational database. In this starter app we have the concept of a **view**, which is a prepared SQL statement that the database runs whenever something is updated.

What is a NoSQL database?

There are many types of NoSQL databases, but their characterizing feature is that they do not store data in a tabular fashion.

Further reading

Full documentation on this starter application is available here: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/starter-app-schema-builder

More Demos
See all demos

Flowchart builder application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Flowchart

Gantt chart builder application - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Gantt

Chatbot builder application - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Chatbot

Callflow builder application - JsPlumb - Angular, React, Vue, Svelte diagramming library

Call Flow

Kanban application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Kanban

Network topology diagram builder - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Network Topology

Database schema builder application - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Database Schema

Org Chart application - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Org Chart

Mindmap builder application - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Mindmap

Element grouping demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Nested Groups

Path tracing demonstration - JsPlumb - Angular, React, Vue, Svelte diagramming library

Path Tracing

Hello world demonstration - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Hello World

Image processor application - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Image Processor

Neighbour views dynamic selections demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library

Neighbourhood Views

Active filtering demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Active Filtering

Org chart layout demonstration - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Hierarchy Layout

CAD Drawing tools demonstration - JsPlumb - When you've reached the limit with ReactFlow, we can help!

Connector Editors

Force directed layout demonstration, org chart layout demonstration - JsPlumb, build diagrams and rich visual UIs fast

Layouts

Collapsible hierarchy Italic language family demonstration - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Collapsible Hierarchy

Nested instances desktop example - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

Nested Instances