Skip to content

Validation

These examples document the validation behaviors from the canonical TopoViewer test-case catalog. Each section is generated from one test case and keeps the live viewport, topology YAML, and stylesheet YAML together.

Broken reference validation

What This Demonstrates

This fixture is intentionally invalid. It documents the semantic linter behavior for links that point at missing node IDs.

Expected Result

This fixture should not render as a normal topology. It should produce the documented validation behavior without hiding the diagnostic.

What To Inspect

  • Inspect the invalid or edge-case YAML and the expected diagnostic behavior.
  • Use this example to understand what CI should reject.

Use When

Use this pattern when documenting lint, schema, or invalid-input behavior.

Non-renderable validation fixture

This test case intentionally violates semantic validation. It is documented so the linter behavior is testable and stable.

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

What This Demonstrates

This fixture is intentionally invalid. It documents the security lint rule that rejects unsafe image references such as javascript: URLs.

Expected Result

This fixture should not render as a normal topology. It should produce the documented validation behavior without hiding the diagnostic.

What To Inspect

  • Inspect the invalid or edge-case YAML and the expected diagnostic behavior.
  • Use this example to understand what CI should reject.

Use When

Use this pattern when documenting lint, schema, or invalid-input behavior.

Non-renderable validation fixture

This test case intentionally violates semantic validation. It is documented so the linter behavior is testable and stable.

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

What This Demonstrates

This fixture is intentionally invalid. It documents renderer limit enforcement before a diagram can overload the browser or a documentation build.

Expected Result

This fixture should not render as a normal topology. It should produce the documented validation behavior without hiding the diagnostic.

What To Inspect

  • Inspect the invalid or edge-case YAML and the expected diagnostic behavior.
  • Use this example to understand what CI should reject.

Use When

Use this pattern when documenting lint, schema, or invalid-input behavior.

Non-renderable validation fixture

This test case intentionally violates semantic validation. It is documented so the linter behavior is testable and stable.

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