Figures & graphs / Explain a branch
Flow graph
Make a decision, its branches, and their outcomes readable without relying on color.
Choose a reading mode
Which reading mode fits the reader’s task?
<figure class="plate plate-wide">
<p><strong>Which reading mode fits the reader’s task?</strong></p>
<div class="draw-wrap" role="region" aria-label="Reading mode decision diagram" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 352" role="img" aria-label="Organize the information by the reader’s task. To find one entry, choose the doc catalog layout. To understand the whole, choose the sheet report layout.">
<!-- One node module: 224 × 64. Row pitch: 112 (64 + 48). -->
<path class="edge-flow draw-arrow" d="M384 80V120"/>
<path class="edge-flow draw-arrow" d="M272 160H160V232"/>
<path class="edge-flow draw-arrow" d="M496 160H608V232"/>
<rect class="node-action" x="272" y="16" width="224" height="64" rx="4"/>
<text class="draw-strong" x="384" y="48" text-anchor="middle" dominant-baseline="middle">Organize the information</text>
<path class="node-decision" d="M384 128L496 160L384 192L272 160Z"/>
<text class="draw-strong" x="384" y="160" text-anchor="middle" dominant-baseline="middle">Reader’s task</text>
<text class="draw-label edge-label" x="160" y="144" text-anchor="middle">Find one entry</text>
<text class="draw-label edge-label" x="608" y="144" text-anchor="middle">Understand the whole</text>
<rect class="node-terminal tone-blue" x="48" y="240" width="224" height="64" rx="32"/>
<text class="draw-strong" x="160" y="272" text-anchor="middle" dominant-baseline="middle">Catalog · .doc</text>
<text class="draw-note" x="160" y="328" text-anchor="middle">Dense, aligned entries</text>
<rect class="node-terminal tone-teal" x="496" y="240" width="224" height="64" rx="32"/>
<text class="draw-strong" x="608" y="272" text-anchor="middle" dominant-baseline="middle">Report · .sheet</text>
<text class="draw-note" x="608" y="328" text-anchor="middle">Point, evidence, meaning</text>
</svg>
</div>
<figcaption>A diamond asks the question; labeled arrows carry each answer to an outcome. Read from top to bottom.
<span class="plate-source">doc-ui reading modes. A document may combine both layouts.</span>
</figcaption>
</figure>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.draw-wrap / .draw | The fixed-size diagram and its scrolling region; use draw text roles and explicit SVG alignment attributes. |
.node-action / .node-decision / .node-terminal | An action rectangle, a decision diamond, and an outcome. All share one node size and a 1.5px outline; shape identifies the role. |
.edge-flow / .edge-arrow | Connector paths and open arrowheads. Draw these before nodes so lines cannot cross the node labels. |
.edge-label | A plain branch label. Route connectors clear of the text; do not paint a background halo around letters. Use with draw-label. |
.draw-label / .draw-strong / .draw-note | Node names and explanatory text at the shared drawing type size. |
Usage notes
Use for processes with choices or branches. Choose one node module for the whole figure: the full example uses 224 × 64px, 48px between rows, and 8px between arrow tips and their targets. Center every node title with draw-strong; place supporting notes outside the boxes. The index uses 96 × 40px nodes and shorter labels at the same text size. If a label needs more room, enlarge the shared module rather than one node. Put a visible condition on every branch. The generator computes coordinates and routes; this component does not run a layout engine. Graph is for dependencies; Composition’s ordered flow is for an unbranched reading sequence.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.