MvcDiagram consists of two main components, a .NET class library running on the server and a client side control implemented in JavaScript.

Server side

The .NET library implements a flow-diagramming object model that lets you define structures such as trees, flowcharts and graphs. The most important classes from the library are Diagram, ShapeNode, TableNode, ContainerNode, SvgNode and DiagramLink. A Diagram instance serves as the container for relational graph data, whose content is accessed through the Nodes and Links collections. Nodes contain DiagramNode instances that represent the nodes (a.k.a. vertices) in a graph or tree, and Links contain DiagramLink instances that represents the links (a.k.a. edges/arcs) between nodes in the graph. Usually a Diagram instance will be a part of a Model class in an MVC application, or will be used as an intermediate object that only maps the model data to the client-side diagram view.

Once the Diagram is populated, it can be rendered as part of an HTML page by calling the DiagramView extension method from the MVC view code.

There are also various export classes you can use on the server to export diagrams to PDF, SVG, Flash, DXF, Visio and WMF formats.

Client side

On the client side, a diagram model is represented by the Diagram JavaScript class, and rendered by the DiagramView control that draws the diagram content on an HTML Canvas. The view also allows users to add new nodes and links to the diagram by drawing them with the mouse. New nodes can also be created via drag-and-drop from the NodeListView control.

Some of the automatic layout features you might know from other MindFusion diagramming controls are implemented on the client side, including Layered, Tree, Spring and Fractal layouts.