Diagram - Schema Modeler

Edit an order model with ER entities, field ports, relationships and copied semantic forms.

#Edit the order model

Loading Demo...
  1. Choose the Order table shortcut or Edit Order fields to select the table and open Schema details. Fit schema shows all four entities.
  2. Choose Add delivery date to Order. The new nullable Date field joins the entity in one semantic edit, and its field count updates. Undo removes it; Redo restores it.
  3. Use Schema details to rename a field or edit its datatype, default and key markers. Select a relationship to edit its cardinality, role or row binding.
  4. Open Read the notation for the key markers and relationship ends. Turn on Read only to inspect the model with editing disabled.

Schema details starts collapsed. Selecting an item opens its details; the collapse chevron closes the panel, leaving a reopen icon at the canvas edge. Table shortcuts show current names and field counts. The searchable Inspect field groups the saved tables and relationships, with relationship names showing both ends. Both controls read the same model; they do not keep a separate editable schema. Use Fit selected for a closer view. The add-field button is disabled while the delivery-date field exists, the semantic owner is busy, or read-only policy is active.

At frame widths of 700px or less, open Controls for table shortcuts, the notation key, add-field action and other secondary commands. The Inspect picker, zoom and history stay visible. Use Expand workspace for more room. Escape closes it and returns focus to its expansion button; Tab stays within its visible controls. Framing on initial mount and entering or leaving the expanded workspace keeps a fitted selection or initial model at 90% zoom or higher. If fitting would shrink it further, it uses 100% zoom and centers the selected record or Order. Explicit Fit commands still provide the whole-model overview.

Native ER headers and monospace field rows distinguish table names from their fields. The notation key explains PK, FK, UQ, required fields and relationship ends. Selecting a relationship also describes its current cardinality in words above the form. The Order-to-OrderLine route travels outside the tables so its line and label remain separate from their fields. These are authored example positions, not an automatic schema layout.

#Usage

import { Diagram, createDiagramStore } from '@primeui/vue-diagram';
import { DiagramErRoot, createDiagramErModule } from '@primeui/vue-diagram/er';
import { DiagramErInspectorUI } from './components/primeui/diagram/er';
const created = createDiagramStore(model, { notationModules: [createDiagramErModule()] });
if (!created.ok) throw new Error(created.diagnostics.map((item) => item.message).join('; '));
const store = created.value;
<Diagram.Root :store="store" page-id="page">
    <DiagramErRoot>
        <DiagramErInspectorUI />
        <Diagram.Viewport label="Order schema" style="height: 24rem" />
    </DiagramErRoot>
</Diagram.Root>

This setup skeleton assumes a valid model, a page with ID page and the copied DiagramErInspectorUI files at the shown local path. Adjust the page ID and import path for your application. Keep the inspector inside its matching semantic root. These ER examples use native compartments and row ports, so they need no notation symbol library. Use the complete example source for model construction, viewport composition and resource cleanup.

This example models Customers, Orders, OrderLines and Products. It combines the existing ER notation with a canvas, a searchable element field, history commands and a copied ER inspector. It edits descriptive diagram metadata; it does not connect to a database, generate SQL or execute a migration.

The copied inspector follows selection beneath the semantic root. For explicit record inspection, use DiagramErInspectorHost with entityId and read useDiagramErInspector() in a child.

#Keep semantic edits in the ER owner

The Store installs createDiagramErModule(). Under the matching Diagram root, DiagramErRoot supplies the semantic editor and status. The copied DiagramErInspectorUI follows the selected record; the shell and sidebar only arrange these controls.

Entities have distinct header, field-compartment, field and port IDs. The three relationships bind primary-key rows to the displayed foreign-key rows. Renaming or reordering a field keeps its identity and connected anchors. The delivery-date action copies the current entity's complete metadata and calls DiagramErEditor.update through DiagramErRoot.run; it does not set the Store directly or replace unrelated entities.

PK, FK, unique and nullable markers are descriptive. A foreign marker and a drawn row binding do not establish or propagate a database foreign key. Primary fields cannot be nullable within this profile; invalid edits are rejected with feedback. Completeness warnings help with diagram authoring and do not certify database correctness.

#Adapt the example

Replace the initial ER records while retaining globally distinct native IDs and valid row endpoints. Keep selection, permissions and history under the same Session. The host subscribes to commits for its current element list and field availability, then releases the subscription, Store and symbol registry on teardown. Persistence belongs to the application and is not configured here.

Copy SchemaModelerDemo.vue, schema.ts, SchemaWorkspace.vue, SchemaDeliveryDate.vue and SchemaFeedback.vue, together with the local editor-frame dependencies. The provider children read the current model and session through useDiagramContext(). Copy the ER inspector and editor UI files referenced by the imports into the application. Camera framing and panel changes add no semantic owner or model history.

Read Entity Relationship, Inspector composition, Permissions, History and Save and Load for the individual contracts. The UI-parts reference lists the copied forms and their providers.

Opening or closing a sidebar overlays the drawing without resizing or recentering it. Direct canvas selection and container resizing preserve your pan and zoom; use Fit explicitly when you want to frame the drawing again.