2.1.3 The Graph

01. The Node Graph

Visual

Description

[Graph_Overview](https://github.com/BDCPatrick/BDC_DialogBackend_Doc/blob/main/Images/Image_UI_GraphCanvas.png?raw=true)

The Node Graph is the central workspace where you construct the flow of your dialogue. Placing Nodes: Right-click to open the context menu or use Hotkeys to place new nodes. Connections: Drag wires between pins to define the logic flow. Comments: Use 'C' to create comment boxes to organize your graph. A single Dialog Data Asset (DDA) can hold multiple disconnected Dialogues (Chains) within the same graph.

02. The Detail Panel

Visual	Description
[Details_Panel](https://github.com/BDCPatrick/BDC_DialogBackend_Doc/blob/main/Images/Image_UI_DetailsPanel.png?raw=true)	The Detail Panel displays the editable properties of the currently selected Node. Unlike standard DataTables, this editor provides a custom Detail View for every node type (Message, Branch, Event, etc.) to make editing intuitive. Here you configure: Speaker Names & Text Rich Text Decorators (using the custom editor buttons) Conditions and Logic Audio & Avatar references

03. The Hotkey-Dropdown

Visual	Description
[Hotkeys_Box](https://github.com/BDCPatrick/BDC_DialogBackend_Doc/blob/main/Images/Image_UI_Hotkeys.png?raw=true)	Located in the top-right corner of the graph. This helper box lists the keyboard shortcuts for placing nodes quickly (e.g., Hold M + Click for Message Node). It can be collapsed or expanded to save screen space.

04. The Dialog Live Preview Window

Visual

Description

[Live_Preview](https://github.com/BDCPatrick/BDC_DialogBackend_Doc/blob/main/Images/Image_UI_Preview.png?raw=true)

A "What You See Is What You Get" preview of your selected Message or Option node. Live Update: Shows Rich Text effects, emojis, and variables in real-time as you type in the Details panel. Draggable: Click and hold the header to move the box anywhere on the graph. Resizable: Drag the bottom-right corner to resize the preview area. Widget: It renders the actual UMG widget defined in the Dialog Backend Settings.

05. Export to Localization

Icon	Description
[Export_Icon](https://github.com/BDCPatrick/BDC_DialogBackend_Doc/blob/main/Images/TexUI_ExportLoca.png?raw=true)	Toolbar Button: Export to Localization Automatically scans the entire Dialog Tree and moves all literal texts (Speaker Names and Messages) into String Tables. Creates/Updates ST_Loc_Dialog_Speakers (project-wide speakers list). Creates/Updates ST_Loc_Dialog_[AssetName]_Messages (asset-specific messages). Auto-Link: Replaces the text in your nodes with the Key reference to the String Table.

06. Unlink from Localization

Icon	Description
[Unlink_Icon](https://github.com/BDCPatrick/BDC_DialogBackend_Doc/blob/main/Images/TexUI_UnlinkLoca.png?raw=true)	Toolbar Button: Unlink from Localization Reverses the Export process. It looks up the current source string for every String Table reference in the graph. It replaces the String Table Key with the literal source string (e.g., "Hello World"). Useful for making quick edits to text without modifying the String Table directly.

07. The Save Button

Description

Standard Unreal Engine Save Asset functionality. When clicked, it synchronizes the visual representation of the Graph (Nodes, Connections, Positions) with the underlying DialogTreeDataTable and writes the data to disk.