Version History

The list below describes past changes and additions to NetDiagram:

New in version 6.3

Control nodes

ControlNode objects display custom HTML content, specified via their Template property. A node's DOM structure is created inside the Content div element, which is then rendered on top of the diagram canvas. Note that this prevents ControlNodes drawing in diagram' usual Z order, and they will always appear on top of other diagram items.

By default the diagram intercepts mouse events of all hosted html elements to enable moving nodes or drawing links. You can specify that interactive elements, such as buttons or text boxes, should receive input instead by setting their data-interactive attribute to true.

You can register event handlers for elements in the template by assigning function names to data-event attributes in the form data-event-'eventName'='handlerName'. Alternatively, you can attach event listeners using DOM API once NodeDomCreatedScript is called to signify that content is available. E.g. access child elements by calling args.getNode().getContent().querySelector(...) and attach handlers via elements' addEventListener method.

ControlNodes create DOM elements from their template only in the main diagram, and render images instead when shown in Overview or NodeListView. Note that in this case image elements in the template will render only if specified in base64 format. The Utils.toDataUrl method helps you convert an image URL to base64 data URL.

Video nodes

VideoNode objects display video streams, along with UI elements to play, pause, seek and change volume. Call node's setVideoLocation method to specify its video URL. Auto-playing is not supported at this time, and the video can be started only by users clicking the play button. VideoNode is built around Video component, which can also be used in CompositeNode templates.

Button components

Composite nodes can now contain buttons. Button components respond to user clicks by calling the JavaScript function whose name is assigned to their clickHandler attribute. A button can show a text label assigned to the text attribute, or an image whose URL is assigned to imageLocation. The following example adds a button to CompositeNode template:

JavaScript  Copy Code
    component: "Button",
    brush: "#ccc",
    text: "Delete",
    width: 30,
    cornerRadius: 3.5,
    clickHandler: "onDeleteClick"

Virtual scroll improvements

  • The control now handles mouse wheel events to scroll the diagram when virtual scrolling is enabled.
  • DOM elements that implement virtual scroll mode now use CSS grid layout. You might need to adjust page layout to apply size constraints on the diagram div or its parent. For compatibility with older browsers, you can set CompatConfig.gridLayout = false to fall back to the absolute positioning from previous versions.
  • VirtualScroll mode is now enabled by default.


  • Mouse pointer position is now provided as argument to nodeCreated and linkCreated events.
  • TopologicalLayout can now be applied on client-side.
  • Visibility property added to CompositeNode components lets you keep invisible components in the template.
  • General performance improvements.
  • Collapse / expand icon is now drawn correctly for CompositeNode when Expandable is enabled.
  • Json deserialization no longer creates undo records.
  • Content of CompositeNodes is now clipped by default if Shape in the template is marked with isOutline attribute. To disable that, set ClipToOutline to false.
  • Set ExpandButtonAction to RaiseEvents and +/- buttons of Expandable nodes will only raise an expandButtonClicked event instead of expand or collapse the tree under that node. You can use this to implement custom logic for the +/- button.

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.


  • TableNode.resizeToFitText improvements and fixes.
  • containerChildAdding event handlers can stop propagation of the event up in the container hierarchy by calling setHandled.
  • LayeredLayout now uses stable sorting and should always create same results when applied to same graph.
  • For consistency with client side API, the .NET Diagram class now provides Arrange methods that take a layout object as argument.
  • Arrange method of .NET ContainerNode arranges the child items inside a container using the specified layout class.
  • SvgImage mode adds DiagramView specific prefixes to SVG <defs> elements, allowing for more than one DiagramView on the page.

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.


  • The Border component draws frame lines around and background behind other components in CompositeNode templates.
  • NodeListView now displays nodes' ToolTip texts when the mouse hovers over an item in the list view.
  • Fix for FlowchartLayout creating node overlaps in some situations.

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

  • resizeToFitText method and EnableStyledText property added to the ContainerNode class.
  • containerChildRemoved event now also raised when dragging multiple selected child nodes out of a container.
  • Improved handling of folded containers by automatic layout classes and link routing methods.

