Figures & graphs / Name a part of a figure
Annotate
Number a part of a drawing and explain it underneath, so the sentence stays text and the picture stays a picture.
Three exits, named underneath
Where does a statement stop?
- Not analyzed — 5 statements the run never reached. An absence of measurement, not a measurement of zero.
- Dependency not modeled — 709 statements stop where a call leaves the analyzed set. The catalog knows they exist and not what they say.
- Stopped at a cycle or limit — 95 statements reached the search budget. A larger budget would move some of them; how many is not known.
HTML
<figure class="plate plate-wide" id="fig-stops">
<p><strong>Where does a statement stop?</strong></p>
<div class="draw-wrap" role="region" aria-label="Statement resolution and its three exits" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 216" role="img" aria-label="Of 844 statements, 5 are not analyzed, 709 stop where a dependency is not modeled, 95 stop at a cycle or a search limit, and 35 are fully determined.">
<rect class="draw-box" x="16" y="24" width="148" height="56" rx="8"/>
<text class="draw-value" x="90" y="46" text-anchor="middle">844</text>
<text class="draw-note" x="90" y="66" text-anchor="middle">statements</text>
<rect class="draw-box" x="212" y="24" width="148" height="56" rx="8"/>
<text class="draw-value" x="286" y="46" text-anchor="middle">callers</text>
<text class="draw-note" x="286" y="66" text-anchor="middle">resolved</text>
<rect class="draw-box" x="408" y="24" width="148" height="56" rx="8"/>
<text class="draw-value" x="482" y="46" text-anchor="middle">dependencies</text>
<text class="draw-note" x="482" y="66" text-anchor="middle">followed</text>
<rect class="draw-box-toned tone-accent" x="604" y="24" width="148" height="56" rx="8"/>
<text class="draw-value draw-accent" x="678" y="46" text-anchor="middle">35</text>
<text class="draw-note" x="678" y="66" text-anchor="middle">fully determined</text>
<path class="draw-line draw-arrow" d="M168 52H208"/>
<path class="draw-line draw-arrow" d="M364 52H404"/>
<path class="draw-line draw-arrow" d="M560 52H600"/>
<path class="draw-line draw-arrow" d="M90 84V144"/>
<rect class="draw-box-open tone-danger" x="18" y="148" width="144" height="52" rx="8"/>
<text class="draw-value" x="90" y="170" text-anchor="middle">5</text>
<text class="draw-note" x="90" y="190" text-anchor="middle">not analyzed</text>
<g class="mark mark-open tone-danger" transform="translate(182 174)"><circle/><text>1</text></g>
<path class="draw-line draw-arrow" d="M286 84V144"/>
<rect class="draw-box-open" x="214" y="148" width="144" height="52" rx="8"/>
<text class="draw-value" x="286" y="170" text-anchor="middle">709</text>
<text class="draw-note" x="286" y="190" text-anchor="middle">no model</text>
<g class="mark mark-open" transform="translate(378 174)"><circle/><text>2</text></g>
<path class="draw-line draw-arrow" d="M482 84V144"/>
<rect class="draw-box-open" x="410" y="148" width="144" height="52" rx="8"/>
<text class="draw-value" x="482" y="170" text-anchor="middle">95</text>
<text class="draw-note" x="482" y="190" text-anchor="middle">cycle or limit</text>
<g class="mark mark-open" transform="translate(574 174)"><circle/><text>3</text></g>
</svg>
</div>
<ol class="legend legend-key">
<li class="mark-open tone-danger"><span class="legend-name">Not analyzed</span> — 5 statements the run never reached. An absence of measurement, not a measurement of zero.</li>
<li class="mark-open"><span class="legend-name">Dependency not modeled</span> — 709 statements stop where a call leaves the analyzed set. The catalog knows they exist and not what they say.</li>
<li class="mark-open"><span class="legend-name">Stopped at a cycle or limit</span> — 95 statements reached the search budget. A larger budget would move some of them; how many is not known.</li>
</ol>
<figcaption>35 of 844 statements are fully determined. The other 809 are what this figure is about.
<span class="plate-source">WordPress SQL catalog snapshot · resolution categories, 35 + 709 + 95 + 5 = 844. Counts describe one analysis run, not WordPress.</span>
</figcaption>
</figure>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.mark | The numbered token. One class, two renderings: <g class="mark"><circle/><text>1</text></g> placed with a transform in SVG, and <span class="mark">1</span> in HTML. Both read the tone. |
.mark-open | A callout on something that is not there. Dashed, and toned: warn for “as far as we got”, tone-danger for a measurement that does not exist, tone-neutral for a hole. |
.leader / .leader-foot | The line from a mark to what it names, and the dot at its target. No arrowhead: a leader names a place, an arrow points a direction. |
.legend legend-key | The numbered list underneath. It supplies its own numbers from a counter, so the key and the drawing cannot drift apart; an item carrying its own .mark takes over instead. |
.legend-name | The subject a key entry defines, set inline with the sentence that defines it. |
Usage notes
Put numbers in the drawing and sentences in the key. A drawing has room for “709” and not for the clause explaining it, and the clause is the half that has to reflow, print at the reader’s size and be searchable — writing it as more <text> turns a diagram into an image of words. Keep the marks at their drawn size; they do not scale with the figure. Route leaders to the edge of a mark rather than painting a background halo behind it, which is wrong on any surface but the page. Running text still points with .ref and .ref ref-mark: those point at a figure, a mark labels one.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.