図とグラフ / 分岐を説明する
Flow graph
判断・分岐・結果を、色に頼らず読めるようにします。
読み方を選ぶ
読者の目的に合う読み方は？
HTML
<figure class="plate plate-wide">
<p><strong>読者の目的に合う読み方は？</strong></p>
<div class="draw-wrap" role="region" aria-label="読み方を選ぶ分岐図" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 352" role="img" aria-label="読者の目的で情報を整理します。一件を探すならdocのカタログ、全体を理解するならsheetのレポートを選びます。">
<!-- 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">情報を整理する</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">読者の目的</text>
<text class="draw-label edge-label" x="160" y="144" text-anchor="middle">一件を探す</text>
<text class="draw-label edge-label" x="608" y="144" text-anchor="middle">全体を理解する</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">カタログ · .doc</text>
<text class="draw-note" x="160" y="328" text-anchor="middle">高密度で揃えた項目</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">レポート · .sheet</text>
<text class="draw-note" x="608" y="328" text-anchor="middle">主張・根拠・意味</text>
</svg>
</div>
<figcaption>ひし形が問いを示し、ラベル付きの矢印が答えを結果につなぎます。上から下に読みます。<span class="plate-source">doc-uiの二つの読み方。一つの文書で両レイアウトを組み合わせることもできます。</span>
</figcaption>
</figure>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.draw-wrap / .draw | 等倍固定の図とスクロール領域。drawの文字ロールを使い、整列はSVG属性で明示します。 |
.node-action / .node-decision / .node-terminal | 動作の長方形、判断のひし形、結果のノード。同じ寸法と1.5pxの輪郭を共有し、形で役割を区別します。 |
.edge-flow / .edge-arrow | 接続線と開いた矢印の頭。ノードより先に描き、線がノードの文字を横切らないようにします。 |
.edge-label | 簡潔な分岐ラベル。線は文字を避けて通し、背景色の縁取りは使いません。draw-labelと併用します。 |
.draw-label / .draw-strong / .draw-note | 共通の図中文字サイズで組むノード名と説明。 |
使い方の注意
選択や分岐を持つ処理に使います。図全体でノードの寸法を統一します。作例は224 × 64px、行間48px、矢印の先端と対象の間は8pxです。タイトルはdraw-strongで中央に置き、補足は箱の外に置きます。一覧の縮小例は96 × 40pxのノードと短いラベルを同じ文字サイズで使います。文字が収まらなければ一つだけでなく共通寸法を広げます。各分岐に条件を明記します。座標と経路は生成側で計算し、この部品は配置計算をしません。依存関係はGraph、分岐のない読む順序はCompositionを使います。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。