node-link-and-diagram-layout
Node-Link and Diagram Layout
Overview
Use this skill when the main problem is not which notation to use, but how to place connected nodes so the diagram stays readable. The job is to classify the graph family, choose a layout algorithm that matches the reading task, separate node placement from edge routing and overlap removal, and recommend a stack that can preserve those constraints in production.
Default assumption: the best automatic layout is the one that reinforces the intended reading path with the fewest crossings, bends, overlaps, and surprise placements. Do not treat force-directed layout as a generic answer for all diagrams. Trees, DAGs, port-constrained block diagrams, ERDs, and undirected exploration graphs usually need different algorithms.
For browser-facing node-link views, mobile layout is a graph-reading constraint, not only a CSS breakpoint. Use ../../references/foundations/mobile-first-responsive-visualization.md when choosing portrait focus views, optional landscape inspection, touch/pan/zoom ownership, and settings placement.
For operational graph workspaces, use ../../references/foundations/operational-visualization-workspaces.md so layout decisions account for outlines, inspectors, command bars, selected neighborhoods, URL state, mobile panels, and repeated navigation.