Tutorial 5
This tutorial shows how to load hierarchical data recursively from XML and create diagram items corresponding to the hierarchy.
Run
Download
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.
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.
Controls
This sample demonstrates the auxiliary controls available with MvcDiagram: NodeListView, Overview, ZoomControl and Ruler.
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.
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.
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.
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.
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.
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.
Tutorial 2
This tutorial shows how to handle some of the client events available in MindFusion.Diagramming for ASP.MVC.
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.
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.
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.
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.
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.
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.
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.
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.
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 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).
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.
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.
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.
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.
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.
Predefined Shapes
This simple application displays all available predefined shapes in MindFusion.Diagramming for ASP.NET MVC.
Svg Nodes
The diagram library supports nodes that can hold SVG images. This sample shows how to create SvgNodes.
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.
Tutorial 1
This tutorial shows how to set your project to use MindFusion.Diagramming for ASP.MVC and create a simple diagram.
Tutorial 4
This tutorial shows how to load graph data from XML and create diagram objects corresponding to the graph nodes and edges.
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.
