NetDiagram Programmer's Guide
Version History

The list below describes recent changes and additions to NetDiagram:

New in version 6.2.2

Shape components

The Shape class used to specify ShapeNode geometry can also be used as a component in CompositeNode. When its isOutline attribute is set, the shape will control CompositeNode's geometry too, defining hit test and clip area, and link alignment points along node's border. If isOutline is disabled, the shape will serve mostly as a decorative element. The code below shows a sample fragment from node's template specifying shape component's properties:

Json template  Copy Code

    component: "Shape",
    id: "Cloud",
    autoProperty: true,
    name: "OutlineShape",
    pen: "gray",
    brush: "Transparent",
    isOutline: true

JSON Serialization

Diagrams can now be serialized in JSON format. This can be used for interoperability with MindFusion JavaScript diagramming library, or for general storage in JSON files or databases. To serialize a Diagram to a JSON string, call its SaveToJson method. To deserialize a diagram back from its JSON representation, call the LoadFromJson method. Custom item classes can implement JSON serialization for their additional properties by overriding the SaveToJson and LoadFromJson methods of DiagramItem. Such classes must be registered for serialization by calling the RegisterItemClass method and providing a string identifier for the clientClass parameter.


API changes

New in version 6.2.1

Improved performance

Diagram rendering and user interactions are now faster. The control redraws the smallest possible area after diagram changes, and compresses refresh operations into a single batch when possible. Custom node classes that need to draw outside of their Bounds should override the getRepaintBounds method to specify the repaint area.

Custom type registration

Custom item types registry is now stored in the page session and is handled by the ItemTypeResolver class. It is no longer required to call the RegisterItemType method for every DiagramView and NodeListView instance, but instead call RegisterItemType method only once on the first DiagramView control. You can access the ItemTypeResolver registered for the current page through the static GetResolver method.


New in version 6.2

Flowchart graph layout

(client side / JavaScript)
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.

Path finding

(client side / JavaScript)
The PathFinder class provides methods that help you find paths and cycles in a graph:

Path objects returned by these methods contain nodes, links and items arrays containing sequences of elements in the path. The new PathFinder sample page included in distribution demonstrates path finding and animations over the found paths.

Embedded hyperlinks

Nodes and Text components with style text enabled can now contain <a> tags to create hyperlinks. When a link is clicked, the control raises hyperlinkClicked event to let you implement navigation:

JavaScript  Copy Code

// node is a ShapeNode instance
node.setText("test <a=''>link</a> test");

// attach an event listener to the hyperlinkClicked event
diagram.addEventListener(Events.hyperlinkClicked, onHyperlinkClicked);

function onHyperlinkClicked(sender, args)

Container improvements

Visio2013Exporter improvements


New in version 6.1

Composite nodes

The CompositeNode class implements nodes whose appearance can be defined via composition of components and layout containers. The content of a composite node can be created by building a tree of components programmatically, or by loading a JSON template. This initial release includes layout containers such as StackPanel and GridPanel. Objects from the MindFusion.Drawing namespace now double as CompositeNode components (Image, Text, Path, Rect). Future versions will add interactive components like buttons and text editors.

Animated layout

arrangeAnimated methods added to Diagram and ContainerNode classes display movement of items from their original locations to new locations assigned by the layout object. This can be used to create an explode effect by starting new layout from overlapping nodes on same position, or an insertion effect by adding a new node to an existing layout.

Export Excel files

The ExcelExporter class from MindFusion.Diagramming.Export.Excel.dll assembly exports diagrams to Excel Open XML format (XSLX) files. Diagrams are exported as Excel AutoShapes drawings. The Export overload that takes a DiagramDocument parameter creates a sheet for each DiagramPage in the document. The Export(Diagram) overload creates a single Excel sheet.

Overview improvements

Visio2013Exporter improvements

LayeredLayout improvements

PathFinder improvements


New in version 6.0

User-interaction controllers

All kinds of user interaction are now carried out by controller objects. The startDraw method of BehaviorBase-derived classes that returned an opaque InteractionState instance has been replaced by createController method returning a controller of class specific to the modified item and interaction types. Built-in controllers include CreateNodeController, CreateLinkController, ModifyNodeController, ModifyLinkController, PanController. You can also create custom controllers by deriving and overriding the methods of SinglePointerController:

