Example of Network Diagram in Angular Diagram Component

This sample visualizes building diagrams interactively and editing the saved diagrams. Symbol Palette is used to easily build diagrams.

Control NetEthernetDevice NetServerWork StationModemModem1Remote ControllerModem4Modem2Modem3Remote Work StaionsPortable Work StaionsControl LogicControl LogicAnalog IOSensorDriverADriverBDriverCHMI
Description

This example shows how to drag-and-drop shapes and connectors from symbol palette to build diagrams. You can save the diagram as text files and edit the pre-saved diagrams. The saveDiagram method can be used to save the diagram as string. The loadDiagram method can be used to load the diagram from a string. In this example, context menu and undo/redo features are enabled.

Injecting Module

The diagram component’s features are segregated into individual feature-wise modules. To enable undo/redo support, inject UndoRedo module into @NgModule.providers section. To enable context menu, inject DiagramContextMenu module into @NgModule.providers section.