図とグラフ / 図の部分を指す
Annotate
図の部分に番号を付け、説明を下に置きます。説明文を文字として読み、図を図として見られます。
三つの停止理由を下で説明する
SQL文の解析はどこで止まるか？
- 未解析 — 処理が到達しなかった5文。ゼロの測定ではなく、測定そのものの不在です。
- 依存モデルなし — 呼び出しが解析対象の外に出た709文。存在はわかっていても、内容は特定できません。
- 循環または探索限界 — 探索予算に達した95文。予算を増やせば一部は進みますが、何件進むかは不明です。
HTML
<figure class="plate plate-wide" id="fig-stops">
<p><strong>SQL文の解析はどこで止まるか？</strong></p>
<div class="draw-wrap" role="region" aria-label="SQL文の解決状況と三つの停止理由" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 216" role="img" aria-label="844文のうち、5文は未解析、709文は依存モデルがなく停止、95文は循環または探索限界で停止、35文は完全に特定できました。">
<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">SQL文</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">呼び出し元</text>
<text class="draw-note" x="286" y="66" text-anchor="middle">解決済み</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">依存関係</text>
<text class="draw-note" x="482" y="66" text-anchor="middle">追跡済み</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">完全に特定</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">未解析</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">モデルなし</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">循環・限界</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">未解析</span> — 処理が到達しなかった5文。ゼロの測定ではなく、測定そのものの不在です。</li>
<li class="mark-open"><span class="legend-name">依存モデルなし</span> — 呼び出しが解析対象の外に出た709文。存在はわかっていても、内容は特定できません。</li>
<li class="mark-open"><span class="legend-name">循環または探索限界</span> — 探索予算に達した95文。予算を増やせば一部は進みますが、何件進むかは不明です。</li>
</ol>
<figcaption>844文中35文を完全に特定できました。この図の主題は残る809文です。<span class="plate-source">WordPress SQLカタログのスナップショット · 解決状況、35 + 709 + 95 + 5 = 844。件数は一回の解析結果であり、WordPress全体を表すものではありません。</span>
</figcaption>
</figure>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.mark | 番号付きの印。一つのクラスを、SVGではtransformで配置した<g class="mark"><circle/><text>1</text></g>、HTMLでは<span class="mark">1</span>で表示します。どちらもトーンを読みます。 |
.mark-open | 不在を指す破線の印。到達限界はwarn、測定の不在はtone-danger、欠落はtone-neutralで示します。 |
.leader / .leader-foot | 印から対象へ伸ばす線と、終点の点。引き出し線は場所を指し、矢印は方向を示すため、矢印の頭は付けません。 |
.legend legend-key | 図の下の番号付きリスト。カウンタで採番し、図とのずれを防ぎます。項目に.markがあれば、そちらの番号を使います。 |
.legend-name | 凡例で説明する対象名。説明文と同じ行に組みます。 |
使い方の注意
番号は図の中、文章は下の凡例に置きます。図には709という値の居場所はあっても、その説明節の居場所はありません。説明は折り返し・印刷・検索できる文字として残します。印は作図時の寸法を保ちます。引き出し線は印の端に接続し、背景色の縁取りで隠さないでください。本文から図を指すのは.refや.ref ref-mark、図の部分に名前を付けるのは.markです。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。