Connections-Map Layout Sample
Links
Antecedents
Descendants
Graph
Small map
%%{init: {'flowchart': {'useMaxWidth': false}}}%%
flowchart BT
accTitle: Connections map for the focus topic
accDescr: Antecedents A and B feed the focus topic, which leads to descendants X and Y. The focus label is deliberately long, so its box must not clip its own text or push the graph past the column.
focus[Focus Topic with a deliberately long label that must fit its own box]
a1[Antecedent A] --> focus
a2[Antecedent B] --> focus
focus --> d1[Descendant X]
focus --> d2[Descendant Y]
Large map
Past roughly 15 to 20 nodes on one rank the small map's flat fan-out sprawls (see NOTES.md, Large maps). This map groups antecedents and descendants into open subgraphs, switches to the ELK layout engine, and states each relationship style once in a legend instead of on every edge. Every node stays clickable: the subgraphs are never collapsed, because view: collapsed drops a cluster's nodes, and their links, from the render entirely. A consumer wanting real per-node links adds a click directive per node and sets window.mermaidSecurityLevel = 'loose' (see NOTES.md, Zoom); this fixture leaves the default strict, so it stays a two-<script> fixture.
---
config:
layout: elk
flowchart:
useMaxWidth: false
elk:
nodePlacementStrategy: NETWORK_SIMPLEX
---
flowchart TD
accTitle: Large connections map for the focus topic
accDescr: A focus topic with two eras of antecedents and descendants grouped into open subgraphs, every node individually clickable, and a legend explaining that a solid line is a technological connection and a dashed line is a conceptual one.
subgraph legend["Legend"]
direction LR
key1((" ")) -->|technological| key2((" "))
key3((" ")) -.->|conceptual| key4((" "))
end
focus[Focus Topic]
subgraph pre2010["Antecedents, pre-2010"]
a1[Antecedent A]
a2[Antecedent B]
a3[Antecedent C]
a4[Antecedent D]
a5[Antecedent E]
a6[Antecedent F]
end
subgraph post2010["Descendants, post-2010"]
d1[Descendant W]
d2[Descendant X]
d3[Descendant Y]
d4[Descendant Z]
end
a1 --> focus
a2 --> focus
a3 --> focus
a4 -.-> focus
a5 -.-> focus
a6 --> focus
focus --> d1
focus --> d2
focus -.-> d3
focus --> d4