A full-screen relation-graph viewer that overlays top and left SVG rulers on the visible canvas. It composes a center cluster and a right-side tree with separate layout passes, then converts viewport coordinates back into canvas coordinates so the ruler stays accurate while users pan or zoom.

Canvas Coordinate Ruler for a Mixed Graph Workspace

What This Example Builds

This example builds a full-screen relation-graph viewer with two extra workspace aids layered over it: drafting-style rulers along the top and left edges, and a floating helper window above the canvas. The graph itself combines two different structures on one surface: a circular center cluster and a separate tree placed to its right.

Users can pan and zoom the graph, switch canvas wheel and drag modes from the h