Visio2013Exporter improvements

  • Visio2013Exporter now does full rendering for table, container and composite nodes.
  • Visio2013Exporter renders custom nodes that draw themselves through the IGraphics interface.
  • Coordinates of exported link end points are now assigned Visio formulas and follow the borders of resized nodes.


  • The Text property of nodes and links has been moved to the base DiagramItem class, allowing for easier text search and edit operations in the diagram. The Caption property of container and table nodes now only wraps the base Text property. Map and Visio nodes now render Text too.
  • Typescript definitions now available for the Diagramming.Lanes namespace.
  • Auto-arranged link labels now can optionally be placed over link segments and containers by setting diagram's AutoArrangeAvoidSegments and AutoArrangeAvoidContainers properties to false.
  • The dispose method of Diagram class now removes a focus-proxy DIV element from the page.
  • Improved text alignment for DiagramLink texts.
  • The serializeTag event lets you save complex Tag and Id objects in XML format.
  • Various arrowhead rendering fixes.

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

  • ScaleMode enumeration and properties added to Overview control implement several scaling modes. The FitAll element corresponds to the original behavior where the Overview always fits diagram's contents. FixedScale mode applies the scale specified via overview's ScaleFactor property. CombinedScales mode multiples overview's ScaleFactor by diagram view's current ZoomFactor.
  • If AllowZoom is enabled, users can zoom the diagram by resizing the overview's viewport tracking rectangle.
  • MinVisibleFontSize specifies a threshold value that hides text if scaled font sizes become smaller.

Visio2013Exporter improvements

  • Visio2013Exporter processes links' arrowheads.
  • Visio2013Exporter preserves the diagram Z order.
  • Visio2013Exporter exports links' Text and Labels.
  • Visio2013Exporter exports Image of ShapeNode objects.

LayeredLayout improvements

  • The KeepLinkShapes property of LayeredLayout lets you preserve initial Shape value of links when LinkType is set to Cascading. The orthogonal path applied by latter property is approximated using respective link shape.
  • Fix for wrong link positions when the diagram contains folded containers.
  • Fix for unnecessarily large distance between subsequent layers after a long node appears in a layer.
  • LinkPadding property added to LayeredLayout specifies how much space to leave between links when LinkType is set to Cascading.

PathFinder improvements

  • Speed of FindAllCycles and EnumAllCycles methods improved.
  • FindAllCycles and EnumAllCycles no longer report mirrored versions of cycles in undirected mode.


  • ImagePadding property of ShapeNode and Cell lets you set padding space between elements' borders and their Image.
  • Export overloads that write to Stream objects added to PdfExporter, VisioExporter and Visio2013Exporter.
  • Non-blocking ArrangeAsync methods run layout calculations in a background task. This is only available in .NET 4.5 build of the diagram assemblies.
  • MaxJsonLength specifies the maximum length of JSON strings that are accepted by internal JavaScriptSerializer instances.

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.

  • Create a MouseInputDispatcher instance and call its methods:
    JavaScript  Copy Code

    onMouseDown: function (position, button)
    onMouseMove: function (position)
    onMouseUp: function (position, button)

    where position in Point instance specifying logical coordinates in the diagram (in current measure unit, not scaled by zoom factor). The results of called mouse methods will depend on diagram's current Behavior, e.g. you could assert that a sequence of down/move/up events creates a ShapeNode when Behavior is set to DrawShapes.
  • Create an instance of controller class and call its start, move and commit methods. This would not depend on the value of diagram's Behavior, but could be still affected by other behavioral properties such as AllowSelfLoops and AllowUnconnectedLinks.
  • Check assertions after replaying a recording on a saved diagram.

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


  • CaptionBackBrush and FoldIconSize properties added to ContainerNode.
  • Multiple rotation of nodes improved, now node angles are modified by same rotation delta calculated from mouse position instead of pointing all rotation handles in mouse direction.
  • CustomLinkType property now supported in Canvas mode.
  • The LinkPadding property of LayeredLayout specifies the padding space between Cascading links.
  • Export overloads that write to Stream objects added to PdfExporter, VisioExporter and Visio2013Exporter.
  • ClientScriptMode="JQuery" now supports version 3 of JQuery.

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

  • The component no longer keeps a separate segmentCount field, removing a common source of errors. The SegmentCount property now calculates its value from ControlPoints elements. The UpdateFromPoints(updateGroups, updateSegments) overload has been removed too.
  • SegmentCount setter no longer refuses changing number of segments if auto-routing is enabled or the link is a self-loop.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points:

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.


  • NodePastedScript and LinkPastedScript client-side events raised when items are pasted from the clipboard.
  • PdfExporter now creates page hyperlinks if HyperLink is set to a value in "page://{number}" format, e.g. set "page://1" to open the second PDF page when the item is clicked
  • TypeScript definitions for the client-side Diagramming API are now provided in jsdiag.d.ts file.

