Skip to main content
< Back to demo list

Database Schema Builder


The source code for this application - and several others - is available on Github here. If you haven't got a license for the Toolkit, we offer 30 day evaluations.

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.

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:

Fork me on Github
Get a head start with one of our pre-built applications:
Flowchart Builder
Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2/3, React and Svelte versions available.
Database Schema Builder
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2/3 and React versions available.
Chatbot Builder
Use the Toolkit to build a chatbot flow, with actions, messages, input and choices.
Mindmap Builder
Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Path Tracing
Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
Active Filtering
Filter drag targets as your users start to drag new connections using the ActiveFiltering plugin.
Segmented Connectors
An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines
Hierarchy Layout
The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options
Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.