JavaScript  Copy Code

SinglePointerController.prototype =
    start: function (position) {},
    move: function (position) {},
    validate: function (position) {},
    commit: function (position) {},
    cancel: function (position) {},
    drawInteraction: function (context) {}

Record and replay

The Diagram class provides record, stopRecording and replay methods that can be used to save and replay all user actions with keyboard and mouse. The replay method takes recording, timer and diagramJson parameters. The recording argument is an array of records returned by stopRecording. If the timer argument is set to true, events are replayed from a timer preserving their original timing, otherwise they are replayed immediately. Timer mode can be used to show tutorials played directly in the diagram. Immediate mode could be used to automate user interaction testing where an assertion is checked after replaying series of events. Recorded events could also be replayed as macros if ran on a diagram with items placed on same initial coordinates.

Improved testability

User interaction can now be tested automatically in several ways outlined below.

Ruler control

The Ruler control provides horizontal and vertical scales that help users measure and align diagram items. In order to set up a Ruler instance, create a Ruler element as a parent of the target DiagramView:

aspx  Copy Code

<ndiag:Ruler runat="server" ID="ruler">
    <ndiag:DiagramView runat="server" ID="diagramView" ClientSideMode="Canvas" />

3rd party dependencies now optional

The diagram can now be used without JQuery and Microsoft Ajax libraries. To enable that mode, set ClientScriptMode to StandAlone for the DiagramView element. Stand-alone mode requires relatively modern browsers, the base feature-set against we test it is the one of IE11.

Flip shapes

The shape of a ShapeNode can be flipped horizontally or vertically. Enable the AllowFlip property and the shape flips when an edge is dragged over its opposite edge. You can get or set current flip state using FlipX and FlipY properties.

Revamped item dependency system

Dependencies between diagram items are now expressed by rule objects and applied in sequence by the DiagramMediator class. Built-in dependencies are implemented by ItemFollowsContainerRule, AttachedFollowsMasterRule, LinkFollowsNodesRule, NodeFollowsSelectionRule rules. You can create custom rule objects with following API and add them to DiagramMediator.AllRules array to make items follow other items during user interaction:

JavaScript  Copy Code

var MyRule =
    dependencies: function (master) {}, // return array of items that should follow master
    dependentUpon: function (dependency) {},  // return array of items that should be followed by dependency
    recognize: function (dependency) {},  // return true or false if this rule should be applied on an item
    updateFromMasters: function (dependency, originalStates) // set new position or size of dependency


New in version 5.7

Fluent API

Extension methods in MindFusion.Diagramming.Fluent and MindFusion.Diagramming.Layout.Fluent namespaces add support for fluent programming style:

C#  Copy Code

using MindFusion.Diagramming.Fluent;
using MindFusion.Diagramming.Layout.Fluent;

    .CreateShapeNode(10, 10, 20, 20)
        .Font("Arial", 12)
        .Text("Task <i>1</i>")
        .ToolTip("This is the task");

new TreeLayout()

DiagramLink improvements

Canvas mode improvements

New in version 5.6

Free-form nodes

A FreeFormNode collects all points from users' mouse or touch input and displays them as node's outline. To let users draw free-form nodes interactively, set Behavior to DrawFreeForms or LinkFreeForms. Use the Points property of FreeFormNode to get or set outline points programmatically. If the Closed property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than AutoCloseDistance, the node's Closed property is automatically set to true. AutoCloseDistance default value is float.MaxValue, so free-form nodes are always closed.

Convert free-form drawings to ShapeNodes

Additional drawing modes, convenient for touch input, convert FreeFormNode objects drawn by user to ShapeNode objects with matching shapes. To enable them, set Behavior to DrawFreeShapes or LinkFreeShapes. The shapes against which the user's input is matched are set via diagram's FreeFormTargets property. By default it contains Rectangle, Decision and Ellipse shapes.


Fixed bugs

New in version 5.5

