Diagram - Data Attributes
Use rendering identity and state attributes for targeted styles and browser assertions.
#Import
import { Diagram } from '@primeui/vue-diagram';#Identity Attributes
The viewport renders these attributes on scene surfaces. Use model identities to target an item; keep assertions aware that virtualization can replace rich views with overview geometry.
| Attribute | Surface | Value |
|---|---|---|
data-layer-id | Rendered viewport layer | Saved layer ID. |
data-entity-id | Node, connector and label surfaces | Saved owner/entity identity for that surface. |
data-node-id | Node and node-related handles | Saved node ID. |
data-node-type | Node | Saved node type. |
data-connector-id | Connector | Saved connector ID. |
data-label-id | Label | Saved label ID. |
data-port-id | Rendered node port circle | Saved port ID. |
data-diagram-port | Application element with Diagram.Port | Existing port ID supplied to the anchor component. |
A record’s presence in the store does not guarantee a currently mounted element with its attribute. Reveal an offscreen item before asserting its rich content. Hidden, clipped and collapsed items follow their ownership and visibility rules.
#State and Interaction Attributes
| Attribute | Surface | Meaning |
|---|---|---|
data-selected | Rich node | Stringified selected state; match ='true' when styling selection. |
data-diagram-unavailable | Unavailable node-content placeholder | The runtime could not resolve the required content. |
data-connection-preview | Connection preview SVG | An in-progress connection preview. |
data-valid | Connection preview | Whether the preview has no current connection diagnostics. |
data-diagram-handle / data-transform-kind | Transform handles | Handle identity and transform kind. |
data-connection-handle / data-connection-kind | Connector handles | Handle identity and edit kind. |
data-diagram-interactive | Application-owned interactive content | Preserve native/application input ownership instead of graph gesture handling. |
Canvas aids also expose data-diagram-guide on snap-guide paths,
data-drawing-preview on drawing paths and data-pool-preview on swimlane
preview SVGs. Live port controls expose data-connection-port and
data-connection-node; these identify the port and owning node. Connector
handles additionally expose data-axis where applicable and data-compact
for compact targets. Use these for scoped presentation, keeping runtime
positions and hit areas intact.
Connector selection uses the p-diagram-connector-selected class rather than
the node's data-selected attribute. Keyboard focus uses :focus-visible.
Use Theming for color
precedence and geometry limits.
Attributes identify surfaces and state; they do not authorize edits. Commands and editors still check policy. The copied editor exposes its data-density and dir, and copied preset surfaces use data-preset where declared. They are not a universal data-slot system shared by every Diagram part.
#Styling
Keep theme roles and authored paint ownership in mind when styling a saved item.
.p-diagram-node[data-node-id='review'][data-selected='true'] {
outline: 2px solid var(--p-diagram-selection);
}#Testing
After revealing the item, locate its declared identity and assert the behavior that matters.
const review = page.locator('.p-diagram-node[data-node-id="review"]');
await expect(review).toBeVisible();
await expect(review).toHaveAttribute('data-selected', 'true');This is a browser-test excerpt; page and expect come from the application’s test runner. Avoid using private descendant structure to find controls. Accessible names are preferable when the assertion concerns a user action.