Fixed bugs

  • CanvasVirtualScroll mode fixed for parent div size specified in percent units.
  • Fixed bug where the ExpandOnIncoming property specifying link direction for collapse/expand actions did not work correctly.
  • Removed several global JavaScript variables created inadvertently by the control.
  • Fixed bug where ShapeNodes' Image did not zoom correctly in ImageMap mode for some ImageAlign values.

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

  • Shape library files and ShapeLibraryLocation properties of DiagramView and ShapeListBox can now be used in Canvas mode.
  • Items can now be deleted using Backspace key when running on Mac.
  • Caption divider line in TableNode and ContainerNode is now rendered clipped when caption height is smaller than corner radius.
  • The TooltipDelay property specifies the delay in milliseconds before showing tooltips.
  • The Orientation property of NodeListView lets you set the view's orientation to Horizontal or Vertical (members of Orientation enum).
  • Fixed overlaps in client-side TreeLayout when arranging nodes of different sizes.
  • Fixed a bug where deserialization of custom item classes worked correctly only if their names contained Node or Link suffix.
  • MsAjaxLocation and JQueryLocation properties let you change the location of external script libraries.

ImageMap mode improvements

  • Image generator implementation changed from Page to IHttpHandler, this makes it more lightweight avoiding the full page life-cycle.
  • Image generation is now implemented by the built-in ImageHandler class inside MindFusion.Common.WebForms assembly and it no longer requires adding external .aspx file to the project. Instead, it can be listed in web.config file:
    XML  Copy Code
        <add name="ImageHandler" path="ImageGen.ashx" verb="GET"
            type="MindFusion.Common.WebForms.ImageHandler, MindFusion.Common.WebForms"/>
  • For convenience, there is still optional ImageGen.ashx provided as external file for easier set-up of the project (add existing file instead of changing web.config).
  • ZoomControl no longer draws using <canvas> element when running in ImageMap mode, but uses ImageHandler to generate bitmaps.

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:

  • <b> specifies bold text
  • <i> specifies italic text
  • <u> specifies underlined text
  • <color=value> specifies text color
  • <br /> specifies line break

