Skip to content

THE CUSTOMIZATION STUDIO

Your network.
A different point of view.

Give the diagram as much thought as the lab. Explore five distinct topologies, from a quiet addressing guide to a fabric after dark. Every device, callout, and boundary is rendered by the real viewer.

Open the playground Explore the collection 05 LABS   /   ALL SOURCE INCLUDED

Make it yours

Pick a lab. Change the atmosphere. Strip it back or bring every detail forward.

Try Synthwave for neon pink and cyan, Aurora for mint and ice blue, Ember for warm copper and coral, or Porcelain for a cream canvas with muted jewel tones.

LIVE CANVAS01 / MIDNIGHT FABRIC
# Wiring only. Configure addressing and routing as a separate exercise.
name: midnight-fabric
 
topology:
  defaults:
    kind: nokia_srlinux
    image: ghcr.io/nokia/srlinux:latest
  nodes:
    spine1: {type: ixrd3}
    spine2: {type: ixrd3}
    leaf1: {type: ixrd2}
    leaf2: {type: ixrd2}
    leaf3: {type: ixrd2}
    leaf4: {type: ixrd2}
    compute1:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
    compute2:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
    compute3:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
    compute4:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
  links:
    - endpoints: [spine1:e1-1, leaf1:e1-49]
    - endpoints: [spine1:e1-2, leaf2:e1-49]
    - endpoints: [spine1:e1-3, leaf3:e1-49]
    - endpoints: [spine1:e1-4, leaf4:e1-49]
    - endpoints: [spine2:e1-1, leaf1:e1-50]
    - endpoints: [spine2:e1-2, leaf2:e1-50]
    - endpoints: [spine2:e1-3, leaf3:e1-50]
    - endpoints: [spine2:e1-4, leaf4:e1-50]
    - endpoints: [leaf1:e1-1, compute1:eth1]
    - endpoints: [leaf2:e1-1, compute2:eth1]
    - endpoints: [leaf3:e1-1, compute3:eth1]
    - endpoints: [leaf4:e1-1, compute4:eth1]

Five labs. Five personalities.

These are starting points you can take apart. Each pairs a containerlab YAML file with an editable annotations file. The first four supply wiring for an exercise; the Linux walkthrough also configures addresses and routes.

01
INFRASTRUCTURE / MIDNIGHT

Every rack. Two paths.

10 nodes · 12 links

Two spines, four racks, and a clear visual hierarchy. Lime marks shared transit, teal marks the leaves, and slate marks the compute layer. Rounded rack groups give a dense fabric room to breathe.

# Wiring only. Configure addressing and routing as a separate exercise.
name: midnight-fabric
 
topology:
  defaults:
    kind: nokia_srlinux
    image: ghcr.io/nokia/srlinux:latest
  nodes:
    spine1: {type: ixrd3}
    spine2: {type: ixrd3}
    leaf1: {type: ixrd2}
    leaf2: {type: ixrd2}
    leaf3: {type: ixrd2}
    leaf4: {type: ixrd2}
    compute1:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
    compute2:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
    compute3:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
    compute4:
      kind: linux
      image: ghcr.io/srl-labs/network-multitool:latest
  links:
    - endpoints: [spine1:e1-1, leaf1:e1-49]
    - endpoints: [spine1:e1-2, leaf2:e1-49]
    - endpoints: [spine1:e1-3, leaf3:e1-49]
    - endpoints: [spine1:e1-4, leaf4:e1-49]
    - endpoints: [spine2:e1-1, leaf1:e1-50]
    - endpoints: [spine2:e1-2, leaf2:e1-50]
    - endpoints: [spine2:e1-3, leaf3:e1-50]
    - endpoints: [spine2:e1-4, leaf4:e1-50]
    - endpoints: [leaf1:e1-1, compute1:eth1]
    - endpoints: [leaf2:e1-1, compute2:eth1]
    - endpoints: [leaf3:e1-1, compute3:eth1]
    - endpoints: [leaf4:e1-1, compute4:eth1]

RACK GROUPS · ROLE COLORS · SAVED POSITIONS

Topology YAML ↓ · Annotations ↓ · Remix in playground ↑

02
FIELD NOTES / PAPER

Small fabric. Every detail.

3 nodes · 2 links

An illustration that belongs in an article. Inspired by the Fabric 101 documentation example: sage device cards, paired interface/IP callouts, and a quiet design note. The /31 addresses are a proposed plan, not device configuration.

# Proposed /31 addressing is documented in annotations, not applied here.
name: fabric-101
 
topology:
  defaults:
    kind: nokia_srlinux
    image: ghcr.io/nokia/srlinux:latest
  nodes:
    leaf1: {type: ixrd2}
    spine1: {type: ixrd3}
    leaf2: {type: ixrd2}
  links:
    - endpoints: [leaf1:e1-49, spine1:e1-1]
    - endpoints: [spine1:e1-2, leaf2:e1-49]

