This example turns relation-graph into a full diagram editor workbench with creation tools, contextual node and line editing, grouping, container nodes, layout switching, and local history. It is a strong reference for teams that need one integrated editing shell rather than a narrow single-feature demo.

Building a Diagram Editor Workbench with relation-graph

What This Example Builds

This example builds a full-screen diagram editor rather than a read-only graph viewer. The canvas is wrapped by a top toolbar, a bottom creation palette, floating node and line toolbars, right-click menus, a layout dialog, optional rulers, a custom background layer, and a minimap toggle.

Users can create new nodes and lines from templates, resize and restyle nodes, edit line geometry and markers, group selec