Improved text rendering in Canvas mode

  • General text rendering quality improved. The component removes scale transformations applied for MeasureUnit and ZoomFactor before drawing text on the canvas, and instead specifies a scaled font size, which helps improve text appearance in Firefox and older versions of Chrome.
  • Now items' text can be drawn underlined. To enable this, set the underline attribute of the Font class.
  • Font styles can be specified via Style instance by setting its FontStyle property.

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.


  • Canvas mode can render items using dashed lines in browsers that support the setLineDash function. To enable this, set pen's DashStyle property for DiagramItem or the StrokeDashStyle property of Style.
  • Client-side TreeLayout supports organizational charts with assistant nodes as in Microsoft Office diagrams. To mark nodes as assistants, set node.LayoutTraits[TreeLayout.Assistant] to a member of the AssistantType enumeration . Set TreeLayout.enableAssistants = true to arrange assistant nodes in a separate branch between the main node levels.
  • Specify if separate connected components of a graph should be arranged horizontally or vertically relatively to each other by setting the multipleGraphsPlacement attribute of layout classes.
  • The type of Margin property of LinkLabel has been changed from number to Thickness, letting you specify different margin sizes at each side of the label.
  • Masters for Start and Arrow7 shapes added to VisioExporter template file.
  • VisioImporter now tries to preserve Shape of ShapeNode objects when importing from files created by VisioExporter.
  • Fixed FormatException caused by changed type of scroll position from integer to floating point number in Chrome version 39.

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

  • The ShadowsStyle property is now supported in Canvas mode.
  • Number of link segments can now be set from client-side scripts by calling the setSegmentCount method.
  • The BackgroundImageAlign property is now supported in Canvas mode.
  • The TextPadding property of items is now supported in Canvas mode.
  • Nodes of all classes can be rotated.
  • Fixed a bug where the Alpha value of colors was lost after post-back.


  • Set the Brush property of LinkLabel class to fill the background of labels.
  • VisioExporter export speed has been improved greatly for large diagrams.

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

  • Support for multi-segment links.
  • Bezier links are now exported as NURBS lines.
  • Support for rotated nodes.
  • Proper scale for all MeasureUnit values.
  • Support for gradient brushes.
  • Support for semi-transparent colors.


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.


  • Layout algorithms now automatically resize diagram's Bounds if it's not large enough to fit the arranged content. To revert to old behavior and keep fixed Bounds size, set GrowToFit to false.
  • Fixed hit-testing offset bug when using version 4 of Microsoft Ajax in Chrome browser.
  • Fixed error when using gradient brushes for painting swimlane grid cells.
  • The default value of ClientSideMode has been changed to Canvas. If you were using JavaApplet mode in old versions relying on default value, you must now set it explicitly.

New in version 5.1

Canvas mode improvements

  • Undo and redo now supported. Call setUndoEnabled on client side to start tracking changes. Call undo or redo methods to restore diagram state. Actions cannot be undone after postback.
  • Apply animations to diagram elements. The Animation JavaScript class can be used to animate values of various properties of nodes and links. Detailed overview is available in the Animations topic.
  • Clipboard support; call the copyToClipboard, cutToClipboard and pasteFromClipboard methods to copy or paste selected items.
  • The swimlane grid is now rendered in Canvas mode.
  • The magnifier tool is now supported in Canvas mode.
  • ModificationStart, AutoResize and AutoScroll properties now work in Canvas mode.
  • enterInplaceEditMode and leaveInplaceEditMode events raised when the control shows or hides the in-place edit box.
  • linkPointed and nodePointed events raised when the mouse hovers over an item.
  • SelectOnly behavior is now supported in Canvas mode.

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

  • The Item argument of ImportItem event handlers is now pre-set to a DiagramItem instance created for the imported Visio shape, letting you avoid parsing some standard data such as Bounds or Text. You can either modify this item's properties, or replace it with a new instance of a different type.
  • Fixed a crash when a shape master does not have a name attribute (this happens with custom stencils).
  • Fixed a crash when theme1.xml is missing from the imported vsdx archive (this happens with files converted from old Visio versions to 2013 format).
  • Fixed a parse exception for some non-English locales.
  • Fixed a bug where one-segment connectors were imported at wrong positions.

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

  • RoundedLinks and RoundedLinksRadius properties are now supported in JavaApplet mode.
  • AutoSnapDistance is now honored in JavaApplet mode; links drawn interactively snap to a nearby node at specified distance when AutoSnapLinks is enabled.
  • createFontEx method added to ScriptHelper creates bold, italic and underlined fonts.
  • Permissions attribute added to applet manifest file to allow loading the applet under Java 7 update 51.


  • Several new predefined shapes available in the Shapes class - RightTriangle, Decagon, Trapezoid, Star4Pointed, Star5Pointed, Star6Pointed, Star7Pointed, Star16Pointed, Star24Pointed, Star32Pointed, Donut and Plaque.
  • Support for Visual Studio 2013.

New in version 5.0.3