ENDPOINT CALLOUTS · MARKDOWN NOTES · QUIET CANVAS

Topology YAML ↓ · Annotations ↓ · Remix in playground ↑

03
SECURITY DESIGN / SANDSTONE

Draw the trust boundary.

6 nodes · 5 links

An outside client, public services, and a private application tier. Peach, amber, and lavender groups separate the zones; a dashed boundary makes the policy discussion visible. Configure forwarding and firewall rules as the next exercise.

# Connectivity exercise. Zone labels describe intended policy, not installed rules.
name: security-zones
 
topology:
  defaults:
    kind: linux
    image: ghcr.io/srl-labs/network-multitool:latest
  nodes:
    outside: {}
    gateway: {}
    frontend: {}
    api: {}
    database: {}
    admin: {}
  links:
    - endpoints: [outside:eth1, gateway:eth1]
    - endpoints: [gateway:eth2, frontend:eth1]
    - endpoints: [gateway:eth3, api:eth1]
    - endpoints: [api:eth2, database:eth1]
    - endpoints: [admin:eth1, gateway:eth4]

TRUST ZONES · SHAPE ANNOTATIONS · NUMBERED CALLOUTS

Topology YAML ↓ · Annotations ↓ · Remix in playground ↑

04
WIDE AREA / AFTER HOURS

The long way is still a way.

6 nodes · 6 links

Six cities form a physical ring around a central annotation. A violet canvas, two node colors, and a dashed halo turn the topology into a routing exercise: configure the network, break a link, then follow the alternate path.

# Physical ring only. Add routing and failure-detection configuration for the exercise.
name: wan-ring
 
topology:
  defaults:
    kind: nokia_srlinux
    image: ghcr.io/nokia/srlinux:latest
    type: ixrd2
  nodes:
    ams: {}
    fra: {}
    ber: {}
    waw: {}
    vie: {}
    par: {}
  links:
    - endpoints: [ams:e1-1, fra:e1-2]
    - endpoints: [fra:e1-1, ber:e1-2]
    - endpoints: [ber:e1-1, waw:e1-2]
    - endpoints: [waw:e1-1, vie:e1-2]
    - endpoints: [vie:e1-1, par:e1-2]
    - endpoints: [par:e1-1, ams:e1-2]

RADIAL LAYOUT · CIRCLE OVERLAY · EXERCISE PROMPT

Topology YAML ↓ · Annotations ↓ · Remix in playground ↑

05
LEARN BY DOING / MINT

Follow one packet.

3 nodes · 2 links

A runnable Linux lab with two subnets and IP forwarding. Address labels explain each hop; solid and dashed arrows show the request and return directions. Deploy the YAML, then run docker exec clab-packet-walk-client ping -c 3 10.10.2.2 on your lab host.

# Ready to ping: client -> router -> server, across two IPv4 subnets.
name: packet-walk
 
topology:
  defaults:
    kind: linux
    image: ghcr.io/srl-labs/network-multitool:latest
  nodes:
    client:
      exec:
        - ip address add 10.10.1.2/24 dev eth1
        - ip route add 10.10.2.0/24 via 10.10.1.1
    router:
      sysctls:
        net.ipv4.ip_forward: "1"
      exec:
        - ip address add 10.10.1.1/24 dev eth1
        - ip address add 10.10.2.1/24 dev eth2
    server:
      exec:
        - ip address add 10.10.2.2/24 dev eth1
        - ip route add 10.10.1.0/24 via 10.10.2.1
  links:
    - endpoints: [client:eth1, router:eth1]
    - endpoints: [router:eth2, server:eth1]

DIRECTIONAL ARROWS · SUBNET GROUPS · READY TO PING

Topology YAML ↓ · Annotations ↓ · Remix in playground ↑

Build your own visual language

Change the… Use… Try it in…
Shape of the story Saved nodeAnnotations positions and role-specific icons Midnight fabric
Rack, subnet, or security boundaries groupStyleAnnotations with fills, borders, labels, and corners Trust boundaries
Interface and addressing detail Markdown freeTextAnnotations with monospace text and a background Fabric field notes
Direction and emphasis freeShapeAnnotations lines, arrowheads, circles, and dashed borders Follow the packet
Mood of the canvas CSS color tokens, a pinned theme, and a grid Any lab → Blueprint palette
Amount of interface Borderless figure, full explorer, or split source view Presentation selector
Reading experience Disable wheel zoom, choose pan, set height and fit padding Playground controls

Annotations travel with the lab as a separate JSON file. You can edit them in the topology editor, or use these files as a starting point. Diagrams and annotations are read-only in the documentation viewer.

For all Markdown attributes, CSS tokens, and the HTML and React APIs, see the component reference.