With the library loaded and a view established on your page, you can now start working with the core JavaScript objects that define your diagram's structure and content.

This section introduces the two most important classes:

• Diagram: The data model that contains all your nodes, links, and their relationships.
• DiagramView: The visual component that renders the Diagram model onto the canvas and handles user interactions.

You will learn how to create a diagram instance and populate it with items, both programmatically and through direct user interaction.

Creating and displaying a Diagram

The Diagram is a model class, while rendering and interactions are handled by the DiagramView control. The Diagram instance can be created first and passed to the view as a second argument of the DiagramView.create method, or if not provided, an empty Diagram will be created and will be accessible through the view's diagram property.

JavaScript  Copy Code
var diagram = new Diagramming.Diagram(); var diagramView = Diagramming.DiagramView.create(     document.getElementById("diagram"), diagram); var diagramView = Diagramming.DiagramView.create(     document.getElementById("diagram")); var diagram = diagramView.diagram;

Add items from code

You can create diagram items programmatically by calling methods of the diagram's Factory object. Alternatively, create an instance of any class derived from DiagramItem by calling its constructor, and call addItem to add it to the diagram:

JavaScript  Copy Code
var node1 = diagram.factory.createShapeNode(0, 0, 10, 10); var node2 = new Diagramming.ShapeNode(diagram); node2.bounds = new Drawing.Rect(20, 0, 10, 10); diagram.addItem(node2);

Draw items interactively

The DiagramView can respond in various way to user input depending on the value of its behavior property. By default, it creates a ShapeNode when the user starts drawing from unoccupied location, or a DiagramLink when the mouse pointer is over a node. See the Behavior enumeration for other supported modes.

Further reading

Browse the topics under Programming Interface Overview for conceptual information. See the tutorial topics and check the sample scripts provided with JsDiagram.zip distribution for sample source code. For integrating the diagram with popular front-end libraries and frameworks, see React, Vue.js and Angular topics.