Tutorial 5
This tutorial shows how to load hierarchical data recursively from XML and create diagram items corresponding to the hierarchy.
![Load Diagram XML Data Recursively Load Diagram XML Data Recursively](https://mindfusion.eu/samples/asp.net_mvc/tutorial5.png)
Bordered Tree Layout
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.
![ASP.NET MVC Bordered Tree Automatic Graph Layout ASP.NET MVC Bordered Tree Automatic Graph Layout](https://mindfusion.eu/samples/asp.net_mvc/bordered_tree_layout.png)
Client Events
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.
![Handling Events on the Client Side in the ASP.NET MVC Diagram Handling Events on the Client Side in the ASP.NET MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/client_events.png)
Controls
This sample demonstrates the auxiliary controls available with MvcDiagram: NodeListView, Overview, ZoomControl and Ruler.
![Auxiliary Controls with the MVC Diagram Auxiliary Controls with the MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/controls.png)
Keyboard
This example shows how to add some keyboard support to MVC Diagram in javascript. Press Ctrl+C to copy, Ctrl+V to paste and Del to delete the selected items. Use Ctrl+Arrow Keys to move the selection with the specified step value. Use Ctrl+Q to tab through the diagram items.
![Keyboard Operations in the MVC Diagram Keyboard Operations in the MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/keyboard.png)
Org Chart
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.
![Org Chart in ASP.NET MVC Org Chart in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/org_chart.png)
Pdf Exporter
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.
![PDF Export of the ASP.NET MVC Diagram PDF Export of the ASP.NET MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/pdf_export.png)
Spanning Cells
MVC Diagram table nodes support unlimited number of rows and columns. This sample page shows how to set up table nodes with spanning cells.
![Spanning Table Cells Spanning Table Cells](https://mindfusion.eu/samples/asp.net_mvc/spanning_cells.png)
Themes
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.
![Style Themes for the MVC Diagram Style Themes for the MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/themes.png)
Tree Layout
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.
![Automatic Tree Layout Algorithm Automatic Tree Layout Algorithm](https://mindfusion.eu/samples/asp.net_mvc/tree_layout.png)
Tutorial 2
This tutorial shows how to handle some of the client events available in MindFusion.Diagramming for ASP.MVC.
![Client Events in ASP.NET MVC Diagram Client Events in ASP.NET MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/tutorial2.png)
Adjustment Handles
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.
![ASP.NET MVC Diagram: Various Node Adjustment Handles ASP.NET MVC Diagram: Various Node Adjustment Handles](https://mindfusion.eu/samples/asp.net_mvc/adjustment_handles.png)
Anchor Points
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.
![MVC Diagram: Node Anchor Points MVC Diagram: Node Anchor Points](https://mindfusion.eu/samples/asp.net_mvc/anchor_points.png)
Animations
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.
![ASP.NET MVC Diagram Animations ASP.NET MVC Diagram Animations](https://mindfusion.eu/samples/asp.net_mvc/animations.png)
Containers
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.
![Container Nodes in the MVC Diagram Library Container Nodes in the MVC Diagram Library](https://mindfusion.eu/samples/asp.net_mvc/containers.png)
Custom Nodes
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.
![Custom Diagram Nodes in ASP.NET MVC Custom Diagram Nodes in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/custom_nodes.png)
Decision Layout
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.
![Decision Layout in the ASP.NET MVC Diagram Decision Layout in the ASP.NET MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/decision_layout.png)
Dir Tree
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.
![Directory Tree in ASP.NET MVC Directory Tree in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/dir_tree.png)
Dom Tree
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.
![Page Dom Tree in ASP.NET MVC Page Dom Tree in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/dom_tree.png)
Flowchart Layout
Click the button to parse a JavaScript code snippet and arrange it using the FlowchartLayout algorithm. The sample uses the acorn js library for parsing the JavaScript code and walking the syntax tree.
![Flowchart Layout in the ASP.NET MVC Diagram Library Flowchart Layout in the ASP.NET MVC Diagram Library](https://mindfusion.eu/samples/asp.net_mvc/flowchart_layout.png)
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).
![Flowchart in ASP.NET MVC with XML Serialization Flowchart in ASP.NET MVC with XML Serialization](https://mindfusion.eu/samples/asp.net_mvc/flowchart.png)
Fractal Layout
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.
![Fractal Automatic Layout Algorithm Fractal Automatic Layout Algorithm](https://mindfusion.eu/samples/asp.net_mvc/fractal_layout.png)
Lanes
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.
![ASP.NET MVC Lane Diagram ASP.NET MVC Lane Diagram](https://mindfusion.eu/samples/asp.net_mvc/lane_diagram.png)
Layered Layout
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.
![Layered Layout in ASP.NET MVC Layered Layout in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/layered_layout.png)
Network
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.
![Network Schema in ASP.NET MVC Network Schema in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/network.png)
Partial View
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.
![On-demand-load of the MVC Diagram On-demand-load of the MVC Diagram](https://mindfusion.eu/samples/asp.net_mvc/partial_view.png)
Predefined Shapes
This simple application displays all available predefined shapes in MindFusion.Diagramming for ASP.NET MVC.
![Predefined Diagram Node Shapes in ASP.NET MVC Predefined Diagram Node Shapes in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/predefined_shapes.png)
Svg Nodes
The diagram library supports nodes that can hold SVG images. This sample shows how to create SvgNodes.
![Svg Nodes in the MVC Diagram Library Svg Nodes in the MVC Diagram Library](https://mindfusion.eu/samples/asp.net_mvc/svg_nodes.png)
TreeMap Layout
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.
![TreeMap Layout in ASP.NET MVC TreeMap Layout in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/treemap_layout.png)
Tutorial 1
This tutorial shows how to set your project to use MindFusion.Diagramming for ASP.MVC and create a simple diagram.
![Setting Up the MVC Diagram Library Setting Up the MVC Diagram Library](https://mindfusion.eu/samples/asp.net_mvc/tutorial1.png)
Tutorial 4
This tutorial shows how to load graph data from XML and create diagram objects corresponding to the graph nodes and edges.
![Load Graph Data From XML Load Graph Data From XML](https://mindfusion.eu/samples/asp.net_mvc/tutorial4.png)
Tutorial 6
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.
![Custom Node Class in ASP.NET MVC Custom Node Class in ASP.NET MVC](https://mindfusion.eu/samples/asp.net_mvc/tutorial6.png)