A comprehensive list with the most important features of the control divided into sections. You can find further details about the component's features at the "API Overview" section in the online help. If you need a feature that is currently not supported, you can request it here.
Server side: The .NET library implements a flow-diagramming object model that lets you define structures such as trees, flowcharts and graphs. You can easily access any element in your diagram through the Nodes and Links collections. Rendering of your flowchart as part of an HTML page is also easy - simply call the DiagramView extension method from the MVC view code.
Client side: On the client side your diagram is rendered by a DiagramView JavaScript control that draws its content on an HTML Canvas. The user is able to add nodes and links simply by drawing them with the mouse. You can also use the NodeListView control and create new nodes via drag and drop.
Create new items: just draw them with the mouse or drag and drop them from the NodeListView control, it's that easy.
Modify existing items: handles appear around your selected item to indicate that it's ready for modification. Nodes can be resized horizontally and vertically, dragged or rotated - it's up to you to decide which actions will be permitted and which not. You can modify the links according to their Style and SegmentCount.
Selection: selecting an item is done in the most intuitive way - just hold the control key and either click the item or drag the mouse over the item's area. You can select as many items as you choose and move all of them at
Attaching and grouping of items: MvcDiagram allows attaching a node to another node, establishing a subordinate - master relationship between them.
Collapse and expand of tree branches: 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.
Diagram Nodes: You can choose among various types of content and shapes for your nodes. Place in your diagram icons, text, links, even bitmap images specified via the ImageUrl property. At your disposal are also more than 100 predefined node shapes including those defined in the BPMN 1.2 (Business Process Modeling Notation) standard.
Links: There are:
Creating items: New items are created quickly and intuitively by drawing the item with the mouse. If there is no item, a new one will be created. If there is an item, a link will be created. When the mouse is released, the new item is added to the Nodes or Links collections according to its type. MvcDiagram also exposes methods for creating items programmatically - CreateShapeNode() and CreateDiagramLink().
Deleting items: Items are deleted as easy as they are created: you can tap the Del button when the item is selected or call Nodes.Remove() or Links.Remove() to delete it programmatically. You can delete as many items at once as you have selected. Call RemoveAll to clear the entire diagram from your code.
Accessing items: Items, Links and Nodes are collections that store all your diagram elements according to their type. Each node keeps track of its incoming and outgoing links. Each link keeps track of its origin and destination node.
Selecting items: You can select one item at a time or many at once. If it's one item is selected it becomes the ActiveItem of your diagram. If the items are many, they are placed in the Selection object, which has two properties - Links and Nodes.
Finding items: You can search for an item by its Tag or Id properties - just call FindLink, FindNode, FindLinkById or FindNodeById method. There are also methods for searching for a node by its location - GetNodeAt and GetLinkAt.
Relationship Queries: The Query method traverses your graph by following node/link connections and group's parent/child relationships to find items in specific relation to the current one. For optimum results, the query is executed in several steps. In each step the result set is constructed from the previous result set by following the relationship specified by the current selector.
Spring-Embedder Graph Layout: It simulates a physical system in which nodes repulse each other, and the links between them act as confining springs. Graphs processed by Spring-Embedder have their nodes distributed uniformly across the diagram area.
Grid Graph Layout: This algorithm arranges diagram nodes in a grid, keeping connected nodes close together. The algorithm strives to achieve a small number of link crossings. It is based on an iterative process whose initial steps shuffle the grid nodes randomly. That can lead to very different results each time the algorithm is run.
Simulated Annealing Graph Layout: In the base lies a general-purpose optimization method used to solve large-scale combinatorial problems by simulating the process of heating and cooling of metal to achieve freedom from defects. AnnealLayout assigns costs to graph configurations by evaluating different aesthetic criteria such as distance between nodes, length of links and the number of link crossings.
Circular Graph Layout: The layout distributes nodes evenly on the circumference of a circle at positions that result in as few links crossing as possible. The Radius property specifies the size of the layout circle.
Orthogonal Graph Layout: 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.
Orthogonal Router: This layout helps you make an already arranged graph look even better. It is useful when there are much more links than nodes in a graph. The algorithm strives to achieve certain criteria like minimum link crossings, while preserving as much of the initial node configuration as possible.
Triangular Graph Layout: It 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 bent in order to improve readability.
Topological Layout: In an acyclic graph, the TopologicalLayout arranges the nodes linearly in such a way that each node comes before all destination nodes of its outgoing links. If the graph is not acyclic, the algorithm finds an ordering with a minimal number of back links, and draws the back links below the chain of nodes.
Cascade Graph Layout: It 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.
Tree Layout: Ideal for hierarchical data structures, this algorithm gives you a lot of control over the layout. The type of layout can be directional or radial. You can choose how much space to leave between tree levels and between nodes on the same level. For directional layouts the style of the links in the arranged tree can be set to straight, orthogonal or curved. Global tree direction and alignment can be customized too.
Fractal Tree Layout: That's 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 upper levels, 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.
Layered Graph Layout: The algorithm arranges diagram nodes in layers according to several criteria, most important of which are: connected nodes must be placed close together; links must flow in one direction if possible; links must cross as few layers as possible; links must not cross other links.
Hierarchical Graph Layout: It 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 not to intersect.
Flowchart Graph Layout: FlowchartLayout recognizes program code -like patterns in the graph, such as loops, sequences and if/switch branching, and arranges them recursively. Note that 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.
Workflow Graph Layout: The algorithm works by applying a customizable set of rules for local positioning of connected nodes relatively to each other. On a larger scale, the algorithm keeps groups of nodes separate and prevents links between the groups from crossing nodes.
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.
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.
Binary: It serializes your diagram in byte sequences wrapped by .NET streams. Streams may represent files, memory buffers, communication pipes, TCP sockets, and so on. In serialized form your diagram might be saved in a database record too. Of course, you can later load it just by calling the LoadFromStream() method.
XML Serialization: Your diagram can be saved and loaded in XML with the SaveToXml and LoadFromXml methods. Special events are raised that allow serialization of complex Id and Tag objects, without the need to override the item classes.
Exporting the Diagram: Export your diagram in an image file simply by calling the CreateImage() method. You can also export the flowchart to DXF, PDF, SVG, WMF, SWF and Visio formats. You must only create an instance of the exporter you want to use and call Export() giving the name of the output file. It's all so simple that you simply can't get it wrong.
Import: If you've used Visio 2013 or OpenOffice Draw to create a diagram you can import it with MvcDiagram's Visio2013Importer and DrawImporter. Both importers offer several overloads of the Import method to let you choose how your diagram is imported.
