How to Set a Read-Only Mode in JavaScript Diagram?

Setting a diagram to read-only mode in Syncfusion® JavaScript Diagram is useful in scenarios where you need to display information without allowing users to modify its contents. For example, this could be useful for presenting static data, or in cases where the diagram serves a reference or visualization purpose but should not be altered by the user.

To make a diagram read-only, you need to set the constraints property to DiagramConstraints.None. This disables all user interactions such as dragging, resizing, or modifying nodes and connectors in the diagram.

// Initialize Diagram component
var diagram = new ej.diagrams.Diagram(
 {
   width: '100%',
   height: '800px',
   nodes: node,
   // Constraints to enable read-only diagram
   constraints: ej.diagrams.DiagramConstraints.None
 },
 '#element'
);

You can find a working example of this implementation on StackBlitz in the provided link: Click here for sample

Conclusion

I hope you enjoyed learning how to set read-only mode in JavaScript Diagram.
You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!