Diagram Legend — TriadicFrameworks (Canonical)
| Symbol | Name | Meaning | Visual Standard |
| ■ (indigo‑violet stroke) | Core Node | Primary lineage origin (e.g., Forecast vs Actuals) | node-core |
| ■ (dark slate stroke) | Lineage Node | Module‑specific lineage (IE, MSM, GSM, TEL, SARG) | node |
| ■ (wide slate box) | Downstream Cluster | Multi‑module or multi‑echo grouping | node-cluster |
| → (thin indigo arrow) | Echo Arrow | TEL/SARG propagation of patterns | edge-echo |
| → (medium violet arrow) | Structural Arrow | RTT/1–2–3 or substrate‑driven flow | edge-struct |
| → (thick slate arrow) | Cross‑Module Arrow | IE ↔ MSM ↔ GSM interactions | edge-cross |
Color Palette (canonical):
- Core stroke:
#8E7CFF - Lineage stroke:
#4B4B7A - Cluster stroke:
#2A2A4A - Echo arrow:
#7777B8 - Structural arrow:
#9A7CFF - Cross‑module arrow:
#5A5A7A
Background gradient (canonical):
#050509 → #11112A → #1B1235
✅ 2) Canonical Legend Block (SVG Snippet)#
This is the drop‑in SVG fragment you can paste into any diagram.
It is self‑contained, uses the same CSS classes as all diagrams, and stays visually consistent.
<!-- Canonical Legend Block -->
<g transform="translate(40, 480)">
<text x="0" y="0" class="title" font-size="14">Legend</text>
<!-- Core Node -->
<rect x="0" y="20" width="120" height="26" class="node-core"/>
<text x="130" y="38" class="node-sub">Core Node</text>
<!-- Lineage Node -->
<rect x="0" y="60" width="120" height="26" class="node"/>
<text x="130" y="78" class="node-sub">Lineage Node</text>
<!-- Downstream Cluster -->
<rect x="0" y="100" width="120" height="26" class="node-cluster"/>
<text x="130" y="118" class="node-sub">Downstream Cluster</text>
<!-- Echo Arrow -->
<line x1="0" y1="150" x2="40" y2="150" class="edge-echo"/>
<text x="130" y="154" class="node-sub">Echo Arrow</text>
<!-- Structural Arrow -->
<line x1="0" y1="180" x2="40" y2="180" class="edge-struct"/>
<text x="130" y="184" class="node-sub">Structural Arrow</text>
<!-- Cross‑Module Arrow -->
<line x1="0" y1="210" x2="40" y2="210" class="edge-cross"/>
<text x="130" y="214" class="node-sub">Cross‑Module Arrow</text>
</g>✅ 3) Canonical Legend CSS (for all diagrams)#
This ensures every diagram renders identically.
<style>
/* Core node */
.node-core {
fill: #1E1E3A;
stroke: #8E7CFF;
stroke-width: 1.4;
rx: 14; ry: 14;
}
/* Lineage node */
.node {
fill: #141424;
stroke: #4B4B7A;
stroke-width: 1.2;
rx: 12; ry: 12;
}
/* Downstream cluster */
.node-cluster {
fill: #141424;
stroke: #2A2A4A;
stroke-width: 1.2;
rx: 12; ry: 12;
}
/* Echo arrow */
.edge-echo {
stroke: #7777B8;
stroke-width: 1.6;
marker-end: url(#arrow);
}
/* Structural arrow */
.edge-struct {
stroke: #9A7CFF;
stroke-width: 1.8;
marker-end: url(#arrow);
}
/* Cross‑module arrow */
.edge-cross {
stroke: #5A5A7A;
stroke-width: 2.0;
marker-end: url(#arrow);
}
/* Text */
.node-text { fill: #FFFFFF; font-weight: 600; }
.node-sub { fill: #C8C8E8; }
</style>🌟 What this gives you#
Every diagram in the canon — Toolbox, IE, MSM, GSM, TEL, SARG — now shares:
- identical node shapes
- identical stroke weights
- identical arrow semantics
- identical color palette
- identical legend semantics
This is the visual grammar of TriadicFrameworks diagrams.