Resize table columns and rows

(not available in ImageMap mode)
Columns and rows of a TableNode can now be resized interactively if its AllowResizeColumns or AllowResizeRows properties are enabled. In order to resize, move the mouse pointer to the border line on column's right side or row's bottom side until it shows resize cursor and start dragging. The control raises TableColumnResizing and TableRowResizing events to let you validate new size or prevent resizing some elements. The TableColumnResized and TableRowResized events are raised after the operation completes.

Canvas mode improvements

ImageMap mode improvements

API changes

ZoomControl can now be used with other MindFusion components and has been moved to MindFusion.Common.WebForms namespace and assembly.

New in version 5.4.2

Canvas mode improvements


New in version 5.4.1

Styled text in Canvas mode

The EnableStyledText property of ShapeNode allows using HTML-like formatting tags to apply various attributes to the node's text. At this time the component supports the following formatting tags:

Improved text rendering in Canvas mode

License keys

There is no separate trial build of the control assemblies anymore. Instead, set the LicenseKey property to disable the component's evaluation mode and stop displaying trial messages. If your application contains more than one DiagramView instance or other controls by MindFusion, you could call MindFusion.Licensing.LicenseManager.AddLicense(key) to specify the key once instead of setting it per each control. License key strings are listed on the Keys & Downloads page at MindFusion's customer portal.


New in version 5.4

Zoom control

(not available in JavaApplet mode)
The ZoomControl class lets users change interactively the current zoom level and scroll position of a DiagramView. To set it up, add a ZoomControl element to the page and set the control's TargetId property to the id of a DiagramView. Set the ZoomStep and ScrollStep properties to specify the amount added to diagram's zoom level or scroll position by ZoomControl's buttons. You can customize the control's appearance by setting properties such as Fill, BorderColor, CornerRadius and TickPosition.

Canvas mode improvements


New in version 5.3

SVG nodes in Canvas mode

The SvgNode class represents nodes that can display SVG drawings. SVG graphics are rendered instead of Image, and on top of the geometry rendered by the base ShapeNode class. The SVG drawing of the node is specified through its SvgUrl property.

Import diagrams from SVG

The SvgImporter class allows importing Scalable Vector Graphics files (*.svg) into MindFusion.Diagramming. Each top-level SVG group element is imported as a separate SvgNode, whose Content is set to the group's child elements. If the SVG file was exported from Visio or OpenOffice Draw, SvgImporter will create DiagramLink objects for groups it recognizes as connectors in order to recreate the original diagram model, though in this case it will not preserve fully the original appearance of connectors in SVG.

Visio2013Exporter improvements


New in version 5.2

Tree map layout

Tree maps represent hierarchies by nesting child nodes within their parents, where the areas of leaf nodes are proportional to their Weight values. Unlike other layout algorithms, TreeMapLayout expects hierarchies to be defined via grouping or containment (see AttachTo method and ContainerNode class), and will ignore any links in the diagram. The diagram area covered by the topmost nodes in a hierarchy is specified via the LayoutArea property. By default, the layout tries to keep the ratio of node sides as close as possible to one. However this could make it hard to distinguish separate levels of the hierarchy. To alleviate that, set Squarify to false, and child nodes will be arranged either as a row or a column inside their parent node, alternating directions for each level. The drawback is that when Weight ratios differ greatly or nodes contain many children, some nodes could end up with very narrow rectangles.

Decision flowchart layout

DecisionLayout arranges simple flowcharts consisting of decision boxes with up to three outgoing links per node and activity boxes with a single outgoing link per node. The nodes are arranged in columns and rows, whose distance depends on the HorizontalPadding and VerticalPadding property values. When links share the same row or column, they are placed at a distance specified via LinkPadding. The layout arranges nodes recursively starting from StartNode. If StartNode is not specified, the algorithm selects the root of the deepest branch of the graph's spanning tree as start node.


New in version 5.1

Canvas mode improvements

Intellisense support

