Figures & graphs / Dependencies
Graph
Styles for generated SVG diagrams that show which things depend on which.
Basic usage
HTML
<div class="graph-wrap">
<svg class="graph" style="--dd-draw-width:400px" viewBox="0 0 400 140" role="img" aria-label="doc-site depends on doc-ui">
<path class="edge" d="M200 42 C200 62,200 72,200 88"/>
<circle class="edge-tip" cx="200" cy="90" r="2.6"/>
<rect class="node" x="130" y="8" width="140" height="34" rx="7"/>
<text x="200" y="25">doc-site</text>
<rect class="node node-toned tone-blue" x="130" y="92" width="140" height="34" rx="7"/>
<text x="200" y="109">doc-ui</text>
</svg>
</div>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.graph-wrap / .graph | The scrolling region and the SVG. |
.node / .node-toned / .node-outside | Plain nodes, identity-toned nodes, and nodes outside the scope. |
.edge / .edge-dev / .edge-weak / .edge-bad | Normal, development-only, suggested, and invalid dependencies. |
Usage notes
Use Graph for dependencies, Flow graph for branching processes, Bar chart for quantities, Comparison plot for paired observations, Line plot for ordered measurements, Histogram for distributions, and Meter for parts of a whole. The generator computes coordinates. Draw edges before nodes. Explain the relationships in aria-label and nearby text.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.