Use svg++ as standard SVG plus diag extensions.
Start with a top-level column flex for page structure.
Use nested row/column flex instead of manual y-coordinate math.
Template repeated components (3+ uses) with diag:template/diag:instance.
Use diag:wrap="true" for multi-word text blocks.
For graph nodes with title + body text, set diag:node gap (typically 6-12) so lines are not cramped.
Use stable id attributes on connected elements before adding diag:arrow.
For diag:arrow, set from/to to element ids or diag:anchor ids (not template names or labels).
Use diag:anchor when you need precise connection points or timeline-style alignment.
Use diag:graph when topology/ranking matters (flowcharts, dependency graphs), but do not let it replace design quality.
Treat diag:graph as layout scaffolding: still use normal SVG/flex for sections, labels, legends, and visual hierarchy.
For dense diagrams, keep graph nodes content-rich (title + body), not single-word placeholders.
If graph output becomes cluttered, split into multiple subgraphs with diag:include or use hybrid flex + arrows.
Use diag:include for large reusable subgraphs instead of inlining very large trees.
Use <g transform="..."> to move/scale groups.
Mix raw SVG (lines, arrows, paths) with svg++ layout freely.
Assign stable id attributes for focused render and targeted updates.
