The React diagram is a feature-rich library for visualizing, creating, and editing interactive diagrams. It supports creating flow charts, organizational charts, mind maps, and BPMN, either through code or a visual interface.
The traditional organization chart is the graphical representation of an organization’s structure. Its purpose is to illustrate the relationships and relative ranks of job positions within the organization. Our React diagram library provides a built-in layout to create an organizational chart diagram in an easier way by using layout properties.
A mind map is a diagram that helps present a visual representation of information where the central idea is placed in the middle and associated topics are arranged around it. You can use layout and data binding properties to build the mind map diagrams.
A flow chart is a graphical or symbolic representation of a process. Our React diagram library provides most commonly used flowchart shapes as ready-made objects and you can add them in a diagram surface in a single call.
Visualize any graphical objects using nodes, which can be arranged and manipulated on a diagram page.
The relationship between two nodes is represented using a connector. Some of the key features are listed below.
There are straight, orthogonal, and curved connector types. You can choose any of these based on the type of diagram or relationship between the connected notes.
Bridging clearly indicates a connector’s route and makes it easier to read where connectors overlap each other in a dense diagram.
Use decorators and arrows to indicate flow direction in flow charts or state diagrams. You can also build your own custom decorator based on type of diagram.
A connector’s look and feel can be customized any way you want. The control provides a rich set of properties through which you can customize connector color, thickness, dashed and dotted appearance, rounded corners, and decorators.
Connect to specific places on a node through different types of ports or connecting points.
Additional information can be shown by adding text or labels on nodes and connectors.
You can add and edit text at runtime. You can mark it read-only if it should not be edited.
Add any number of annotations and align them individually.
Annotations include sophisticated alignment options: * Place inside or outside a node. * Place at the source or target end of a connector. * Automatically align when a node or connector moves.
Interactive features are used to improve the runtime editing experience of a diagram. 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 even resize multiple objects at the same time.
Rotate selected nodes 360 degrees.
Precisely align nodes, connectors, and annotations easily while dragging just by snapping to the nearest gridlines or objects.
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, z-order controls which object needs to be on top or at the bottom.
You can combine multiple nodes into a group and interact with them as a single object. Groups can also contain another group.
Frequently used commands like delete, connect, and duplicate can be shown as a button near a selector. This makes it easy for users to quickly perform those operations instead of searching for the correct buttons in a tool box.
Alignment commands enable you to align selected objects such as nodes and connectors with respect to the selection boundary.
Arrange selected objects in equal intervals.
Resize selected objects to have equal sizes.
Align selected objects horizontally or vertically.
Automatic layouts are used to arrange nodes automatically based on a predefined layout logic. There is built-in support for an organizational chart layout, a hierarchical tree layout, a radial tree layout, and mind map diagrams.
Draw nodes and link them interactively by just clicking and dragging on the canvas surface.
When a diagram is large, it can be viewed closer or wider by zooming in and out. Also, you can navigate from one region to another by panning through the diagram.
Includes a gallery of stencils, reusable symbols and nodes that can be dragged and dropped onto the surface of the diagram.
The overview panel 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 zoom and pan within it.
Rulers are used to measure the distance of nodes or connectors from the origin of the page. This is especially useful in creating scale models.
There are several other features that enhance the diagramming experience.
Diagrams can be easily exported as .png, .jpeg, .bmp, and .svg image files.
Diagrams can be printed as documents.
You can save your diagram state in JSON format and load it back later for editing using the serializer.
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 also supports loading data from JSON format.
Gridlines provide guidance when trying to align objects.
The drawing surface can be given a page-like appearance using page size, orientation, and margins.
Additional information about a node can be viewed using tooltips.
Frequently used commands can be easily mapped to the context menu.