Diagram - UML Class

#Usage

This component accepts an initial UML Class model and its page ID. Supply the records shown in a demo below. Copy the preset inspector files to the local import path and follow Setup for application styles and licensing.

<script setup lang="ts">
import { onBeforeUnmount } from 'vue';
import { Diagram, createDiagramStore, type DiagramModel } from '@primeui/vue-diagram';
import { DiagramUmlRoot, createDiagramUmlModule } from '@primeui/vue-diagram/uml';
import { DiagramUmlInspectorUI } from './components/primeui/diagram/uml';

const props = defineProps<{ model: DiagramModel; pageId: string }>();
const created = createDiagramStore(props.model, { notationModules: [createDiagramUmlModule()] });
if (!created.ok) throw new Error(created.diagnostics.map((item) => item.message).join('; '));
const store = created.value;

onBeforeUnmount(() => {
    store.dispose();
});
</script>

<template>
    <Diagram.Root :store="store" :page-id="pageId">
        <DiagramUmlRoot>
            <Diagram.Viewport label="UML Class model" auto-fit style="height: 30rem" />
            <DiagramUmlInspectorUI />
        </DiagramUmlRoot>
    </Diagram.Root>
</template>

The model is read once during setup. For file loading or Reset, replace the store deliberately and dispose the previous caller-owned store. The root owns its session. The copied inspector follows selection and creates its own DiagramUmlInspectorHost; a custom form uses that host with useDiagramUmlInspector() in a child component. Its snapshots are readonly refs. Read .value in setup and use the documented actions to change drafts or selections. Mounting a form does not install the notation module.

Use the optional UML Class module for a descriptive class model. A classifier is one Diagram node; its compartments and rows are content, not separate graph nodes. Types, defaults and operation signatures are inert text, without type resolution or expression evaluation.

#Start with a classifier

Choose Focus Order, then use Edit selected element. Rename the class or edit an attribute in the copied form. Undo restores the saved model and its row presentation together. Read only keeps selection and inspection available while disabling writes. Fit selected brings a dense classifier into view; Restart example restores the original model with empty history.

#Edit members without rebinding relationships

Choose Rename connected row or Move connected row. The number attribute keeps its semantic row ID and left/right physical port IDs. The storage relationship therefore remains attached after renaming or reordering. Undo either edit in one step. Try removing connected row rejects; remove or reconnect its relationships before removing the row.

Select Order, Repository or OrderState through the grouped Entity picker. Use the copied form to compare a class, interface and enumeration. Its compartment and member pickers expose identity where it helps you track an edit. Collapsing a compartment keeps the anchors at the visible heading. Row ports are physical graph anchors; this profile does not model formal UML Port or AssociationEnd ownership.

#Describe relationships

Choose a relationship, then Create relationship. Generalization targets Entity; realization targets Repository. Select the resulting relationship to edit the supported end descriptors. Try invalid realization rejects a class-to-class realization without adding history. Relationship creation and description use the shared connection controller, including current policy, approval and controlled store acknowledgement.

An end descriptor belongs to the drawn source or target, not to a hidden member reference. role is optional text up to 128 characters. multiplicity accepts *, a nonnegative integer of up to six digits, or an ordered range such as 0..1 or 1..*; omission means unspecified. navigable is omitted or true. The copied form clears incompatible end properties when changing relationship kind.

#Classifier and member reference

Visibility is public, private, protected or package. Names and stereotypes are at most 128 characters; descriptive type/default text is at most 256. DIAGRAM_UML_LIMITS exposes 100 rows per compartment and 16 parameters per operation. Formatted row text is limited to 2048 characters. IDs begin with an alphanumeric character and use only letters, numbers, _, ., :, -, up to 128 characters. Use globally distinct node/header/compartment/row/port identities. Empty classifier or member names remain valid unfinished authoring and produce completeness warnings. Unknown profile properties, unresolved envelopes and unsupported versions reject when the active module is installed.

Current content and row-topology permissions apply to edits and Undo/Redo. Pending is not saved: let the owning store or connection path settle its proposal. A rejection preserves the complete graph. Generic clipboard and palette reuse remap internal classifier/member/port identities through the installed module. Preserve the full source when supplying your own form; the public inspector model owns typed edits and draft reconciliation, while the copied UI owns visible controls. See Domain notation for module and resource lifetime.

#Parameter fields and identity

Parameters are ordered signature values without saved IDs. The inspector model keeps immutable view records for unchanged parameters; track parameter when rendering its parameter collection. Removing an earlier parameter through the model preserves the remaining native fields, including the exact occurrence of equal-valued parameters. The current index still belongs in each edit command. Do not track an editable parameter field by its array index: after a removal, that DOM field could describe a different parameter.

The copied forms refresh drafts from saved state when the model, selection or transaction feedback changes. Retaining a field therefore preserves its semantic target and focus, not an unsaved draft across those changes. Controlled proposals leave the saved collection in place until acknowledged. An external replacement that changes a collection of indistinguishable duplicate values cannot identify which occurrence survived; ambiguous fields remount. A store/entity replacement starts a fresh view scope. This view behavior adds no parameter IDs to serialized UML data.

This is a bounded class-diagram profile. Packages, templates/generics, formal ports, qualified association ends, association classes, type inheritance resolution and executable operation bodies are not modeled.

#Related Docs

• Choose a Notation
• Supported Profiles
• API