The package now includes a MindFusion.Diagramming-vsdoc.js file providing code completion information for the Canvas mode JavaScript API. To load it in Visual Studio, add a /// <reference path="MindFusion.Diagramming-vsdoc.js" /> tag to the top of your script files. Use the static Diagram.findDiagram method instead of $find to let Visual Studio infer the type of returned Diagram objects correctly.

Node list control

The NodeListView is a listbox control that can host any type of DiagramNode -derived objects. Nodes from the NodeListView control can be dragged onto the DiagramView canvas, and when dropped will create a clone of the selected node at the mouse pointer position. NodeListView is supported in ImageMap and Canvas modes.

Resize multiple nodes

Now it is possible to resize multiple selected nodes simultaneously. To enable that, set the AllowMultipleResize property to true. When enabled, dragging a corner or side adjustment handle of any node resizes all nodes in the selection.

Export Visio 2013 files

The Visio2013Exporter class can export the content of Diagram and DiagramDocument objects to Visio 2013 VSDX files. In order to use it, add a reference to the MindFusion.Diagramming.Export.Visio.dll assembly. Similarly to the VDX format exporter, Visio2013Exporter relies on a template file, called Visio2013.vxt, containing some boilerplate Visio XML code. The template must be either located in same folder as the application assemblies, or its path must be specified via the TemplatePath property. At this time the exporter supports shapes from Visio basic stencil.

Visio2013Importer improvements

~ The importer now supports Visio group shapes. Child shapes in groups are no longer lost when importing, and their corresponding diagram nodes are attached to the corresponding group node.
~ Visio NURBS curves are now imported as Bezier-style links.
~ Fix for importing connectors with applied rotation transform.
~ Shapes with a ‘hidden’ attribute in master definition are now imported as invisible items.

Headers and footers in PDF

PdfExporter can now add headers and footers to exported pages. To specify their contents and font, set the HeaderFormat, HeaderFont, FooterFormat and FooterFont properties. Adding a %P placeholder to HeaderFormat or FooterFormat will render the current page number at its position.

New in version 5.0.5

Canvas mode improvements

Visio2013Importer improvements

New in version 5.0.4

Import Visio .vsdx files

The Visio2013Importer class can import .vsdx files, created by Visio 2013. In order to use it, you must add a reference to the MindFusion.Diagramming.Import.Visio.dll assembly. Various overloads of the Import method can be used to import the file into a DiagramDocument whose pages correspond to the Visio drawing pages, or into a single Diagram whose content is merged from all imported pages. Visio2013Importer supports the basic flowchart and data flow Visio stencils. For each node shape from the .vsdx file, the importer creates a ShapeNode object whose Shape, Text, Brush and Pen properties are set to values corresponding to the imported Visio shape. For each connector shape, the importer creates a DiagramLink object whose Origin and Destination are set to the corresponding imported nodes, and whose ControlPoints reflect the geometry of the connector.

Canvas mode improvements

JavaApplet mode improvements


New in version 5.0.3

Canvas mode improvements


New in version 5.0.2

Import OpenOffice Draw files

The DrawImporter class can import .odg files, created by the OpenOffice Draw vector graphics editor. In order to use it, you must add a reference to the MindFusion.Diagramming.Import.Draw.dll assembly. Various overloads of the Import method can be used to import the OpenOffice drawing into a DiagramDocument whose pages correspond to the Draw pages, or into a single Diagram whose content is merged from all imported pages. DrawImporter supports shapes from the General and Flowchart shape palettes in Draw. For each node shape from the .odg file, the importer creates a ShapeNode object whose Shape, Text, Brush and Pen properties are set to values corresponding to the imported OpenOffice shape. For each connector shape, the importer creates a DiagramLink object whose Origin and Destination are set to the corresponding imported nodes, and whose ControlPoints reflect the geometry of the connector.

Canvas mode improvements

The following features are now also available in Canvas mode:

ContainerNode improvements

PdfExporter improvements

New in version 5.0

Styles and themes

The appearance of the items in a diagram can now be modified using styles. The style represents a set of properties, which can be applied to an individual diagram item (by assigning it to the DiagramItem.Style property) or to all items of a specific type (by using a Theme). The styles can be easily expanded to include the properties in derived item classes.

