Diagram - Setup

#Installation

In a Vue 3.5 or later application, install the runtime and the packages imported by application setup.

npm install @primeui/vue-diagram @primeui/diagram-style @primeui/license-manager

#Dependencies

Diagram brings its model helpers and shared types through runtime dependencies. Import those APIs through @primeui/vue-diagram. PrimeVue is needed by the PrimeOne copied controls, not by a canvas that uses only runtime parts.

Vue 3.5 or later is a peer dependency. The runtime does not require a third-party diagram, layout or notation engine. Keep the dependencies and supporting files of the copied UI parts you choose.

#License

Diagram accepts a Commercial PrimeUI key or a Diagram key. See Licenses for license coverage and PrimeStore for plans.

#Commercial PrimeUI License

A covering Commercial PrimeUI license can use registerLicense({ primeui: 'PRIMEUI-COMMERCIAL-LICENSE-KEY' }). In a PrimeVue application, the covering key can instead be supplied to PrimeVue at bootstrap:

import PrimeVue from 'primevue/config';

app.use(PrimeVue, { license: 'PRIMEUI-COMMERCIAL-LICENSE-KEY' });

#Diagram License

Register a Diagram key before the application mounts.

import { registerLicense } from '@primeui/license-manager';
import { createApp } from 'vue';
import App from './App.vue';

registerLicense({ diagram: 'PRIMEUI-PRO-DIAGRAM-LICENSE-KEY' });
createApp(App).mount('#app');

If you use separate product keys, register all keys in one call and leave license out of the PrimeVue options. Each registerLicense call replaces the previous key map.

registerLicense({
    primeui: 'PRIMEUI-LICENSE-KEY',
    diagram: 'PRIMEUI-PRO-DIAGRAM-LICENSE-KEY'
});

For Nuxt, register the keys in a plugin such as plugins/primeui-license.ts. Put the licensed key in the public runtime configuration supplied by your deployment.

import { registerLicense } from '@primeui/license-manager';

export default defineNuxtPlugin(() => {
    const config = useRuntimeConfig();
    registerLicense({ diagram: config.public.primeuiDiagramLicenseKey });
});

Diagram checks the license after client rendering. A missing or invalid key displays a license message without preventing rendering. Model validation is independent: malformed input still fails createDiagramStore.

#Import

import { Diagram } from '@primeui/vue-diagram';

Diagram.Root, Diagram.Viewport, and Diagram.NodeDef compose the first canvas. Flat prefixed exports such as DiagramRoot are also public. Optional capabilities have separate import entries.

#Styles

Load the shared base stylesheet once, then the optional PrimeOne theme, then your application overrides.

import '@primeui/diagram-style/style.css';
import '@primeui/diagram-style/themes/primeone.css';
import './app.css';

For Nuxt, put those styles in the same order in the css array. Shared CSS styles editor surfaces and copied controls. Component rendering styles are included automatically.

The PrimeOne theme maps Diagram roles to PrimeUI tokens with light and dark fallbacks. Keep it for either preset when using those tokens, or define equivalent Diagram variables. Set the document color scheme to match your application theme:

:root {
    color-scheme: light;
}
:root.p-dark {
    color-scheme: dark;
}

There is no additional Diagram assets/style/components.css to import. See Theming for scoped overrides and authored colors.

The structural stylesheet loads the bundled Geist variable font for Diagram content and controls. No separate font download or hosted-font request is needed. Keep the package’s font asset and license when copying or bundling these styles. Explicit saved label fonts still take precedence; portable export uses its own font options.

#UI Parts

The first canvas needs only runtime parts. Copied UI adds toolbar controls, panels, inspector forms, workspace controls, and output settings as editable application source.

#PrimeOne UI Parts

Run the CLI from the project root to copy the PrimeOne parts. --output-dir sets their parent directory, so this command writes to src/components/primeui/diagram.

npx -y @primeui/cli add diagram --framework vue --ui primeone --output-dir ./src/components/primeui

Import the copied components from that directory. These examples use @/ as an alias for src/.

import { DiagramEditorUI, DiagramToolbarUI, DiagramCanvasUI } from '@/components/primeui/diagram';

Configure PrimeVue in the application before mounting PrimeOne controls. Retain any supporting files imported by the copied components. The SVG icon components do not need the PrimeIcons font stylesheet.

#Tailwind UI Parts

If the project already uses Tailwind, copy the utility-class variant instead.

npx -y @primeui/cli add diagram --framework vue --ui tailwind --output-dir ./src/components/primeui

The public copied-part names stay the same. Load the shared Diagram styles, and ensure your Tailwind content configuration includes the copied Vue files. Tailwind controls do not require PrimeVue.

UI parts explains where each control belongs and which provider supplies its state.

#Manual Parts

You can compose custom controls directly under the root and use individual runtime parts. For copied widgets, retain each part and its referenced files in your application UI directory. Optional layout, notation, output and swimlane widgets have separate local barrels; see UI Parts.

A path such as ./components/primeui/diagram is application-owned, not an npm package. Generated demo source may use @/components/primeui/diagram; configure that alias or replace it with a relative path.

#Usage

The source tab includes the complete model and Vue component. The viewport needs an explicit height to measure and display its graph.

Continue with Architecture, Imports, and the API.

#Quickstarts

Use the complete example above as a starter in an existing Vue application. For a larger editor with copied toolbar and panel controls, see Workflow Editor and Editor Composition. These examples use local UI imports; copy the parts first and adjust their paths to your application.

#Next Steps

Read Architecture to understand the model and canvas, then try Resize or Create a Connection. Add notation modules only when you need their domain rules; Choose a Notation explains the options.

#Related Docs

• Architecture
• LLMs
• Imports
• Theming
• API