Diagram - Entity Relationship

#Usage

This component accepts an initial ER 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 { DiagramErRoot, createDiagramErModule } from '@primeui/vue-diagram/er';
import { DiagramErInspectorUI } from './components/primeui/diagram/er';

const props = defineProps<{ model: DiagramModel; pageId: string }>();
const created = createDiagramStore(props.model, { notationModules: [createDiagramErModule()] });
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">
        <DiagramErRoot>
            <Diagram.Viewport label="ER model" auto-fit style="height: 30rem" />
            <DiagramErInspectorUI />
        </DiagramErRoot>
    </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 DiagramErInspectorHost; a custom form uses that host with useDiagramErInspector() 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 ER to describe a data model as entities, fields and relationships. Datatypes and defaults are display text; Diagram does not evaluate SQL, validate a database schema or propagate keys.

#Start with two entities

Customer places zero or many Orders. Choose Focus Customer, then use Edit selected element. Select the places relationship to inspect its two ends. The source installs createDiagramErModule() and renders DiagramErRoot beneath Diagram.Root.

ER uses Diagram compartments and physical row anchors without an additional symbol library. Read only leaves selection, Fit and inspection usable; edits follow current content/connection policy. Restart example restores a fresh enabled store with empty Undo history.

#Keep field identities while editing

Choose Rename connected field or Move connected field. The field's name or position changes, while its stable field ID and two port IDs retain the relationship. Toggle fields collapses the field compartment without discarding its anchors. Undo each change in one step. Try nullable primary and Try removing connected field reject without changing the saved model.

The copied field form edits datatype, default, primary, foreign, unique and nullable markers. All fields marked primary together form the entity's one possibly composite primary key. A primary field cannot be nullable. unique applies to an individual field; composite unique groups are not modeled. foreign is a descriptive marker, not a validated foreign-key reference or field mapping.

#Describe a relationship and its ends

Choose Focus places and edit its cardinality, role or row binding in the copied form. Endpoint choices use entity/field names while preserving the actual port identities. A body endpoint and a field endpoint are different graphical attachments.

Create identifying intent adds a relationship whose source is the principal and target the dependent. That intent does not infer foreign fields or copy primary keys. Relationship creation/description follows the shared connection approval and controlled acknowledgement path. Owned labels and markers change together; Undo restores the whole edit. Description retains the relationship ID, route/controls and unrelated labels.

#Entity and field reference

The active version-1 profile rejects unknown properties, unresolved envelopes, unsupported versions, nullable primary fields, inconsistent compartment/port presentation, invalid endpoint/cardinality data and unsupported record kinds. Removing a connected row requires reconnecting or removing its relationships first.

Semantic edits share ordinary history and current permissions, including Undo/Redo. A pending proposal belongs to the current store/connection operation, not a completed save. Generic clipboard and palette reuse remap entity, field and port identities through the installed module. The copied forms keep drafts separate from saved data; keep their public model when replacing visible UI. See Domain notation for setup and lifetime.

Composite foreign-key mappings, composite unique groups, schema/database catalogs, DDL generation, validation against a live database and executable defaults are outside this profile.

Schema Modeler combines four entities, row-bound relationships and the copied semantic inspector in one application.

#Related Docs

• Choose a Notation
• Supported Profiles
• API