Validation
Explore validation behavior with a live diagram and its two source files. Each example includes an edit to try in your own copy.
Broken reference validation
This fixture is intentionally invalid. It documents the semantic linter behavior for links that point at missing node IDs.
Expected Result
This example intentionally produces a validation diagnostic. Inspect the message and source together before trying the repair below.
Try It
- Copy the two YAML tabs into local files and run the file validator with those paths. It should exit with an error.
- Find the diagnostic
broken-targetand locate the offending source field. - Correct that field in a local copy, then validate the same files again. The intended failure should disappear before you publish the diagram.
Intentional validation failure
This source is deliberately invalid. Copy the two YAML tabs and run the linked validator to see the diagnostic before repairing it.
version: "0.2"
graph:
id: broken-reference
layers:
- id: physical
labels:
name: Physical
nodes:
- id: A
labels:
node: router
name: A
layers:
- physical
position:
- 120
- 140
links:
- id: bad-link
source: A
target: MISSING
labels:
link: physical
name: Bad link
layers:
- physical
version: "0.2"
layout:
mode: manual
width: 420
height: 260
icons:
router:
glyph: R
fill: "#2563eb"
stroke: "#bfdbfe"
service:
glyph: VPN
fill: "#7c3aed"
stroke: "#ddd6fe"
controller:
glyph: NSP
fill: "#f59e0b"
stroke: "#fde68a"
labelFields:
- labels.name
stylesheet:
- selector: node
style:
icon: router
width: 84
height: 60
borderWidth: 3
labelColor: var(--topoviewer-fg-strong)
labelFontWeight: 800
- selector: link
style:
label: Link
lineColor: "#60a5fa"
lineWidth: 1
targetArrowShape: none
labelColor: var(--topoviewer-fg-strong)
textBackgroundColor: var(--topoviewer-edge-label-bg)
Unsafe image validation
This fixture is intentionally invalid. It documents the security lint rule that rejects unsafe image references such as javascript: URLs.
Expected Result
This example intentionally produces a validation diagnostic. Inspect the message and source together before trying the repair below.
Try It
- Copy the two YAML tabs into local files and run the file validator with those paths. It should exit with an error.
- Find the diagnostic
unsafe-image-referenceand locate the offending source field. - Correct that field in a local copy, then validate the same files again. The intended failure should disappear before you publish the diagram.
Intentional validation failure
This source is deliberately invalid. Copy the two YAML tabs and run the linked validator to see the diagnostic before repairing it.
version: "0.2"
graph:
id: unsafe-image
layers:
- id: physical
labels:
name: Physical
nodes:
- id: A
labels:
node: router
name: A
layers:
- physical
position:
- 120
- 140
links: []
version: "0.2"
layout:
mode: manual
width: 420
height: 260
icons:
unsafe:
src: javascript:alert(1)
alt: unsafe
stylesheet:
- selector: node
style:
icon: unsafe
width: 84
height: 60
- selector: node[id = "A"]
style:
icon: unsafe
Renderer limit validation
This fixture is intentionally invalid. It documents renderer limit enforcement before a diagram can overload the browser or a documentation build.
Expected Result
This example intentionally produces a validation diagnostic. Inspect the message and source together before trying the repair below.
Try It
- Copy the two YAML tabs into local files and run the file validator with those paths. It should exit with an error.
- Find the diagnostic
renderer-limitand locate the offending source field. - Correct that field in a local copy, then validate the same files again. The intended failure should disappear before you publish the diagram.
Intentional validation failure
This source is deliberately invalid. Copy the two YAML tabs and run the linked validator to see the diagnostic before repairing it.
version: "0.2"
graph:
id: limit-exceeded
layers:
- id: physical
labels:
name: Physical
nodes:
- id: A
labels:
node: router
name: A
layers:
- physical
position:
- 100
- 100
- id: B
labels:
node: router
name: B
layers:
- physical
position:
- 260
- 100
version: "0.2"
layout:
mode: manual
width: 420
height: 260
icons:
router:
glyph: R
fill: "#2563eb"
stroke: "#bfdbfe"
service:
glyph: VPN
fill: "#7c3aed"
stroke: "#ddd6fe"
controller:
glyph: NSP
fill: "#f59e0b"
stroke: "#fde68a"
labelFields:
- labels.name
stylesheet:
- selector: node
style:
icon: router
width: 84
height: 60
borderWidth: 3
labelColor: var(--topoviewer-fg-strong)
labelFontWeight: 800
limits:
maxNodes: 1