No description available.
This program demonstrates various MindFusion.Diagramming features. There are several examples placed in different categories. You can choose an example from the list on the left. Code snippets in C# and VB.NET related to the displayed diagrams are accessible via the 'Source Code' tab. Some of the code samples use files available in the MindFusion.Diagramming demo folder.
Examples with the 
icon demonstrate features, which are only available in the professional version of the control.
Have fun with MindFusion.Diagramming!
This diagram demonstrates hierarchical grouping and collapsing/expanding subtrees in the hierarchy. Try it:
Perpendicular style links are demonstrated here. You can also see that links can have different arrowhead shapes and sizes. Collapsing/expanding of subtrees in a hierarchical diagram are also demonstrated - just click the [+/-] button on the right of a node.
This quick introduction to the rich functionality of MindFusion.Diagramming has come to an end. There is still a lot more to learn and see. As your next steps we suggest you to take a look at the developer's guide and check the samples installed with the control. Then build a test application to try the properties and methods you are most interested in. Having your own licensed MindFusion.Diagramming copy means not only you get all the features of the component at once. It means you have the MindFusion support team at your side to assist you. Welcome to our big family! For any questions or suggestion you might have, please contact us at support@mindfusion.eu.
(Available in MindFusion.Diagramming Professional edition)
The PathFinder class allows finding shortest, longest or all paths in a graph and detecting cycles. Try the various function by clicking the buttons below. Use Ctrl+click to select more nodes at once when needed.
MindFusion.Diagramming provides table(grid) objects that can hold unlimited number of columns and rows. In this sample such tables are used to represent classes in a class hierarchy. Some rows are defined as headers and allow expanding or collapsing the non-header rows below them. The table rows can be scrolled up or down by clicking the arrows at the upper-right corner.
To modify an existing class in the diagram, right click on its table.
You can use MindFusion.Diagramming to display database entity-relationship diagrams, as shown below. The diagram also demonstrates perpendicular style links and using arrow base and arrowhead shapes of different sizes.
This diagram defines a dialogue that can be conducted by automated system, such as an IVR system. You can define your own nodes in the dialogue. Pressing the 'Take a tour' button will run a simulation of the dialogue. You can choose your answers by double-clicking.
The diagram below demonstrates various attributes applied to text. MindFusion.Diagramming is able to format text as italic, bold, subscript, and so on, either as stand-alone styles or combined with other styles. Formatting can be defined in HTML-like syntax by embedding tags in raw text. This sample also shows how nodes can be attached to links or other nodes.
Select a circle and try the various buttons below. They demonstrate how to access objects connected to another objects.
This diagram was drawn in the 'NetSample' step. Several link styles and arrowhead shapes are exhibited here.
Click on a patient name on the left. Event handler is invoked that shows a hidden node with user-defined shape. Clicking the green + node fires another event, whose handler adds new row to the log table.
Several types of custom-painting are demonstrated here.
MindFusion.Diagramming provides a method to arrange diagram elements in tree-like hierarchies. You may customize the layout in various ways, including direction of the tree, alignment of the items, the link styles, the spacing between the items and the tree levels, and more.
(Available in MindFusion.Diagramming Professional edition)
Spring-Embedder is force-directed layout algorithm. It simulates a physical system in which nodes repulse each other, and the links between them act as confining springs. Graphs processed by Spring-Embedder have their nodes distributed uniformly across the diagram area. Press the 'Layout' button to have the Spring-Embedder algorithm applied on the graph below.
MindFusion.Diagramming supports attaching and grouping of objects in a number of ways. Grouping can be applied to any basic MindFusion.Diagramming object type (links, nodes and tables) to build more complex constructions. Hierarchies of groups can be formed where modification of the main object modifies all its dependants.
The scheme below, composed of attached links, nodes and tables, illustrates the MindFusion.Diagramming grouping functionality. Select one of the links and drag its manipulation handles to see how grouping works.
The sample below uses decorated tables to display diagram entities. Tables have anchor points associated with each row, defining where incoming and outgoing connections dock to tables. There are also ShapeNode objects attached to the bottom of each table that act as buttons - try clicking any of those!
Links have an AutoRoute property that enables or disables automatic routing of a link. Routed links avoid nodes by finding the shortest path between their origin and destination that does not cross any other nodes. The number and orientation of segments of routed links are automatically updated when nodes are moved around. Try that by moving or resizing any node below.
Links can have various arrowhead shapes as shown below. It is also possible to associate such shapes with links origins and segment centers. The color and size of arrowheads can be changed too.
Links control points can maintain their relative position one to another while nodes are moved around. Try this below.
Link's text can be either centered or rotated to have the same orientation as the middle segment of a link. Move links' control points below to check how the position and orientation of their associated text change.
The ControlNode class derived from DiagramNode allows using any .NET Windows.Forms control as a node in a MindFusion.Diagramming diagram. The sample below uses ControlNode objects to implement a simple form editor. Select a control type from the combo box and draw in the form area. When your form is ready, try it with the 'Test Form' button.
As other DiagramNode-derived classes, ControlNode objects can be connected with links. The diagram below allows editing RTF text in hosted RichText controls and browsing in a hosted IE control. To select and move a hosted control, click near its border. Try also tabbing between nodes - hosted controls are part of the form and participate in its TAB-order.
ControlNode objects can also host user and custom controls. Clicking the 'Create record' button adds two nodes to the diagram and groups them. Try adding an image to the left node by double clicking the picture box. Clicking the [+] button allows adding new records to the 'album' on the right.
(Available in MindFusion.Diagramming Professional edition)
The LayeredLayout algorithm arranges diagram nodes in layers, according to several criteria. Most important criteria 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. To apply the layout to a diagram, create a LayeredLayout instance, set its members and invoke the Arrange method.
The diagram below demonstrates various attributes applied to text. MindFusion.Diagramming is able to format text as italic, bold, subscript, and so on, either as stand-alone styles or combined with other styles. Formatting can be defined in HTML-like syntax by embedding tags in raw text. This sample also shows how nodes can be attached to links or other nodes.
(Available in MindFusion.Diagramming Professional edition)
The GridLayout algorithm arranges diagram nodes in a grid, keeping connected nodes close together. It also strives to achieve a small number of link crossings. The algorithm is based on an iterative process whose initial steps shuffle the grid nodes randomly. That leads to very different results each time the layout is applied to a diagram.
(Available in MindFusion.Diagramming Professional edition)
The EnableClusters property of SpringLayout makes diagrams laid out in distinct clusters as shown below.
Custom painting of diagram links is demonstrated below. Links can be either entirely custom-painted, or an additional painting code can be executed along the standard one. In this sample, each link is animated to show the progress of some process. Click the 'Animate' button to see that.
The nodes in this diagram are constrained to move only horizontally via the Constraints property of the DiagramNode class. In addition, only the movement and left and right - resize selection handles are enabled, so users cannot move a node outside of its lane. This is done using the EnabledHandles property of nodes.
The lanes are locked ShapeNode instances at the bottom of the z-order. The lane labels on the left are locked nodes whose RotationAngle property is set to 270.
The table cells, represented by the Cell class, provide RowSpan and ColumnSpan properties. These properties let you create cells that span several rows and columns. The cells that contain photos in the diagram below span three rows. The label cells span two columns.
The traffic diagram below shows several rotated nodes containing metafile images. Nodes can be rotated interactively by dragging their round rotation handle. The RotationAngle property lets you rotate nodes programmatically. The RotateImage and RotateText properties specify whether the nodes' image and text should rotate together with the node shape.
You can draw network diagrams here. The nodes are not created by dragging (the usual MindFusion.Diagramming way) but by clicking, which demonstrates how you can override default behavior by using proper event handling. The sample also shows how you can attach text to objects. The simple MindFusion.Diagramming objects can hold text only in their interior, but a simple trick is used here - transparent nodes containing text are attached to the primary nodes.
Try the 'Show sample' button to see how XML files can be displayed as a tree of links and nodes. Use the 'Load XML' button to display your own file.
You can control how MindFusion.Diagramming responds to drag-and-drop operations by handling several events. In this sample, dropping image or text data objects creates new nodes containing them.
MindFusion.Diagramming allows creating custom shapes composed of series of lines, arcs and Bezier splines. In addition it provides many predefined shapes, listed below together with their string identifiers.
This sample creates a diagram of the directory structure of your hard drive and applies radial layout to it.
(Available in MindFusion.Diagramming Professional edition)
The AnnealLayout class implements a Simulated Annealing graph layout algorithm that can be used to arrange MindFusion.Diagramming diagrams. Simulated Annealing is a general-purpose optimization method used to solve large-scale combinatorial problems by simulating the process of heating and cooling of metal to achieve freedom from defects. Finding a nice arrangement of a graph is a combinatorial problem that can be reduced to assigning costs to graph configurations and finding the minimum cost configuration. In that case, a cost is assigned to a graph configuration by evaluating different aesthetic criteria such as distance between nodes, length of links and the number of link crossings.
(Available in MindFusion.Diagramming Professional edition)
OrthogonalRouter is a secondary layout algorithm that can be used to arrange links after an initial node arrangement has already been applied. The orthogonal layout is useful when there are much more links than nodes in a graph.
The ContainerNode class represent nodes that can contain other nodes. Containers can be nested one within another, and the containment hierarchy depth is unlimited. Containers can be folded to hide their contents - try that below by clicking the up-arrow button in the containers' caption bar.
This step demonstrates the new Horizontal-Vertical layout that can be applied to binary trees.