Skip to content

Nested regions

Nested regions let broad domains contain narrower regions. In this case the AS region contains an IS-IS L1 region and the member routers.

Expected Result

Regions can be nested so broad domains contain smaller domains.

Try It

  1. Copy the two YAML tabs into your own project.
  2. In topology.yaml, remove R05 only from region isis-l1's members list. Keep R05 itself and its membership in every other region.
  3. Reload. The isis-l1 hull contracts around its remaining member. R05 and its links remain visible; the outer AS region still contains it.
  4. Restore the original settings and reload to compare with the starting view.

Nested regions

version: "0.2"
graph:
  id: nested-regions
  layers:
    - id: igp
      labels:
        name: Igp
  nodes:
    - id: R01
      labels:
        node: router
        name: R01
      layers:
        - igp
      position:
        - 140
        - 190
    - id: R05
      labels:
        node: router
        role: abr
        name: R05
      layers:
        - igp
      position:
        - 380
        - 190
    - id: R09
      labels:
        node: router
        name: R09
      layers:
        - igp
      position:
        - 620
        - 190
  links:
    - id: r01-r05
      source: R01
      target: R05
      labels:
        protocol: isis
        name: R01 to R05 IS-IS adjacency
      layers:
        - igp
    - id: r05-r09
      source: R05
      target: R09
      labels:
        protocol: isis
        name: R05 to R09 IS-IS adjacency
      layers:
        - igp
  regions:
    - id: isis-l1
      labels:
        region: igp
        level: l1
        name: IS-IS L1
      parent: as65000
      members:
        - R01
        - R05
      layers:
        - igp
    - id: as65000
      labels:
        region: bgp
        name: AS 65000
      members:
        - R01
        - R05
        - R09
      layers:
        - igp
toggles:
  - id: showRegions
    default: true
    labels:
      name: Show regions

version: "0.2"
layout:
  mode: manual
  width: 760
  height: 380
icons:
  router:
    glyph: R
    fill: "#26313c"
    stroke: "#a3b0bd"
    svg: |
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="#f2f5f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="48" height="48" rx="6" fill="#26313c" stroke="none"/><path d="M8 24h32M24 8v32M8 24l6-6m-6 6 6 6m26-6-6-6m6 6-6 6M24 8l-6 6m6-6 6 6M24 40l-6-6m6 6 6-6"/></svg>
    alt: Router
  service:
    glyph: VPN
    fill: "#26313c"
    stroke: "#a3b0bd"
    svg: |
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="#f2f5f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="48" height="48" rx="6" fill="#26313c" stroke="none"/><rect x="7" y="9" width="34" height="30" rx="5"/><path d="M15 20h18M15 28h18"/><circle cx="24" cy="24" r="2"/></svg>
    alt: Virtual private network service
  controller:
    glyph: NSP
    fill: "#26313c"
    stroke: "#a3b0bd"
    svg: |
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="#f2f5f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="48" height="48" rx="6" fill="#26313c" stroke="none"/><rect x="6" y="8" width="36" height="26" rx="4"/><path d="M18 40h12M24 34v6M13 18h8m-8 7h18"/></svg>
    alt: Network controller
labelFields:
  - labels.name
stylesheet:
  - selector: node
    style:
      icon: router
      width: 84
      height: 60
      borderWidth: 2
      labelColor: var(--topoviewer-fg-strong)
      labelFontWeight: 600
      labelFontSize: 14
      metaColor: transparent
      backgroundColor: var(--topoviewer-panel-bg)
      borderColor: var(--topoviewer-edge-default)
  - selector: link
    style:
      lineColor: "var(--topoviewer-edge-default)"
      lineWidth: 1
      targetArrowShape: none
      labelColor: var(--topoviewer-fg-strong)
      textBackgroundColor: var(--topoviewer-edge-label-bg)
      labelFontSize: 12
      labelFontWeight: 600
  - selector: region
    style:
      backgroundColor: var(--topoviewer-region-fill)
      borderColor: var(--topoviewer-region-stroke)
      borderWidth: 1
      labelColor: var(--topoviewer-region-label-fg)
      draggable: true
      selectable: true
      zIndex: -20
      labelFontSize: 14
      labelFontWeight: 600
      headerPadding: 48
  - selector: region[labels.level = "l1"]
    style:
      backgroundColor: color-mix(in srgb, var(--topoviewer-info) 5%, var(--topoviewer-panel-bg))
      borderColor: var(--topoviewer-region-stroke)
  - selector: region[id = "as65000"]
    style:
      backgroundColor: color-mix(in srgb, var(--topoviewer-warning) 5%, var(--topoviewer-panel-bg))
      borderColor: var(--topoviewer-region-stroke)
      zIndex: -40
      headerPadding: 48
      paddingX: 56
      paddingY: 36
      parentPaddingX: 28
      parentPaddingY: 42
  - selector: region[id = "isis-l1"]
    style:
      minHeight: 132
      paddingX: 42
      paddingY: 22