Diagram - Locale and RTL

#Usage

import { Diagram, type DiagramTextOverrides } from '@primeui/vue-diagram';

const text: DiagramTextOverrides = { noConnections: 'Bağlantı yok' };

<Diagram.Root :store="store" page-id="page" :text="text">
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

Define text with DiagramTextOverrides as shown below. Text overrides affect generated wording; they do not mirror world coordinates.

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

#UI Composition

import { DiagramEditorUI } from '@ui/diagram';

<Diagram.Root :store="store" page-id="page" :text="text">
    <DiagramEditorUI dir="rtl">
        <template #canvas><Diagram.Viewport label="Workflow" style="height: 24rem" /></template>
    </DiagramEditorUI>
</Diagram.Root>

The shell direction arranges UI regions; it does not mirror world coordinates or translate application controls.

Root text overrides control generated Diagram wording. Your application still owns toolbar titles, captions and copied-part interface copy. Interface direction is a separate layout choice, not a translation or graph-mirroring command.

#Change instance wording independently

Choose Turkish generated phrases, select/reveal an Explorer result and compare its feedback. Change direction separately. The example intentionally leaves copied Search/Select labels and the application caption in English.

Bind a stable DiagramTextOverrides object to root text. It is a partial DiagramText: omitted keys keep the English defaults. String and callback fields must retain their actual signatures. Two roots resolve their own phrases; there is no required global locale registration.

import { type DiagramTextOverrides } from '@primeui/vue-diagram';

const text: DiagramTextOverrides = {
    noConnections: 'Bağlantı yok',
    selected: (name) => `${name} seçildi.`,
    revealed: (name) => `${name} görünür alana getirildi.`
};

Override complete viewport instructions only when the translated text still matches actual keys. Callback diagnostic messages are generated by their own validation contract; replacing a phrase does not translate every diagnostic.

#Translate application and copied UI copy

The shell title, sidebar title, canvas label/hint and copied menu label expose inputs. Many other copied controls have literal strings in their local templates; translate those copied sources as application code. PrimeVue's own locale and number formatting belong to your application's PrimeVue setup. Root text does not configure them. Preserve command IDs and saved record identities while changing their visible labels.

#Arrange RTL without mirroring the diagram

DiagramEditorUI.dir accepts ltr/rtl and defaults ltr. The shared stylesheet uses logical start/end borders and grid placement under that direction. Collapsed sidebars and themed controls follow their implemented direction rules. A no-shell composition needs the host's own dir and logical CSS.

World coordinates, port positions, routes and arrow meaning remain unchanged. Horizontal/vertical layout algorithms take their own typed direction options; setting CSS direction does not rerun a layout or reverse a connector. Use Pages and layers for navigation and Editor composition for region placement.

Measure text after relevant language/font changes. Keep native input/IME behavior and accessible control names when translating custom node content. See Node UI and UI-parts reference.

#Related Docs

• Architecture
• First Diagram
• API