We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Vue Diagram Library

The Vue 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.

Organization chart

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 Vue diagram library provides a built-in layout to create an organizational chart diagram in an easier way by using layout properties.

Organizational Chart

Mind map

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.

Mind map

Flow chart

A flow chart is a graphical or symbolic representation of a process. Our Vue 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.

Flowchart


Nodes

Visualize any graphical objects using nodes, which can be arranged and manipulated on a diagram page.

  • Includes many predefined standard shapes.
  • Easily create and add custom shapes.
  • Fully customize the appearance of a node.
  • Design a node UI template and reuse it across multiple nodes.

Connectors

The relationship between two nodes is represented using a connector. Some of the key features are listed below.

Connectors

Types

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

Bridging

Bridging clearly indicates a connector’s route and makes it easier to read where connectors overlap each other in a dense diagram.

Decorators

Decorators

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.

Connector Appearance

Appearance

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.


Ports

Connect to specific places on a node through different types of ports or connecting points.

Ports


Labels

Additional information can be shown by adding text or labels on nodes and connectors.

Annotation editing

Edit

You can add and edit text at runtime. You can mark it read-only if it should not be edited.

Multiple annotations

Multiple annotations

Add any number of annotations and align them individually.

Alignment

Alignment

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

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.

Node Dragging

Select and drag

Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.

Node Resizing

Resize

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.

Node Rotation

Rotate

Rotate selected nodes 360 degrees.

Snapping

Snap

Precisely align nodes, connectors, and annotations easily while dragging just by snapping to the nearest gridlines or objects.

Undo and redo

Undo and redo

Don’t worry when you edit by mistake, undo and redo commands help to easily correct recent changes.

Clipboard

Clipboard

Cut, copy, paste, or duplicate selected objects within and across diagrams.

Z-order

Z-order

When multiple objects overlap, z-order controls which object needs to be on top or at the bottom.

Grouping

Grouping

You can combine multiple nodes into a group and interact with them as a single object. Groups can also contain another group.

Quick commands

Quick commands

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

Alignment commands enable you to align selected objects such as nodes and connectors with respect to the selection boundary.

Spacing commands

Spacing commands

Arrange selected objects in equal intervals.

Sizing commands

Sizing commands

Resize selected objects to have equal sizes.

Align commands

Align commands

Align selected objects horizontally or vertically.


Automatic Layout

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.


Drawing tool

Draw nodes and link them interactively by just clicking and dragging on the canvas surface.

Drawing Tool


Zoom, pan, fit to page

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.

Zooming and Panning


Symbol palette

Includes a gallery of stencils, reusable symbols and nodes that can be dragged and dropped onto the surface of the diagram.

Symbol palette


Overview panel

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.

Overview panel


Ruler

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.

Ruler


Miscellaneous

There are several other features that enhance the diagramming experience.

Exporting

Exporting

Diagrams can be easily exported as .png, .jpeg, .bmp, and .svg image files.

Printing

Printing

Diagrams can be printed as documents.

Serialization

Serialization

You can save your diagram state in JSON format and load it back later for editing using the serializer.

Data binding

Data binding

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

Gridlines

Gridlines provide guidance when trying to align objects.

Page layout

Page layout

The drawing surface can be given a page-like appearance using page size, orientation, and margins.

Tooltip

Tooltip

Additional information about a node can be viewed using tooltips.

Context menu

Context menu

Frequently used commands can be easily mapped to the context menu.


45+ VUE COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.