Diagramming

Create custom diagrams by positioning shapes on the diagram surface using an automated layout algorithm or by building them from scratch. The Diagram Control allows users to quickly and easily assemble a variety of diagrams, including flowcharts, organizational charts, mind maps, and floor plans. Connector nodes, dynamically resizable gridlines, and snap-to features, along with alignment, order, delete, and copy and paste functions, allow for precision tuning to any and all diagrams.

Node

Nodes are used to host graphical objects (path or control) that can be arranged and manipulated on a diagram page. The appearance of a node can be fully customized.

Connectors

Connectors are used to represent relationships between nodes. There are several types of connector available. Corner radius support lets you create the connectors with rounded corners. Line Bridging creates a bridge for lines to smartly cross over other line at points of intersection.

Ports

Ports are special connection points on a node.

Label

Nodes and connectors can be annotated with text using labels. Labels can be richly formatted and can be edited at runtime just by double clicking.

Groups

Nodes and connectors can be grouped together and be accessed as a single objects.

Grouped nodes
Group rotation
Resize Group

Layout Panel

Diagram provides a rich set of built-in layout panels that control the layout of the diagram elements. Panels come in two different flavors, with each of them having its own way of dealing with layout.

  • Canvas: A Canvas panel is used to position child elements by using margin values that are relative to the canvas offset. Elements are positioned absolutely using its margin values.
  • Stack: Elements are stacked in a single line either vertically or horizontally. It will control spacing by setting a margin properties of child and padding properties of group .By default, a Stack Panel’s orientation is vertical.
Canvas
Stack

Symbol Palette

The Symbol palette is a gallery of reusable symbols that can be dragged and dropped on to the surface of the diagram.

Appearance

Several customization options are provided to change the look and feel of different portions of a diagram, enabling the creation of professional-looking diagrams.

Interaction

The Diagram control has as rich set of interactive features that enables users to add, edit/modify, delete objects (like nodes and connectors) in diagrams at runtime using keyboard, mouse or touch devices.

Restrictions

Editing restrictions can also be enforced on objects to meet business needs.

Align objects

There are several helper options available to easily align objects on the diagram surface.

  • Gridlines that help to align multiple objects in the same line.
  • Guidelines that help to indicate object near its vicinity.
  • Nudging which helps for micro adjustments.
  • There are also other alignment, ordering and sizing commands.

Undo Redo

While editing if a user is not satisfied in with recent changes made, it is possible to make corrections by undoing and re-doing the recent changes as desired.

Clipboard

Cut, Copy, Paste and Duplicate functionality is used to clone one or more copies of the selected objects.

Pan and Zoom

When a diagram is larger than the available space, scrollbars will automatically appear. The diagram can be zoomed in or out to explore specific areas.

Serialization

Diagram’s state can be saved as a file and then loaded back to restore state.

Layout

Several automatic layout algorithms can transform data into visually rich diagrams. Using manual layout rules, you can produce complex layouts with precision.

Overview Control

The Overview control enables to focus a particular area of the entire content. It displays a preview of the entire content with a Zoom Pan window. The Zoom Pan window is a resizable red rectangle, which helps to focus the required area.

Swimlane

A swim lane is a visual element used in process flow diagrams, or flowcharts. Swim lanes may be arranged either horizontally or vertically.

Exporting

Diagram content can be exported as an image in JPEG, PNG, BMP, and GIF formats.

Localization

Localization is the process of customizing the User Interface (UI) in a language and culture specific to a particular country or region to display regional data. Localization is the key feature that provides solutions to global customers with the help of localized resource files provided by controls.

HAPPY CUSTOMERS ARE VOCAL CUSTOMERS

The highest-rated component studio on Componentsource

Excellent toolset and a great support team. I’ve been using Syncfusion’s products for a couple of years, and they save me a lot of time on ASP/MVC development. I’ve found that with every new development, all the components I need are already in my subscription bundle. I really enjoy the product updates with new functionality, including the beta add-ons.

Oswaldo Diaz

Product manager, Hipermetrics.com

Syncfusion’s Windows Forms and WPF controls allowed us to create an application for traders that provided charts of proprietary information that updated every few seconds. The chart control saved me from having to write my own.

Tanveer Ansari

Consolidated Trading

Syncfusion's tools provide features right out of the box, such as charts, layout controls, maps, and reporting. If these controls were designed and implemented manually, the development process would be slowed exponentially!

Giancarlo Lelli

Software developer