図とグラフ / 依存関係
Graph
依存関係を示す、生成SVG図のためのスタイル。
基本的な使い方
HTML
<div class="graph-wrap">
<svg class="graph" style="--dd-draw-width:400px" viewBox="0 0 400 140" role="img" aria-label="doc-siteは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>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.graph-wrap / .graph | スクロール領域とSVG。 |
.node / .node-toned / .node-outside | 通常のノード、識別の色を持つノード、対象範囲外のノード。 |
.edge / .edge-dev / .edge-weak / .edge-bad | 通常・開発時のみ・推奨・不正な依存関係。 |
使い方の注意
依存関係にはGraph、分岐にはFlow graph、量にはBar chart、二時点の比較にはComparison plot、順序のある観測にはLine plot、分布にはHistogram、全体の内訳にはMeterを使います。座標は生成側が計算します。線をノードより先に描き、aria-labelと近くの文章で関係を説明します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。