Diagram - Content

Render template or component node content, edit saved fields, and keep local drafts separate from diagram history.

#Usage

import { Diagram } from '@primeui/vue-diagram';
<Diagram.Root :store="store" page-id="page">
    <Diagram.NodeDef node-type="task" v-slot="{ node }">
        <strong>{{ node.data?.['title'] }}</strong>
        <Diagram.Field name="title" v-slot="{ getInputProps }">
            <input v-bind="getInputProps({ 'aria-label': 'Task title' })" />
        </Diagram.Field>
    </Diagram.NodeDef>
    <Diagram.Viewport label="Tasks" style="height: 24rem" />
</Diagram.Root>

This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.

Use content for wrapping text, forms or application components. Use Labels for saved scene text and connector captions.

#Default and type-specific templates

Loading Demo...

Choose Use fallback, then restore the review renderer. Its saved data stays the same and no Undo entry is created. Exact types take precedence over fallback; the last matching declaration in source order wins. Body and ports definitions resolve independently. Removing a definition reveals the remaining match.

The scoped slot receives readonly node, projected geometry and actions. These are plain slot values. Do not mutate a record or its nested data. Definitions belong to their root and unregister when unmounted.

Choose Use fallback. The review node now uses the default template. Restoring the registration brings back its heading, body and status footer. The saved model stays the same; a renderer choice creates no Undo entry.

#Edit saved fields

Loading Demo...

Change Name, press Enter or leave the input, then choose Undo. Type again and press Escape to cancel. Local note is component state, so model Undo does not restore it. Make read-only changes the root's editing policy.

Diagram.Field binds a native input or textarea through getInputProps and owns its value and draft. Do not also bind v-model or value to that field. Focus starts a draft, input updates it and blur commits it as one edit. Enter commits a single-line input; textarea Enter inserts a newline. Escape discards the draft. IME composition keeps its native keys. Canvas shortcuts do not consume field input.

The single readOnly prop combines with the current content policy. Record, ancestor and layer restrictions still apply. Pass application attributes and handlers into the prop getter; application handlers run first, and event.preventDefault() stops Diagram's corresponding handler.

Use actions.setData(changes) for a button that changes saved data. It returns the content operation's state and diagnostics. Controlled proposals still require host acceptance. A local component state change alone does not update the model.

Change Name, then press Enter or leave the field. The saved-data feedback updates after the commit. Choose Undo to restore its previous value. Type another name and press Escape to discard that draft. Change Local note and compare: it is component state and is unaffected by model Undo.

Focus starts a content draft, input updates it, and blur finishes it as one saved edit. Enter also finishes a native input; Enter in a textarea inserts a newline. Escape cancels and restores the saved value. IME composition retains the input's Enter/Escape keys while composition is active. Keystrokes in these fields do not trigger canvas shortcuts.

For a button or other application control, use actions.setData(changes) from the node context. It submits a content command and reports its state/diagnostics; mutating component state alone does not save node data. Draft cancellation, policy changes and external commits can affect an active content edit. A selected node changing is not a mechanism for saving an unrelated local draft.

#Component-backed nodes

Loading Demo...

Increase a counter, Undo, and remove its renderer. The fallback retains the saved count. In Vue, put your component inside Diagram.NodeDef; there is no separate component-registration API. The child reads useDiagramNodeContext():

Increase either counter, then choose Undo. Each component instance reads its own node ID and saved count. Remove component renderer shows the template fallback with those counts intact. Restore the component to continue editing. The complete source defines the counter component in the same file.

<script setup lang="ts">
import { useDiagramNodeContext } from '@primeui/vue-diagram';

const { node, actions } = useDiagramNodeContext();
function increment() {
    const count = Number(node.value.data?.['count'] ?? 0);
    actions.setData({ count: count + 1 });
}
</script>

<template>
    <button type="button" @click="increment">Count: {{ node.data?.['count'] }}</button>
</template>

Mount this child in a matching definition. Context refs use .value in setup; templates unwrap top-level refs. Validate application data before treating it as a domain record. Save values that must survive remounts through node actions; release resources owned by the child when it unmounts.

#Sizing, centering and clipping

DiagramNodeContentUI projects marked header, body and footer content. Its default align="center" centers the stack vertically; align="start" starts it at the top. Horizontal layout and wrapping come from your HTML/CSS. This does not change label alignment or the node's geometry.

Loading Demo...

Compare the rectangle and diamond, change alignment, then grow the width and Undo. Alignment is local presentation; width is saved geometry. The copied DiagramNodeContentUI has header, default body and footer slots. Its align defaults to center; start places the stack at the top.

HTML wraps within the bounds you supply and clips to the node shape. A large form does not automatically grow saved bounds. Intrinsic browser measurement is a separate option described in Geometry and measurement. Put boundary controls in Diagram.NodePortsDef so the body does not clip them.

Portable output needs an explicit representation of custom HTML. Rendered output can capture mounted in-tree Vue content; offscreen framework content is rejected with diagnostics. See Export.

Compare the same content in a rectangle and diamond. Choose Start or Centered and observe the local layout. Grow width 25% saves a geometry edit; Undo restores the width while the alignment choice stays local.

Server rendering begins from authored bounds/estimated text metrics; browser measurement supplies later geometry. HTML content also needs a content adapter for detached scene export. Source-backed controls capture the selected viewport's rendered templates without a per-template export adapter. Read the Geometry and measurement and Export adapters for those integrations.

#Controls and lifetime

The demos use PrimeVue showcase controls in both previews; copied node-content UI uses the selected preset. Reset replaces and disposes the owned store, remounts the root, resets local choices and restores the original fitted view. Application storage and component-local drafts remain application responsibilities.

Native form fields keep their own keyboard and text-selection behavior. Diagram.Field commits saved node data and reconciles acceptance, rejection and remount. Custom controls use the node’s explicit actions rather than mutating readonly records.

Node views can unmount through virtualization or source changes. Keep durable values in the store, and give unsaved drafts an application owner. Dispose application resources with their owning component. See Node UI and SSR and lifecycle.