Nodes
Your content, on the canvas
Compose nodes with your own Vue templates. Bring icons, fields, people, and application data into the same interactive scene.
In development
PrimeUI
Diagram.
Build visual editors, workflow designers, and connected applications. Bring your own node content, connect ideas, and give users the tools to shape their workspace.
Automation Studio
Opening Automation Studio…
Real application patterns, built with the same Diagram foundation. Try a workflow, explore a model, and edit the drawing.
Canvas & interaction
An editor that moves with your ideas.
Start with nodes and connections. Add the interactions that make a drawing feel like an application, from direct manipulation to keyboard commands and reversible edits.
Connections
Give every relationship a path
Connect ports, move endpoints, and shape polyline, orthogonal, or Bézier routes. Add labels, arrowheads, and midpoint graphics.
Editing
Select, move, resize, rotate
Edit one object or a selection, align and distribute nodes, and use snapping and guides for precise placement.
History
Room to try something else
Document edits share Undo and Redo. Pan, zoom, focus, and selection stay local to the canvas session.
Structure & layout
From a simple flow to a connected workspace.
Organize the document at the scale your users need. Pages, layers, containers, and optional layout providers work with the same saved nodes and connectors.
Pages & layers
A place for every view
Separate pages and layers, control visibility, and navigate between related parts of a document.
Containers
Keep related work together
Use groups and nested containers to organize content. Swimlanes give responsibilities and phases their own space.
Layouts
Make the structure readable
Apply optional tree, layered, force, and other layout providers, then continue editing the result on the canvas.
Data binding
A diagram of your own data
Map application records to nodes and relationships. Refresh data while preserving fields and positions owned by the drawing.
Notation
Speak the language of the work.
Optional notation modules add domain shapes and authoring behavior. Build the editor around the notation your users already understand.
BPMN
Business processes
Model tasks, events, gateways, pools, and lanes with BPMN symbols and flow metadata. Import and export the supported BPMN XML profile.
UML
Systems and their structure
Describe classes, interfaces, members, and relationships. Compose an inspector around the model your application owns.
Sequence & activity
Interactions over time
Author lifelines and messages for sequence diagrams, or use activity nodes and flows to describe how work progresses.
Entity relationships
Data with its relationships
Show entities, fields, keys, and cardinalities. Attach relationships to field ports to keep their meaning visible.
Application building
The behavior is ready. The interface is yours.
Compose the headless parts into your application. Start with copied UI parts or create the controls, panels, and visual treatment that suit your product.
Composition
Build from replaceable parts
Combine Root, Viewport, node templates, commands, and optional modules. Use PrimeOne or Tailwind UI parts as editable starting points.
Theming
Carry your product identity
Customize canvas, node content, connections, controls, and editor surfaces with scoped styles and CSS variables.
Persistence
Keep the document portable
Save and restore document JSON. Connect persistence to your application and use diagnostics when importing supported exchange formats.
Output
Take the drawing with you
Create SVG and raster output or prepare an isolated browser print surface. Choose the scope and output options your workflow needs.
Your next editor starts here.
Create your first canvas, bring your own node content, and add the editing tools your application needs.