This sample shows how node's adjustment handles can be styled through the DiagramNode.HandlesStyle property. You can choose between the built-in styles or use custom drawing and custom hit-testing to achieve the desired look and feel.
This sample shows how to define custom anchor patterns and assign them to diagram nodes. There are also several predefined anchor patterns to choose from. Link several nodes to get an idea how anchor points work.
This sample shows how to apply animations to diagram nodes and links. The diagram control supports various types of animations and easing and you can see them in action in this sample.
This sample shows how diagrams can be arranged with TreeLayout with Type set to Cascading. On the client side this algorithm is implemented as BorderedTreeLayout. Additionally the layout is called also on diagram item modifications - creating/deleting nodes and creating/deleting links.
This example demonstrates the use of client events in DiagramView. Create or delete nodes and links in the view to see some basic information from the handled events in the list below.
Container nodes act as a single node and hold unlimited number of diagram nodes and links. Links can be created both among the nodes in the same container or different containers, as well as among the containers nodes themselves.
This sample demonstrates the auxiliary controls available with MvcDiagram: NodeListView, Overview, ZoomControl and Ruler.
This example shows how to create custom node and link classes that exposes some new properties in addition to the ones defined by DiagramNode and DiagramLink and implement their own drawing logic. Draw with the mouse to create instances of the CustomNode and CustomLink classes.
The decision layout algorithms is the perfect choice for flowcharts that demonstrate processes or any other succession of logical steps. The sample shows how to apply the layout on a sample diagram.
This example shows how build a diagram representing a directory tree programmatically and arrange the diagram with TreeLayout. In this case the diagram represents the drives and first-level directories on the current machine.
This sample page shows how to build a tree dynamically and apply the automatic TreeLayout algorithm. Tree branches can be collapsed by clicking the [-] icon on the right of nodes. In this case, the diagram represents the DOM tree of the web page that renders it.
Flowchart With XML Serialization
This simple example shows how to save and load MVC Diagram from XML. The premade diagram includes rotatable ShapeNodes (set through DiagramItem.EnabledHandles to AdjustmentHandles.All) and text over DiagramLinks (set through DiagramLink.Text property).
The FractalLayout is a tree layout algorithm that places child nodes symmetrically around their parent node. The sample lets you click the button to create a random tree and arrange it using the FractalLayout algorithm.
This sample demonstrates how to build a simple Гantt chart using the lane grid. Newly created items and links are automatically aligned to the lanes of the grid.
The LayeredLayout algorithm arranges diagram nodes in layers according to several criteria, most important of which are: connected nodes must be placed close together; links must flow in one direction if possible; links must cross as few layers as possible; links must not cross other links.
This sample shows how MindFusion.Diagramming for ASP.MVC can be used to create and view network-like diagrams. Drag nodes from the NodeListView control to the DiagramView to add new nodes to the diagram.
This example shows how to create a custom node class that exposes some new properties in addition to the ones defined by TableNode and implements its own drawing logic. Here the custom node represents an employee with an organizational hierarchy.
This sample shows how DiagramView, Overview and NodeListView controls can be loaded on-demand by setting an init function and calling it from client code.
This example demonstrates one of the export capabilities of MindFusion.Diagramming - exporting to PDF. Other formats to which you can export MVC Diagram are SVG, DXF, Visio and bitmap image file.
This simple application displays all available predefined shapes in MindFusion.Diagramming for ASP.NET MVC.
MVC Diagram table nodes support unlimited number of rows and columns. This sample page shows how to set up table nodes with spanning cells.
The diagram library supports nodes that can hold SVG images. This sample shows how to create SvgNodes.
The diagram library comes with a long list of predefined style themes. This sample shows how to use them. Browse your MindFusion.Diagramming for ASP.NET MVC Installation Folder/Themes subfolder to load a predefined theme.
This sample shows how the diagram can be arranged dynamically with TreeLayout Drag a node from the NodeListView control on the left to a tree node on the left to create a tree child element and apply TreeLayout. Child nodes are attached to their parent, so that moving a parent also moves its children.
This sample shows how to arrange the Diagram by using the TreeMapLayout algorithm. Choose different options to assign weights and note how the layout changes.
This tutorial shows how to set your project to use MindFusion.Diagramming for ASP.MVC and create a simple diagram.
This tutorial shows how to handle some of the client events available in MindFusion.Diagramming for ASP.MVC.
This tutorial shows how to load graph data from XML and create diagram objects corresponding to the graph nodes and edges.
This tutorial shows how to load hierarchical data recursively from XML and create diagram items corresponding to the hierarchy.
This tutorial shows how to create a custom node class that exposes some new properties in addition to the ones defined by DiagramNode and implements its own drawing logic.