The theme represents a collection of styles. Each style in the theme is associated with the diagram items of a specific type and affects all items of this type. Themes can be loaded from XML files. New themes can be created using the Theme Editor tool. Several pre-defined theme files are installed under the Themes subfolder of the control's root installation folder.

For more information about this new feature, check Styles and Themes.

Node effects

(not available in Canvas mode)

Two visual effects, represented by GlassEffect and AeroEffect classes, can be applied to nodes. To apply an effect, create an instance of the respective class, set up its properties, then add the instance to the Effects collection of a node (or to Diagram.NodeEffects collection to apply it to all nodes). Effects can be added, removed or modified at any time and this will immediately reflect on the diagram. Effects of different types can be applied simultaneously. It is also possible to apply more than one effect of the same type.

For more information about this new feature, check Node Effects.

One-way graph Layout

The OneWayLayout class 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.

Automatic postback mode

Enable the AutoPostBack property to post back the page after user interaction and raise server side events in Canvas, JavaApplet and Silverlight modes. This is supported for the NodeCreated, LinkCreated, NodeModified, LinkModified, NodeDeleted, LinkDeleted, NodeDeleting and LinkDeleting events. If any of their client side *Script counterparts is set, it overrides the post-back processing and the respective server event is not raised.

Canvas mode enhancements

ImageMap mode enhancements

Multiple labels per link

(not available in Canvas mode)

The LinkLabel class allows multiple captions to be displayed for a single DiagramLink object. Link labels provide a set of properties allowing full customization of their display and positioning. Labels can also be arranged automatically to avoid overlapping nodes and other labels by setting LinkLabel.AutoArrange to true.


(not available in Canvas mode)

Items can now be assigned to layers, and layers can be hidden, locked or moved up/down in the Z order as a group. Set the LayerIndex property of items to associate them with layers in the Diagram.Layers collection. The Layer objects provide Visible, Locked and ZIndex properties, which will affect all items in the respective layer. Newly drawn items are added to the layer specified via Diagram.ActiveLayer.

Parallel layouts

The .NET 4 version of NetDiagram takes advantage of the Task Parallel Library (TPL) to enable parallelism on the different layout algorithms. Set the EnableParallelism property on the Layout class to true to enable arranging different subgraphs on different threads to possibly improve performance on multiprocessor systems. In addition, the maximum degree of concurrency can be manipulated through the MaxDegreeOfParallelism property. Note that only independent subgraphs are processed in parallel, so the SplitGraph property of layout classes that provide it must also be set.


(in JavaApplet and Silverlight modes)

The new magnifier tool allows users to interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. The magnifier's zoom factor and appearance can be customized. Additional information can be found in the corresponding section of Scrolling and Zooming.


API changes

New in version 4.2

Attach nodes in Canvas mode

NetDiagram allows attaching a node to another node, establishing a subordinate - master relationship between them. This can be done by calling attachTo on the client side in Canvas mode, or AttachTo on the server. When a master node is moved, all of its subordinates follow it, so that the initial distance between them stays constant. This happens both when a user moves the master node around, and when the node's position is changed using a method or a property.

Collapsible tree branches in Canvas mode

If a diagram represents a tree structure, the tree branch starting from a node can be collapsed or expanded again in order to hide or display hierarchy details. To enable this, call the setExpandable method on the client or set the Expandable property on the server. There is a [±] button displayed beside an expandable node to allow users to collapse or expand the tree branch starting there. By default, pressing that button automatically toggles the Expanded property of the node and raises the TreeExpanded or TreeCollapsed events.

Touch input in Canvas mode

When running under the iOS Safari web browser, the control handles one-finger touch events to allow drawing and selecting items interactively. In addition, the hit-test area around adjustment handles is larger to make touch modifications easier. Two-finger gestures are delegated to the browser - they either scroll the canvas when dragging in the same direction or zoom the page when dragging in opposite directions. The preventDefaultTouch flag can be set to false to revert to the default one-finger touch behavior (scroll the whole page).

Loading UI controls in the same applet instance