Canvas mode improvements

  • The HyperLink property of DiagramItem is now supported in Canvas mode. Hyperlinks can be accessed on the client side by calling the getHyperLink() method of objects.
  • ControlLoadedScript client side events are now raised in Canvas mode.
  • The Overview control no longer creates a Div element on the page, which avoids problems when the overview is created inside a popup window or iframe.
  • The LinkHitDistance property is now supported in Canvas mode.
  • The CanvasVirtualScroll property of DiagramView enables virtual scroll mode.


  • The MeasureUnit property now supports Centimeter and WpfPoint values. The latter allows loading diagram files saved by WPF and Silverlight versions of the control with their default units.
  • SwimlaneLayout now honors the Anchoring.Keep property value.
  • New line and quote characters in Tag strings are now escaped when passed to client-side click events in ImageMap mode, avoiding script errors.
  • Fixed security exception in ASP.NET 4 version of VisioImporter.
  • Silverlight front-end is no longer supported, the respective ClientSideMode enumeration member has been removed.

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

  • child nodes are now drawn by their containers; when containers overlap, the children of a lower container cannot appear in front of the upper container anymore
  • the ClipChildren property specifies whether to clip child items to container’s boundaries
  • the ZIndex property no longer changes automatically when dropping nodes into a container
  • the Visible property of child items no longer changes when folding or unfolding containers; this lets you keep invisible items inside containers

PdfExporter improvements

  • Improved handling of clip regions in custom drawing code
  • PdfExporter now honors the target Rectangle property of linear gradients
  • PDF shadings now include all colors from a ColorBlend
  • more precise character widths set when text includes both eastern glyphs and Latin characters
  • more precise widths set for Cyrillic characters
  • PdfExporter is now thread-safe

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

  • Items now cast shadows.
  • Items can be Locked.
  • Containers are now available in Canvas mode too. On the client side they are implemented by the ContainerNode JavaScript class.
  • Tables are now available in Canvas mode too. On the client side they are implemented by the TableNode JavaScript class.
  • Items can show tooltips.

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.


  • The value of DiagramItem.ZIndex property is no longer required to be unique and smaller than the number of items;
  • The Shape property in ContainerNode and TreeViewNode can be set to Rectangle or RoundedRectangle;
  • Diagram item collection types now implement the generic IList interface;

