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. 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 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.