Nodes are used to host graphical objects (paths or controls) that can be arranged and manipulated on a diagram page.
The relationship between two nodes is represented using a connector. Multiple instances of nodes and connectors form a diagram. Some of the key features are listed below.
Different types of segments are available as connectors between objects.
Bridging is a visual indication of overlapping between two connectors.
Orthogonal connectors take a smart path that avoids overlapping with nodes to which they are connected.
Arrows or decorators at the edges of connectors are used to represent relationships between nodes.
The corner radius can be specified for edges in connectors.
Ports are specific points in a node to which a connector can be connected.
Labels are used to annotate nodes and connectors. The diagram component also makes it easy to edit and align labels relative to the object to which it is mapped.
Interactive features are used to improve the runtime editing experience of a diagram. You can easily edit a diagram with mouse, touch screen, or keyboard interfaces.
Objects can be selected and then dragged, resized, or rotated.
Objects can be aligned easily with gridlines or neighboring objects.
All common actions can also be performed through keyboard input.
The connect tool can be used to create a connection between two nodes, ports, or points.
A connector’s route can be manually edited by dragging thumbs that are visible after selection.
Large diagrams can be explored using the zoom and pan tool.
Multiple nodes or connectors can be grouped together to form a single object.
Drawing tool enables users to draw custom nodes and shapes by clicking and dragging on the diagram surface.
Data binding is used to populate diagrams with nodes and connectors created and positioned based on data from external data sources. Data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties, without having to write any code. The diagram control also supports loading data from an ObservableCollection, List, or IEnumerable collections.
The diagram control has a predefined set of commands. Some standard commands are mapped to keyboard shortcuts. It is also possible to configure new commands and key combinations.
Automatic layouts are used to arrange nodes automatically based on a predefined layout logic. There is built-in support for organizational chart layout, a hierarchical tree layout, and a radial tree layout.
The overview control is used to improve the navigation experience when exploring large diagrams. It displays a small preview of the full diagram page that allows users to perform operations such as zooming and panning within it.
The symbol palette is a gallery of reusable symbols and nodes that can be dragged and dropped onto the surface of the diagram.
It is possible to work with very large numbers of nodes since the diagram uses UI virtualization techniques to selectively load only the objects that lie within the viewport area. Smooth scrolling performance is achieved using a built-in spatial search algorithm that builds an index based on a node’s position.
A diagram’s state can be persisted to XML format and then loaded back using serialization.
Rulers are used to measure the distance of nodes and connectors from the origin of the page. The size and position of objects can also be specified in different units like pixels, inches, and centimeters.
Diagrams can be easily exported as .png, .jpeg, .bmp, and other image files, and can also be printed as documents.
Several other features are available that enhance the diagramming experience.
Gridlines provide guidance when trying to align objects.
The drawing surface can be given a page-like appearance using page size, orientation, and margins.
Frequently used commands can be easily mapped to the user handles.
Frequently used commands can be easily mapped to the context menu.
Diagram builder is a diagramming application created using the diagram control. It is used to create, edit, save, export, and print diagrams. It has a symbol palette, property editor, overview window, toolbox, and menu to provide a great editing experience.