Diagram - LLMs | PrimeUI Pro

#Overview

Use the documentation map to find relevant pages, then share the guides for your task. Include complete demo source when you need a working component. The full bundle is useful when a task spans several features.

#Usage

https://vue.primeuipro.dev/llms.txt
https://vue.primeuipro.dev/llms-full.txt

llms.txt links to individual pages. llms-full.txt includes the documentation with demo source expanded. The raw Markdown pages below contain one guide at a time, with available demo source included, so you can share a focused example.

#Diagram Pages

Start with these pages for installation, the first canvas and public API contracts.

https://vue.primeuipro.dev/raw/docs/diagram.md
https://vue.primeuipro.dev/raw/docs/diagram/getting-started/architecture.md
https://vue.primeuipro.dev/raw/docs/diagram/getting-started/setup.md
https://vue.primeuipro.dev/raw/docs/diagram/reference/imports.md
https://vue.primeuipro.dev/raw/docs/diagram/reference/api.md

Use the API to check signatures. Check Vue props, emits, handles and composables against the current wrapper declarations.

#Context Packs

Task	Include
First canvas	Architecture and Setup.
Custom content or controls	The relevant customization guide, Slots and Contexts, UI Parts and API.
Data integration	Model, the relevant data guide and SSR and Lifecycle.
Layout	Choose a Layout, the chosen provider guide and Execution.
Notation or exchange	Choose a Notation, its basics/profile guides and the matching integration guide, such as BPMN XML.

#Demo Source

Open a demo's source tab for its complete imports, data, component and cleanup. The starter in Architecture is a complete Vue SFC; short Usage templates on feature pages assume an existing store and page.

Copied UI imports are local application paths. Configure any shown alias or replace it with a relative path. Example controls and fixture data are not runtime requirements.

#Guardrails

Import runtime APIs from @primeui/vue-diagram or a documented optional entry point. Import copied controls from application source files.
Let a root own a store from value, or borrow an application-owned store; the root owns its session and the viewport renders the scene. Do not add duplicate node or connector renderers.
Supply existing page/layer IDs and required ancestors. Give the viewport an explicit height and dispose application-owned resources.
Register matching notation modules when creating the store, and supply any referenced symbols to the root.
Check operation results and diagnostics before reporting success. Use the documented Vue props, emits and scoped slots; do not invent selectors or properties.

Root value is a one-way reload input. Keep its reference stable during editing. Context snapshots are readonly; use public actions and only documented named models for v-model.

#Prompting Pattern

Use the Vue Diagram guides below as the source of truth.
Create a Vue workflow canvas with editable saved titles and Undo controls.
Show the complete model, Vue SFC, imports, styles and cleanup.
Use only the runtime parts needed for this task.

Context:
- https://vue.primeuipro.dev/raw/docs/diagram/getting-started/setup.md
- https://vue.primeuipro.dev/raw/docs/diagram/getting-started/architecture.md
- https://vue.primeuipro.dev/raw/docs/diagram/features/nodes/content.md
- https://vue.primeuipro.dev/raw/docs/diagram/features/interaction/commands.md

Add the exact API or notation profile when the task needs a method signature, template context or domain record. State whether you want a complete component or a change to an existing one.

#Output Checklist

Required packages, global styles and component imports are included.
The model validates, and root/page/layer inputs match its records.
Templates use current public components, props and contexts.
Copied UI paths match the application, with any required supporting files.
The viewport has a size, operation results are handled and owned resources are disposed.