Recent Java and browser versions do not work very well when more than one applets are loaded on the page (e.g. IE crashes when reloading such pages, in some browsers Java objects cannot be passed between two applets). Hence we modified the DiagramApplet, used to host the client-side DiagramView control, to also show the miscellaneous UI controls such as Overview, ShapeListBox and Ruler. This approach also allowed us to expose these controls in Silverlight mode. The Java and Silverlight UI controls can be shown and customized using the following properties of the server DiagramView control:

The server-side ShapeListBox and Overview controls are still necessary in ImageMap and Canvas modes.


New in version 4.1

HTML5 Canvas front-end

Set ClientSideMode to Canvas to render the diagram using an HTML5 Canvas element. You must also add "MindFusion.Diagramming.js" file to your web site, as well the Microsoft Ajax library script file (MicrosoftAjax.js), which is usually loaded automatically by the ScriptManager component. At this time, Canvas mode supports only ShapeNode and DiagramLink objects. In addition, it provides client-side support for Overview and ShapeListBox controls. A few layout algorithms are also available on the client side, although in simplified form, as implemented by the LayeredLayout, TreeLayout, SpringLayout and FractalLayout classes.

Automatic node alignment

If AutoAlignNodes is enabled, the node currently being drawn or resized is aligned to another node so that a pair of their vertical or horizontal sides become collinear. To specify the maximal distance at which nodes are aligned, set the AutoAlignDistance property. The pair of aligned nodes is indicated visually by drawing an alignment guide using the pen assigned to AlignmentGuidePen.

Fractal tree layout

FractalLayout is a tree layout algorithm that places child nodes symmetrically around their parent node. Nodes at the lowest level are arranged directly in a circle around their parent. At the upper level, the already arranged nodes form branches that are arranged in a circle around the new parent node. The algorithm is recursively repeated till the highest level is reached. If nodes in the tree have uniform number of children, the end result has fractal-like appearance (subsets of the graph look like scaled-down copies of the whole graph).

You can choose which node should be displayed at the center of the topmost circle by setting the Root property. If it is not specified, the algorithm automatically selects a root that leads to more balanced distribution of nodes.


New in version 4

Export to SWF (Adobe Flash) format

SwfExporter creates Adobe Flash files representing the content of a diagram. In order to use this component, add references to the MindFusion.Diagramming.Export.Swf.dll and MindFusion.Swf.dll assemblies to your project. To export a diagram to SWF file, create an SwfExporter instance and call its Export method, passing a Diagram object as parameter. At the time of writing this, the diagram is exported as static image; interactivity is planned for next releases.

Export diagrams to WMF format

WmfExporter creates WMF (Windows MetaFile) images from the content of Diagram objects. In order to use this component, add a reference to the MindFusion.Diagramming.Export.Wmf.dll assembly to your project. To create a WMF file from a diagram, create a WmfExporter instance and call its Export method, passing a Diagram object as parameter.

Other export improvements

CascadeLayout algorithm

CascadeLayout places nodes on a virtual grid and arranges links orthogonally, such that if the source graph is planar all links are guaranteed to have no more than two bends and will not intersect. By default the layout method arranges nodes in rows and link segments in columns; this can be changed by setting the Orientation property.

TriangularLayout algorithm

TriangularLayout places nodes on a virtual grid, such that if the source graph is planar, all links are guaranteed to have a single segment and not intersect. If the graph is not planar, its intersecting links can be optionally segmented and bended in order to improve readability. The layout method places the nodes from the external face on a triangle and recursively adds the rest of the nodes as vertices of internal triangles. As a result, it is very effective for near maximal-planar (a.k.a. triangular) graphs.

HierarchicalLayout algorithm

HierarchicalLayout places nodes on user-defined levels, such that if the source graph is level-planar, all links are guaranteed to have a single segment and will not intersect. A graph is considered level-planar if it is possible to draw it without link intersections when its nodes are positioned on predefined levels. The layout method requires that for each node LayoutTraits contains a HierarchicalLayoutTraits.Level entry specifying the level, and no two connected nodes must be on the same level.

SwimlaneLayout algorithm