API changes

  • RotationAngle property moved from ShapeNode to base DiagramNode;
  • Inherited node classes should now override the DrawLocal method instead of Draw to get built-in support for node rotation. Overriding Draw still works, but any custom drawing code would have to take care of rotation;
  • Type of Group.FollowMasterRotation changed from boolean to enum GroupRotation;
  • LinkStyle enum renamed to LinkShape;
  • DiagramLink.Style property renamed to Shape;
  • TableStyle enum renamed to SimpleShape;
  • TableNode.Style property renamed to Shape;
  • The type of TextColor and CaptionColor properties have been changed to Brush; the properties have been renamed to TextBrush and CaptionBrush;
  • The default value of Pen, Brush and Font properties of items is now null (Nothing in Visual Basic) to allow for inheritance from DiagramItem.Style or Diagram.Theme. Custom drawing code in inherited classes should use the values returned by EffectivePen, EffectiveBrush or EffectiveFont to get the actual object that should be used when drawing;
  • ZLevelUp, ZLevelDown, ZTop and ZBottom methods now require a boolean argument specifying whether items are allowed to change layers;
  • ZIndex no longer corresponds to the position of items within Diagram.Items collection. Items however still contains the items sorted by Z order, as defined by item's ZIndex and LayerIndex;
  • Event handler delegates have been removed; events are now defined as generic EventHandler specialized via EventArgs type. For example the type of NodeCreated is now EventHandler<NodeEventArgs>;

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:

  • bool ShowRuler: show or hide the Ruler.
  • ShowShapeListBox ShowShapeListBox: can be set to None/Left/Right.
  • ShapeList ShapeListFilter: a list of shapes that should be shown by the ShapeListBox.
  • Size ShapeListIconSize: specifies the size of ShapeListBox icons.
  • Color ShapeListFillColor: specifies the color of ShapeListBox icons.
  • bool ShowOverview: show or hide the Overview.
  • string OverviewTitle: title of the Overview window.
  • bool OverviewFitAll: enables or disables FitAll mode for the Overview control.

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


  • User interaction modes (Behavior property) implemented in Canvas mode.
  • Validation events for creating, modifying and deleting items implemented in Canvas mode.

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

  • SvgExporter supports dashed pens.
  • Support for shapes with alternating fill style added to PDF and SVG exporters.
  • Improved quality of curved shapes in SVG.
  • PdfExporter supports bitmaps with Format32bppPArgb pixel format.

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


  • The ShapeDesigner tool now supports filled decoration objects (used in BPMN shapes).
  • ShapeDesigner allows drawing the shape's text region outside the shape outline.
  • A new LoadFromXml overloaded method allows loading diagram items without changing the diagram's properties.
  • UBendMaxLen property added to QuickRouter.
  • Printing and clipboard support in Silverlight mode.
  • The SuppressUnmanagedCode and FontCachePath properties allow using PdfExporter under Medium Trust security level.
  • Node rotation in Silverlight mode.
  • The Toolbox Installer tool can be used to automatically add the NetDiagram components to a tab of the Visual Studio toolbox.
  • Shadows can be painted using any brush type and not only in solid color. The ShadowColor property has been replaced by ShadowBrush.
  • createTopologicalLayout method added to ScriptHelper.
  • createChangeItemCmd method added to ScriptHelper.
  • BackgroundImageURL can be used in ImageMap mode.
  • SerializationBinder allows loading diagram files that contain serialized instances of renamed types.

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.


  • The JavaArguments property lets you specify runtime arguments for the Java plug-in, such as the amount of memory allocated.
  • The Focusable property can be used in ImageMap mode to prevent the control from getting the keyboard focus when clicked.
  • The ShowLabels property specifies whether the ShapeListBox control should render shape labels.
  • The createColor method of ScriptHelper creates a Color instance.
  • Use the createPaper and createPageFormat methods of ScriptHelper to create objects required for print job setup.
  • createSize and createSizeF methods of ScriptHelper create Dimension and Dimension2D instances.
  • DiagramApplet provides local clipboard support to avoid security warnings.
  • Client side events are now raised in Silverlight mode.
  • ShapeFilter can be used in JavaApplet mode.

New in Version 3.0.2

LayeredLayout enhancements

  • If the underlying graph allows that, nodes can be assigned to layers in a way that allows all links to point to the same direction. To enable that, set EnforceLinkFlow. Note that with this option the layout might cover a larger area and lead to more link crossings.
  • The IgnoreNodeSize property has been implemented in the Java applet's LayeredLayout class. It can be set on the client side using the setIgnoreNodeSize method.
  • Nodes can be assigned to specific layers by assigning a Layer key to their LayoutTraits property. To enable support for custom layers, set EnableCustomLayers.


  • ShapeLibraryLocation can be set to a relative path to allow loading a shape library automatically both from the server and the client side.
  • ImageMap mode now allows interactively connecting individual TableNode rows.
  • The ShapeLibraryLocation property of ShapeListBox is now saved the view state and allows loading a different shape library dynamically.

Bug fixes

  • Fixed an exception when loading shape libraries created with pre-V3 versions of the control.

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

  • ShapeBrush and TableBrush are used to fill the DIV element that represents new nodes being drawn.
  • Intermediate control points of links can be moved to a new position.
  • TableNodes are rendered as HTML tables while being drawn.
  • Keyboard focus management improved; ClientFocus property added.


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.


  • ScriptHelper now contains methods that let you define AnchorPattern objects on the client side: createAnchorPattern, createAnchorPoint, anchorPatternFromId.
  • Support for Java 6 updates 10 and 11 versions of the Java Runtime Environment.
  • The CreatingAreaElement event lets you add custom attributes to the AREA elements rendered for diagram items.

New in Version 2.0.1

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

  • The LinkTarget property specifies the target window for the HyperLink of diagram items.
  • Now the Overview control can be bound to a DiagramView placed inside a web part.
  • Fixed a bug in ImageMap mode where changing the ZoomFactor caused displacement of the AREA elements generated for items.
  • Fixed a bug where the +/- icon would not show for Expandable table nodes.

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.