This sample visualizes building diagrams interactively and editing the saved diagrams. Symbol Palette is used to easily build diagrams.
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. TheloadDiagram
method can be used to load the diagram from a string.The loaded
event is triggered once the diagram has completely loaded, and the first node in the diagram has been selected during the event call. 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 services
. To enable
context menu, inject DiagramContextMenu
module into{" "}
services
.
The uploader API control is used to load the JSON data into a diagram asynchronously. Define the properties
saveUrl
, which will receive the uploaded files and save them on the server, and removeUrl
,
which will receive the file information and handle the removal of files from the server.