The React Diagram is a feature-rich library for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts either through code or a visual interface.
The React Diagram provides all the standard flowchart shapes as ready-made objects to build flowcharts, making it is easy to add them to a diagram surface in a single call.
Built-in automatic layout algorithm specifically made for organizational charts to arrange the parent and child node positions automatically.
The built-in automatic layout algorithm is also built for mind map diagrams, which allows you to define which node should be at the center and which nodes should be placed around the center node in the diagram surface.
Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a diagram page. They allow the following:
A connector represents a relationship between two nodes. Some of the key features like connector types, bridging, and more are listed below.
The React Diagram provides straight, orthogonal, polyline, and curved connector types. You can choose any of these based on the type of diagram or relationship between the connected nodes.
Use bridging (line jumps) to illustrate a connector’s route, making it easy to read where connectors overlap each other in a dense diagram.
Use different types of predefined arrowheads to illustrate flow direction in flowchart diagrams. You can also build your own custom arrowheads.
Like nodes, the connector look and feel can also be customized any way you want. The React Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators.
Additional information can be shown by adding text or labels on nodes and connectors.
You can add and edit text at runtime and mark it read-only if it should not be edited.
Add any number of labels and align them individually.
Labels include sophisticated alignment options: Place inside or outside a node, or at the source or target end of a connector. Automatically align when a node or connector moves.
Use interactive features to improve the editing experience of a diagram at runtime. Furthermore, you can easily edit a diagram with mouse, touchscreen, or keyboard interfaces.
Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.
You can resize a node in eight different directions and lock a node’s aspect ratios to keep its shape. You can also resize multiple objects at the same time.
Rotate selected nodes from 0 to 360 degrees.
Don’t worry when you edit by mistake—undo and redo commands help to easily correct recent changes.
Cut, copy, paste, or duplicate selected objects within and across diagrams.
When multiple objects overlap, the z-order controls which object is at the top and which is at the bottom.
Precisely align nodes, connectors, and annotations easily while dragging just by snapping to the nearest gridlines or objects.
You can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible with our React Diagram component.
Frequently used commands like delete, connect, and duplicate can be shown as buttons near a selector. This makes it easy for users to quickly perform those operations instead of searching for the correct buttons in a toolbox.
Our React Diagram has predefined alignment commands that enable you to align the selected objects nodes and connectors with respect to the selection boundary.
Spacing commands enable you to place selected objects on the diagram at equal intervals from each other.
Use sizing commands to equally size selected nodes with respect to the first selected object.
All the nodes or connectors in the selection list can be aligned at the left, right, or center horizontally, or aligned at the top, bottom, or middle vertically with respect to the selection boundary.
Rulers allow you to measure the distance of nodes or connectors from the origin of the page. This is especially useful in creating scale models.
The overview panel allows you to improve the navigation experience when exploring large diagrams. It displays a small preview of the full diagram page that allows users to zoom and pan within it.
View a large diagram closely or assume a wider view by zooming in and out. Also, navigate from one region of a diagram to another by panning across the diagram.
Populate diagrams with nodes and connectors created and positioned based on data from data sources. In addition, 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 component also supports loading data from a list or IEnumerable collection.
Print diagrams from the browser. You can also customize the page size, orientation, and page margin, and fit a diagram to a single page.
In addition to all the features listed thus far, there many more that enhance the diagramming experience.
Gridlines provide guidance when trying to align objects.
Give a page-like appearance to the drawing surface using page size, orientation, and margins.
Use tooltips to provide additional information about a node.
Easily map frequently used commands to the context menu.
The React Diagram control is also available in Angular, Vue and Blazor frameworks that are built from their own TypeScript libraries.
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.