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:

- Select and move any node with attached children, the children will move too.
- Click the [+/-] button on the right of a node. Its children will show/hide respectively.

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.

Diagram nodes can display bitmap images as demonstrated below. This sample also handles the DrawNode event to render custom borders around images and show additional icons.

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.

- Additional invokes your drawing code after the standard painting is done;
- Full does not perform any standard painting, just invokes your code;
- ShadowOnly use standard painting for objects and custom painting for shadows;

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.

It is also allow possible to display multiple labels for a single link by attaching the labels to individual control points or segments of the link through the DiagramLink.AddLabel method.

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 router 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.

(Available in MindFusion.Diagramming Professional edition)
The OrthogonalLayout algorithm was designed for planar graphs where the nodes have at most four incident links, and produces best results with such graphs as input. It can arrange any arbitrary graph as well, by adding some dummy nodes and links to planarize the graph and reduce its vertex degree, and removing them after the layout.

(Available in MindFusion.Diagramming Professional edition)
Demostrates the circular graph layout algorithm. Nodes are distributed evenly on the circumference of a circle at positions that result in as few link crossing as possible.

(Available in MindFusion.Diagramming Professional edition)
FlowchartLayout recognizes program code -like patterns in the graph, such as loops, sequences and if/switch branchings, and arranges them recursively. FlowchartLayout could be used to arrange other types of graphs as well, though with some restrictions. For example it treats all back links as loops in the code, and expects that they are nested - loop links starting closer to the stop node should end closer to the start node. Another similar restriction is that there shouldn't be any cross-links that connect different branches of a decision sub-graph.

The SvgNode class represents nodes that can display SVG drawings in addition to the rendering provided by its base ShapeNode class. The SVG drawing is rendered after the associated Image and just before the DrawNode event is raised with CustomDraw.Additional. The SVG drawing of the node is specified through its Content property. The SVG graphics is loaded and associated with the node through a MindFusion.Svg.SvgContent object, which should be initialized and then assigned to this property.

The TreeViewNode class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the RootItems property. New items can be added to and removed from the returned collection. The root items can have child items on their own and so on. For more information, refer to the TreeViewItem class.

(Available in MindFusion.Diagramming Professional edition)
The topological layout arranges nodes in a row or a column (depending on the value of the Orientation property) in such a way that there are as fewer back links as possible. The links connecting non-adjacent nodes are rendered as arcs. The links connecting adjacent nodes are rendered either as arcs or as straight lines, depending on the BendAdjacentLinks property. The amplitude of the link arcs is proportional to the distance between the connected nodes.

(Available in MindFusion.Diagramming Professional edition)
The hierarchical layout places vertices on predefined levels, such that if the source graph is level-planar it is guaranteed that all edges will have a single segment and will not intersect. A planar graph is considered level-planar if it is still possible to draw it without edge intersections when its vertices are positioned on predefined levels.

(Available in MindFusion.Diagramming Professional edition)
The cascade layout places vertices on a virtual grid and arranges edges orthogonally, such that if the source graph is planar it is guaranteed that all edges will have no more than two bends and will not intersect.

(Available in MindFusion.Diagramming Professional edition)
The triangular layout places vertices on a virtual grid, such that if the source graph is planar it is guaranteed that all edges will have a single segment and will not intersect. If the graph is not planar, the intersecting edges are optionally segmented and bended in order to improve readability.

The components represent graphical widgets similar to controls, which can be arranged in hierarchies and added to a Diagram through instances of the new CompositeNode class. The component system contains various built-in components, such as TextComponent and ButtonComponent.

The theme is a set of styles, each associated with specific diagram or item type. When the theme is applied to a diagram, the styles registered in the theme affect all objects of their associated type. This sample demonstrates several ready-to-use themes. Try applying them to the diagram by selecting them from the list box below.

(Available in MindFusion.Diagramming Professional edition)
The one-way layout ensures that links enter into nodes from the same general direction and exit them from the opposite side. If the graph contains cycles, some links bend around the nodes to keep the enter/exit direction consistent. The algorithm aims to minimize the number of such links.

The MapNode class represents nodes that can render geographical maps. The content of a map file is represented by an instance of the MapContent class that should be assigned to the Content property of the MapNode.

Click on the highlighted countries in the world map below to get a detailed view.

The VisioNode class can be used to present shapes from Visio stencils inside MindFusion.Diagramming diagrams. The content of the node is specified as a VisioContent object assigned to the Content property.