SwimlaneLayout can be used to arrange process diagrams in which nodes representing activities are placed in swimlanes representing resources. The index of the resource allocated to an activity should be assigned to the corresponding node's LayoutTraits[SwimlaneLayoutTraits.Lane].

By default, the algorithm works with the diagram's LaneGrid, but its SwimlaneGrid property can be set to any class that implements ISwimlaneGrid. This allows applying the layout to a custom-drawn grid rendered through the DrawBackground event, or one composed of locked background nodes.


The lane grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. To display the lane grid, set the EnableLanes property of the Diagram class to true. In order to customize the grid, set the various attributes exposed by the LaneGrid property, which lets you specify the number of rows and columns, add headers, customize the cell appearance, etc. The new Lanes sample project uses the lane grid to let users draw Gantt charts.

VS2010 support

Design-time support classes have been moved to a separate assembly. This allows NetDiagram controls to be added to the VS2010 toolbox. Now the MindFusion.Diagramming.WebForms.Design.dll assembly must be added to the GAC or copied to the site's bin folder in order to use control designers for the DiagramView, Overview and ShapeListBox controls.

New in Version 3.1.1

Support for custom arrowheads

The type of the HeadShape, BaseShape and IntermediateShape properties of DiagramLink has been changed from enum ArrowHead to class Shape, which is also used to define ShapeNode shapes. The ArrowHeads class now exposes Shape definitions that correspond to the ArrowHead enumeration members from previous versions. It is also possible to assign any Shapes member or a custom shape as an arrowhead. When used for arrowheads, position (50, 0) in the shape definition corresponds to the arrowhead's tip point.

Additional arrowhead enhancements


New in Version 3.1

TreeView nodes

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.

Flowchart graph layout

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.

Topological graph layout

If the underlying graph if acyclic, TopologicalLayout arranges the nodes linearly in such a way that each node comes before all destination nodes of its outgoing links. The links are drawn as curves above the chain of nodes, with their height proportional to the distance between the nodes. If the graph is not acyclic, the layout algorithm finds an ordering with a minimal number of back links, and draws the back links below the chain of nodes.

Link routing enhancements

A much faster link routing algorithm has been implemented. It can arrange a thousand links for just a few seconds, while older versions would require several minutes. Now it is also possible to create custom routing classes to be used when a link must be routed by implementing the ILinkRouter interface. An instance of such class can be set through the LinkRouter property of the Diagram. NetDiagram provides two classes that implement ILinkRouter - GridRouter and QuickRouter. By default LinkRouter is set to a QuickRouter instance.

Adjustment handles styling

The ActiveItemHandlesColor, SelectedItemHandlesColor and DisabledHandlesColor properties have been replaced by ActiveItemHandlesStyle, SelectedItemHandlesStyle and DisabledHandlesStyle. The HandlesVisualStyle objects returned by them provide sub-properties for greater control over the appearance of selection handles. The adjustment handles can now be painted not only in solid color but with arbitrary brushes, such as LinearGradientBrush and TextureBrush objects.


New in Version 3.0.2

LayeredLayout enhancements


Bug fixes

New in Version 3.0.1

BPMN shapes

This version adds predefined Shape definitions that implement the Object Management Group / Business Process Management notation. They are available as members of the Shapes class and have names that start with a Bpmn prefix. They can also be accessed by ID using the FromId method of Shape.

Improved interaction in ImageMap mode


New in Version 3


The OrthogonalLayout class implements an orthogonal graph layout algorithm. Each link is drawn as a chain of alternating horizontal and vertical segments. Nodes are placed in a way that facilitates few links bends and crossings. This 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.


CircularLayout distributes nodes evenly on the circumference of a circle at positions that result in as few link crossing as possible. Set its Radius property to specify the size of the layout circle. Set SiftingRounds to set the umber of fine-tuning crossing-reduction iterations.

Clipboard in ImageMap mode

The InteractivityExtender class implements a clipboard that allows copying and pasting diagram elements. To enable this, set the EnableClipboard property to true. A single diagram item or a selection of items can be copied, cut or pasted using the CTRL+C, CTRL+X and CTRL+V shortcuts. The item copies are saved as a part of the control's view state, and can be pasted even after a postback.

