Skip to content

Text

Explore text behavior with a live diagram and its two source files. Each example includes an edit to try in your own copy.

Standalone text boxes

Standalone text belongs under diagram.texts, not graph.nodes. Use it for titles, explanatory copy, maintenance notes, and other presentation content that must remain selectable, resizable, layer-aware, and reviewable in YAML.

Expected Result

Layer-aware text boxes add editable canvas copy without creating graph objects.

Try It

  1. Copy the two YAML tabs into your own project.
  2. In diagram.texts.0 in topology.yaml, set diagram.texts.0.text to "Maintenance window: 22:00 UTC".
  3. Reload. The annotation text changes without creating or altering a graph relationship.
  4. Restore the original settings and reload to compare with the starting view.

Standalone text boxes

version: "0.2"
graph:
  id: standalone-text-boxes
  layers:
    - id: annotations
      labels:
        name: Annotations
diagram:
  texts:
    - id: title
      text: Network maintenance window
      position: [70, 70]
      layers: [annotations]
    - id: detail
      text: |-
        Core links may reconverge between 23:00 and 23:15 UTC.
        Customer traffic remains on protected paths.
      position: [70, 160]
      layers: [annotations]
    - id: rotated-note
      text: Change approved
      position: [610, 105]
      layers: [annotations]

version: "0.2"
layout:
  mode: manual
  width: 860
  height: 340
stylesheet:
  - selector: text
    style:
      color: var(--topoviewer-fg-strong)
      backgroundColor: var(--topoviewer-panel-bg)
      borderColor: color-mix(in srgb, var(--topoviewer-accent) 48%, transparent)
      borderWidth: 1
      borderRadius: 6
      fontSize: 16
      lineHeight: 1.45
      padding: 14
      selectable: true
  - selector: text[id = "title"]
    style:
      backgroundColor: color-mix(in srgb, var(--topoviewer-accent) 12%, var(--topoviewer-panel-bg))
      borderColor: "var(--topoviewer-accent)"
      borderWidth: 2
      fontSize: 24
      fontWeight: 800
      verticalAlign: middle
      width: 480
      height: 64
  - selector: text[id = "rotated-note"]
    style:
      backgroundColor: color-mix(in srgb, var(--topoviewer-info) 12%, var(--topoviewer-panel-bg))
      borderColor: "var(--topoviewer-info)"
      color: var(--topoviewer-fg-strong)
      fontWeight: 800
      width: 180
      height: 54
      rotation: 8
      textAlign: center
      verticalAlign: middle
  - selector: text[id = "detail"]
    style:
      width: 480
      height: 110