Styles and Themes

Learn how to customize the appearance of nodes, links, and subgraphs.

Themes

Built-in themes are light (default) and dark.

settings:
  theme: dark

Specify Theme via CLI

npx @shumoku/cli render network.yaml --theme dark -o diagram.svg

Node Styling

Apply styles to individual nodes:

nodes:
  - id: router-1
    label: "Router"
    type: router
    style:
      fill: "#e3f2fd"           # Background color
      stroke: "#1565c0"         # Border color
      strokeWidth: 2            # Border width
      strokeDasharray: "5 5"    # Dashed line (for planned devices, etc.)
      textColor: "#333333"      # Text color
      fontSize: 12              # Font size
      fontWeight: bold          # Font weight
      opacity: 0.8              # Opacity

Representing Planned Devices

nodes:
  - id: new-switch
    label:
      - "new-sw-01"
      - "(Planned Q2)"
    type: switch
    style:
      stroke: "#9CA3AF"
      strokeDasharray: "5 5"
      opacity: 0.7

Representing Virtual Machines

nodes:
  - id: vm-web
    label: "VM-Web"
    type: server
    style:
      strokeDasharray: "4 4"    # Dashed line for virtual
      opacity: 0.9

Link Styling

links:
  - from: router-1
    to: switch-1
    style:
      stroke: "#2196F3"         # Line color
      strokeWidth: 2            # Line width
      strokeDasharray: "5 5"    # Dashed line
      opacity: 0.8              # Opacity
      minLength: 100            # Minimum length (useful for HA pair spacing)

Color Coding by Cable Type Example

links:
  # SMF (Single Mode Fiber) - Yellow
  - from: router-1
    to: router-2
    standard: 100GBASE-LR4
    style:
      stroke: "#eab308"

  # OM4 (Multimode Fiber) - Cyan
  - from: switch-1
    to: switch-2
    standard: 40GBASE-SR4
    style:
      stroke: "#06b6d4"

  # Cat6a - Purple
  - from: switch-1
    to: server-1
    standard: 10GBASE-T
    style:
      stroke: "#8b5cf6"

Subgraph Styling

subgraphs:
  - id: dmz
    label: "DMZ"
    style:
      fill: "accent-red"        # Surface token (recommended)
      strokeWidth: 2            # Border width
      strokeDasharray: "5 5"    # Dashed line
      labelPosition: top        # Label position
      labelFontSize: 14         # Label font size
      padding: 20               # Inner padding
      nodeSpacing: 50           # Node spacing
      rankSpacing: 100          # Rank spacing

Surface Tokens

You can specify surface tokens for fill. When using tokens, appropriate colors are automatically applied based on the theme (light/dark).

Token	Description
`surface-1`	Lightest background (default)
`surface-2`	Slightly darker background
`surface-3`	Even darker background
`accent-blue`	Blue accent (cloud, external connections)
`accent-green`	Green accent (internal network, success state)
`accent-red`	Red accent (DMZ, security zones)
`accent-amber`	Amber accent (highlight, warning)
`accent-purple`	Purple accent

subgraphs:
  - id: cloud
    label: "Cloud"
    style:
      fill: "accent-blue"

  - id: internal
    label: "Internal Network"
    style:
      fill: "accent-green"

  - id: dmz
    label: "DMZ"
    style:
      fill: "accent-red"

Traditional hex color values are still supported:

style:
  fill: "#fff5f5"
  stroke: "#d4a017"

Label Position

labelPosition	Description
`top`	Top (default)
`bottom`	Bottom
`left`	Left
`right`	Right

Global Settings

Configure diagram-wide settings with settings:

settings:
  direction: TB           # Layout direction
  theme: light            # Theme
  nodeSpacing: 50         # Node spacing
  rankSpacing: 100        # Rank spacing
  subgraphPadding: 20     # Subgraph inner padding

Layout Direction

direction	Aliases	Description
`TB`	`top-bottom`	Top to bottom (default)
`BT`	`bottom-top`	Bottom to top
`LR`	`left-right`	Left to right
`RL`	`right-left`	Right to left

Legend

Display a legend to explain bandwidth and device types:

settings:
  legend: true    # Simple enable

Detailed settings:

settings:
  legend:
    enabled: true
    position: top-right       # Position
    showDeviceTypes: true     # Show device types
    showBandwidth: true       # Show bandwidth
    showCableTypes: true      # Show cable types
    showVlans: true           # Show VLANs

position	Description
`top-left`	Top left
`top-right`	Top right (default)
`bottom-left`	Bottom left
`bottom-right`	Bottom right

Canvas Settings (Print/Output Size)

Control output size:

settings:
  canvas:
    preset: A4              # Paper size preset
    orientation: landscape  # Landscape
    dpi: 150                # DPI (for printing)
    fit: true               # Fit content
    padding: 20             # Margin

Presets

A0, A1, A2, A3, A4, B0, B1, B2, B3, B4, letter, legal, tabloid

Custom Size

settings:
  canvas:
    width: 1920
    height: 1080

Custom Themes (TypeScript)

When using from TypeScript, you can fully customize themes:

import { createTheme, mergeTheme, darkTheme } from 'shumoku'

// Create a new theme (extend a base theme with partial overrides)
const customTheme = createTheme({
  extends: darkTheme,        // Base theme (default: lightTheme)
  overrides: {
    colors: {
      background: '#1a1a2e',
      surface: '#16213e',
      primary: '#e94560'
    }
  }
})

// Modify parts of an existing theme
const myDarkTheme = mergeTheme(darkTheme, {
  node: {
    fill: '#2d2d2d'
  }
})