Graph and hierarchical layouts (Wolfram's Data Visualization guide), rendered by one element, <notatio-graph-plot>. type picks the layout; data is JSON (a nested tree, or { nodes?, edges } — see each story below); label is an optional title. Every layout is a pure, deterministic function of its input — no randomness, so the same data always renders the same picture.
Leaves take sequential x left-to-right; each internal node sits at the mean x of its children.
<notatio-graph-plot type="tree" data='{"label":"root","children":[{"label":"a","children":[{"label":"a1"},{"label":"a2"}]},{"label":"b"}]}' />Node order (and so position) comes from first appearance in edges when nodes is omitted.
<notatio-graph-plot type="graph" data='{"edges":[["a","b"],["b","c"],["c","d"],["d","a"],["a","c"]]}' /><notatio-graph-plot type="graph" directed data='{"edges":[["a","b"],["b","c"],["c","a"]]}' />Layer(v) = 1 + the longest path from any source into v; nodes within a layer keep a deterministic (first-seen) order.
<notatio-graph-plot type="layered" data='{"edges":[["a","b"],["a","c"],["b","d"],["c","d"],["d","e"]]}' />Leaves sit along the x axis; each internal node's height sets where its bracket is drawn (inferred as one more than its tallest child when omitted).
<notatio-graph-plot type="dendrogram" data='{"height":3,"children":[{"height":1,"children":[{"label":"x"},{"label":"y"}]},{"height":2,"children":[{"label":"z"},{"label":"w"}]}]}' />TreePlot/Dendrogram support only single-parent trees; DAG-shaped hierarchies (shared descendants) aren't modeled.GraphPlot variant, still seeded deterministically (fixed initial positions, fixed iteration count) rather than the current circular layout.ClusteringComponents-style palette per connected component.