Diagram Design: evidence-driven visual explanations
Reading Diagram Design source: what the rectangle checker catches and misses
Reproduce 16 cases against the pinned geometry checker, including paint order, mask thresholds and the difference between a regex heuristic and browser layout.
What you will learn
- Follow the rectangles through the checker
- Observe positive and negative cases
- Understand the parser boundary
Before you start
- Basic HTML and SVG concepts
- Ability to distinguish a system relationship from its visual layout
Choose a useful representation, account for simplification and interpret checker findings within their real scope.
Key takeaways
- Source order is part of the reported collision condition.
- Shape thresholds and attribute syntax limit coverage.
- A zero-finding result is not a browser visibility certificate.
Follow the rectangles through the checker
The Python verifier reads an HTML file and extracts rectangles with a regular expression. It recognizes nodes at least 60 by 40 units and mask-like rectangles 20–200 wide and 8–14 high. Each rectangle records coordinates and source offset, allowing the checker to reason about document paint order without launching a browser.
For every mask it considers only later nodes. It computes overlap along both axes, ignores overlaps of one unit or less, and exempts a mask fully contained in a node as a badge. A partial overlap with a later node produces a finding. The implementation stops after the first reported node for that mask.
Observe positive and negative cases
Our isolated run used the unchanged upstream command-line script on sixteen synthetic HTML files. A mask partially covered by a later node produced one finding; reversing their order produced none. A contained badge and an earlier zone were accepted. One-unit overlap was tolerated, while two-unit overlap was reported.
The width boundary matters: a 200-wide mask was recognized, while 201 fell outside the heuristic. A 15-high rectangle also escaped mask classification. Those results are properties of the checker, not evidence that the excluded shapes will look correct in a browser. Its thresholds intentionally describe the project’s expected template shapes.
Understand the parser boundary
The inspected expression expects double-quoted x, y, width and height in that order. Equivalent reordered or single-quoted attributes were not parsed in our cases. It also did not apply a transform or model fill opacity: a translated-away mask and an unfilled later node still produced findings under their raw coordinates.
These observations motivate layered verification, not bypassing the checker or declaring a vulnerability. Keep its accepted markup convention, use targeted tests for project-specific shapes, and inspect rendered output for transforms, text width and actual paint. The experiment executed Python only; it did not render the fixture HTML or run the entire upstream suite.
Implementation steps
- 1
Read the parser and classification thresholds.
- 2
Create one expected failure and one legal counterpart.
- 3
Test boundary values and equivalent markup spellings.
- 4
Compare findings with a separate rendered review.
Copy-ready example
{
"upstreamCasesExecuted": 16,
"laterNodeFindings": 1,
"earlierNodeFindings": 0,
"width200Findings": 1,
"width201Findings": 0,
"reorderedAttributesFindings": 0,
"transformsAppliedByChecker": false,
"browserVisibilityVerified": false
}Frequently asked questions
Does zero findings mean no label can be clipped?
No. The checker covers a specific rectangular heuristic and attribute convention. Text layout, transforms and other paint behavior need additional inspection.
Were the results from a rewritten teaching model?
No. The review executed the pinned upstream geometry CLI unchanged against synthetic files. The fixtures and expected outcomes were authored for this review.
Sources
- scripts/verify-geometry.pySource checked 2026-09-08
- scripts/test-verify-geometry.pySource checked 2026-09-08
- docs/adr/0005-label-geometry-is-verified.mdSource checked 2026-09-08