Diagram - Imports
Vue package entries, optional capabilities and copied UI dependencies.
#Import
import { Diagram, type DiagramModel } from '@primeui/vue-diagram';#Vue entry points
import { Diagram, useDiagramContext, type DiagramModel } from '@primeui/vue-diagram';| Entry | Exports |
|---|---|
@primeui/vue-diagram | Diagram namespace, flat prefixed parts, public composables and keys, model types, store/session factories, and common utilities. |
@primeui/vue-diagram/components | Namespace and flat component exports. |
@primeui/vue-diagram/composables | Context accessors, six typed context keys, service accessors, and useDiagramStore. |
@primeui/vue-diagram/parts/root | Root, commands, inspector, overlays, host-prop parts, root props/events, and root handle. |
@primeui/vue-diagram/parts/viewport | Viewport, aids, swimlane tools, viewport props, and viewport handle. |
@primeui/vue-diagram/parts/node | Node, definitions, field and port parts, node slot/context/action types. |
@primeui/vue-diagram/parts/connector | Connector and label rendering parts. |
@primeui/vue-diagram/parts/workspace | DiagramWorkspaceHost. |
@primeui/vue-diagram/parts/persistence | DiagramPersistenceHost. |
@primeui/vue-diagram/layout | Layout providers, preparation, controller contracts, executeDiagramLayout, and DiagramLayout. |
@primeui/vue-diagram/layout-worker | Worker execution adapters. |
@primeui/vue-diagram/palette | Palette parts, symbol collections, portable palette contracts, useDiagramPalette, and DiagramPaletteControls. |
@primeui/vue-diagram/bpmn | BPMN notation module, symbols, authoring, root, and inspector accessor/host. |
@primeui/vue-diagram/uml | UML Class notation module, symbols, authoring, root, and inspector accessor/host. |
@primeui/vue-diagram/er | ER notation module, symbols, authoring, root, and inspector accessor/host. |
@primeui/vue-diagram/activity | Activity notation module, symbols, authoring, root, and inspector accessor/host. |
@primeui/vue-diagram/sequence | Sequence notation module, symbols, authoring, root, and inspector accessor/host. |
@primeui/vue-diagram/bpmn-xml | BPMN XML reader/writer contracts and Vue import/export parts. |
@primeui/vue-diagram/export | Detached SVG/raster/print utilities, rendered-source controls and types, output host and accessor. |
There is no /module or /context entry. Optional components use their capability entry rather than Diagram.*. Model and runtime imports use the wrapper entries above.
Rendering names DiagramNode, DiagramConnector, and DiagramLabel are components. Their portable records use DiagramNodeRecord, DiagramConnectorRecord, and DiagramLabelRecord. A portable port type can be written as DiagramNodeRecord['ports'][number].
Main exports include DiagramModel, DiagramReadonly, DiagramStore, DiagramSession, createDiagramModel, createDiagramStore, createDiagramSession, createDiagramScene, serializeDiagramModel, deserializeDiagramModel, and DIAGRAM_SCHEMA_VERSION. DiagramPersistenceSaver is a public main-entry type.
#Copied controls
Copy each part's referenced files and keep its imports. Do not install a second model provider to compensate for a missing root/workspace ancestor. The authoritative part-by-part imports and inherited contracts are in UI parts.
Copied components belong to application source. Their names end in UI.
import { DiagramToolbarUI, DiagramInspectorUI } from '@/components/primeui/diagram';
import { DiagramOutputUI } from '@/components/primeui/diagram/output';These excerpts assume the setup copy directory and an @/ alias for src/. Local optional barrels include layout, bpmn, uml, er, activity, sequence, bpmn-xml, output, and swimlane. Keep each component and its referenced files together. UI parts lists the required providers.
#Styles and license
Register a Commercial PrimeUI key or a Diagram key before bootstrap. Use registerLicense({ diagram: 'PRIMEUI-PRO-DIAGRAM-LICENSE-KEY' }) for a Diagram key. Keep all application keys in one registration because later registrations replace earlier ones. See License.
import '@primeui/diagram-style/style.css';
import '@primeui/diagram-style/themes/primeone.css';
import { registerLicense } from '@primeui/license-manager';Styles and application license activation are separate packages. Component rendering styles are included automatically. The setup guide describes import order and bootstrap placement.
#Optional ownership
An optional import does not create a semantic module, symbol registry, worker
or persistence controller for the application. Supply the relevant instances
and keep their lifetimes with the model owner. Notation modules belong in
createDiagramStore(..., { notationModules }); matching symbols belong in the
root's registry. The notation guides,
Layout execution and
SSR and lifecycle show those boundaries.
Importing a capability does not register it on a store or create a controller. Notation modules are supplied when creating the store. Worker factories, transport providers, controllers, and symbol registrations have explicit owners and cleanup. See SSR and lifecycle.
#Related Docs
#Diagnostic row identity
Diagnostic row identity belongs to the controller/feedback presentation that owns it. Keep the reconciled reason code, path and message together; do not use an array index as a persistent model ID. Check API for the exact public result types and Troubleshooting for recovery paths.