Visual UML Diagrams

A visual breakdown of the Qt/QML Network Diagram Editor's architecture.

1. C++ Backend - Class Diagram

This diagram shows the core C++ classes that manage the application's data and logic. The `DiagramController` holds a list of `NetworkElement` objects, forming the central data model.

DiagramController - m_elements: QList<NetworkElement*> - m_connections: QList<ConnectionData> + addElement(...) + moveElement(...) + addConnection(...) + getElement(...) + data(), rowCount() NetworkElement - m_name: QString - m_type: QString - m_position: QPointF + name(), type() + x(), y() *

2. QML Frontend - Component Diagram

This diagram illustrates how the QML components are structured. The `DiagramView` is the main container that dynamically creates `NetworkItem` and `Connection` components based on the C++ model.

DiagramView.qml Repeater (for items) Repeater (for connections) NetworkItem.qml Connection.qml DiagramController <<creates>> <<creates>> <<uses>>

3. System Interaction - Sequence Diagram

This diagram details the sequence of events when a user drags a network item, showing the flow of signals and function calls from the QML frontend to the C++ backend and back.

User NetworkItem.qml DiagramView.qml DiagramController 1. drag() 2. positionUpdated() [signal] 3. moveElement() 4. dataChanged() [signal] 5. (properties updated)