Deleting items in ImageMap mode

To let the user delete selected items in ImageMap mode by pressing the Del key, bind an InteractivityExtender to the DiagramView and set the DelKeyAction property.

Custom item types in ImageMap mode

To let the user draw items from a custom class, set the Behavior property of the diagram view to Custom, and set the CustomNodeType or CustomLinkType property to the Type object that corresponds to your class. Custom node or link types could be used to add new properties to the diagram element, or to implement custom rendering.

ShapeListBox and Overview in ImageMap mode

Now the ShapeListBox and Overview controls can be used in ImageMap mode. To enable user interaction with them, add ShapeListBoxExtender and OverviewExtender to the page and bind them to the respective controls.

Client-side Diagram DOM in ImageMap mode

Now you can do some changes to the properties of diagram items on the client side. When posting back, changed items are sent via JSON to the server where the server side DOM is updated accordingly. To enable this, set the EnableItemsDOM property to true. The JavaScript API is shown in the .js files available under the "Client side DOM" subfolder of the NetDiagram installation folder.

Silverlight mode

Set ClientSideMode to Silverlight and the diagram will be rendered in the browser using the Microsoft Silverlight plugin. At this time the NetDiagram's Silverlight API is not accessible from JavaScript. If you need to handle events or change the diagram on the client side, you can do so by creating a custom Silverlight application and assigning the URL to its .xap file to the SilverlightSource property. You can use the SilverlightApp sample that comes with NetDiagram as a template.

API changes

The OrthogonalLayout class from previous NetDiagram versions has been renamed to OrthogonalRouter.

New in Version 2.1

Interactivity in ImageMap mode

Now diagram elements can be created and modified interactively in ImageMap mode. To enable this, add an InteractivityExtender to the form and set its TargetControlID property to the ID of the DiagramView control. This associates a few JavaScript event handlers with the DIV element rendered by the DiagramView. The scripts render additional DIV or IMG elements to provide visual feedback on the new position of items being modified. When the user releases the mouse button, the mouse coordinates as posted back to the server, where the diagram image is updated to reflect the new item position. For an example showing ImageMap interactivity in combination with an UpdatePanel, check the Interactivity sample included in the NetDiagram package.


New in Version 2.0.1

This is a service release which provides a few bug-fixes and customer requested features:

New in Version 2

Document/view architecture

NetDiagram 2 implements the Model-View-Controller (MVC) architectural pattern. The MVC design pattern as applied to NetDiagram separates the diagram data (model) from its representation to the user (view) and controlling it by the user (controller). According to the MVC design pattern, NetDiagram Version 2 provides two new classes instead of the FlowChart class, namely Diagram and DiagramView.


The ContainerNode class implements diagram nodes that can function as containers for other nodes. Containers can be folded to hide their content, and unfolded to show it again. Containers can be nested one within another, without limitation on the depth of nesting.

New import and export components

In addition to PdfExporter which is available since version 1, NetDiagram 2 includes the VisioExporter, VisioImporter, SvgExporter and DxfExporter components, which provide support for the Microsoft Visio XML Drawing, W3C's Scalable Vector Graphics and the AutoDesk Drawing Exchange formats.

OrthogonalLayout on the client-side

OrthogonalRouter_Broken is a secondary layout algorithm that can be used to arrange links after an initial node arrangement has already been applied. In older versions, it was available only on the server side. Now it can be applied on the client-side as well. Use the createOrthogonalLayout method of ScriptHelper to get an instance of the OrthogonalLayout Java class which can be used from JavaScript.

Arrange multiple graphs

In older versions the layout algorithms placed unconnected subgraphs either in a row or in a column. Now it is possible to place the unconnected subgraphs in such a way that the diagram covers a minimal area. To enable that, set MultipleGraphsPlacement to MinimalArea.

IGraphics interface

Now all drawing is done through the IGraphics interface, for which the control provides GdiGrahics, SvgGraphics and PdfGraphics implementations. Thus the files created by SvgExporter and PdfExporter can contain custom-drawn elements, which you draw either by handling custom drawing events or by implementing the Draw method in your custom item types.