Simple ER Diagram with Qt & QML

Please download the Source Code of the application to continue further

In this blog, I am going to briefly write the steps to generate a basic ER diagram using Qt & QML. You can use the same logic to create your own ER diagram.

Objectives

1. Generate the rectangle entities dynamically and connect the last created rectangle to the previous rectangle.

2. On deleting a rectangle, delete all its child rectangle entities and relations

3. On dragging a rectangle, the coordinates of front and back connecting lines should be updated

Steps to achieve the objectives

We will create 3 separate subcomponents for a RectangleEntity, LineEntity, and a DeleteEntity which will be called dynamically whenever a new entity creation command is applied. Apart from that, a Button component is called to fire the entity creation signal from the main file

1. To create a new entity dynamically, we need to use Qt.createComponent() and createObject().

2. Save the dynamically generated component instances inside separate Map() to be accessed later

3. Lines can be created using QtQuick.Shapes (canvas is not required). Bind one ends of a connecting line to the front and back coordinates of two nearby rectangles so that whenever a rectangle is moved, the coordinates of the line are updated as well.

4. Bind the coordinates of the delete button to the left top of each rectangle

5. To move a rectangle, use drag.target: entityRectangle inside the MouseArea

6. Lastly, when a rectangle entity coordinates are updated, fire a signal to update the new location of the rectangle using QML signals and slots