Diagram - Tree Shaking

#Import

import { DiagramRoot } from '@primeui/vue-diagram/parts/root';
import { DiagramViewport } from '@primeui/vue-diagram/parts/viewport';
import { DiagramNodeDef } from '@primeui/vue-diagram/parts/node';

The wrapper declares sideEffects: false for its JavaScript modules. Namespace and flat components share context identity. Named imports and per-part entries make the parts used by a page explicit. Actual output depends on the application bundler and what those parts reference.

#Optional Capabilities

Layout, palette, notations and output have separate public entries. Import the entries used by the feature rather than importing every capability into a shared application module.

Layout, workers, palette, notation, BPMN XML, and output each have a public entry. Import only the capabilities a route uses. Loading a notation root alone does not configure its store module or symbols.

import { layeredDiagramLayout } from '@primeui/vue-diagram/layout';
import { exportDiagramSvg } from '@primeui/vue-diagram/export';

These are separate imports for separate tasks. Imports lists all entries. There is no shared requirement to import every notation or output control for a basic viewport.

These are independent examples: tree placement does not require ER, and ER does not require automatic placement. A semantic module belongs in the store’s notationModules; importing its TypeScript factory alone does not register it.

#Copied UI Parts

These paths refer to application-owned source. Copied PrimeOne dependencies and Tailwind helpers also contribute to the feature bundle. Runtime import choices do not remove controls that the application still renders.

Copied UI is application source. Import the individual UI components used by the page and retain their referenced files. Optional local barrels keep output, layout, and notation controls separate from the base editor controls.

Styles are loaded explicitly from @primeui/diagram-style; JavaScript tree shaking does not choose which global styles your application needs.

#Route-Level Loading

A lazy route keeps the diagram feature outside the initial screen’s import boundary.

Load a large editor or optional notation through your application router or a Vue async component. Keep model/store ownership at the level that must survive route changes. Unmounting a route releases its root session; an application-owned store can outlive that route.

Compare production analyzer output for the actual feature before making size claims. Declaration count, package size and the resulting application chunk size are different measurements.

#Related Docs

• Imports
• Setup
• Architecture
• Performance