How to Un-Nest Bridge

[owenthewizard]

stateDiagram-v2

[*] --> Peripherals: Power On

state Peripherals {
  state Ethernet {
    LinkUp: Link Up
    LinkDown: Link Down
    [*] --> LinkUp
    LinkUp --> LinkDown: Carrier Lost
    LinkDown --> LinkUp: Carrier Restored
    LinkUp --> Bridge: Sniff MAC
  }

  state Wifi: Wi-Fi {
    [*] --> Connect
    Connect --> Backoff: Fail
    Backoff --> Connect: Κ <= Ν
    Backoff --> Provision: Κ > Ν
    Connect --> Bridge: Success
  }
}

state Bridge {
  Relay: Relay Frames
  Provision: Provision
  [*] --> Relay
  Relay --> Provision: Button Held
  Provision --> [*]: Reboot
}

Loading

Bridge should be its own ""global"" node. If I move the Bridge definition above Peripherals:

stateDiagram-v2

[*] --> Peripherals: Power On

state Bridge {
  Relay: Relay Frames
  Provision: Provision
  [*] --> Relay
  Relay --> Provision: Button Held
  Provision --> [*]: Reboot
}   

state Peripherals {
  state Ethernet {
    LinkUp: Link Up
    LinkDown: Link Down
    [*] --> LinkUp
    LinkUp --> LinkDown: Carrier Lost
    LinkDown --> LinkUp: Carrier Restored
    LinkUp --> Bridge: Sniff MAC
  }

  state Wifi: Wi-Fi {
    [*] --> Connect
    Connect --> Backoff: Fail
    Backoff --> Connect: Κ <= Ν
    Backoff --> Provision: Κ > Ν
    Connect --> Bridge: Success
  }
}

Loading

[chrislyons-dev]

Yeah, this is the annoying part about Mermaid on GitHub — you don’t really get layout control, and it keeps pulling ‘Bridge’ into whatever box it feels like. So I moved from a state diagram to a flowchart, because flowcharts give a little more control over grouping and placement. Then I added invisible ‘exit’ nodes inside Ethernet and Wi‑Fi so the lines leave the box before they hit Bridge — that finally keeps Bridge outside.

In the flowchart version:

1. Peripherals stays as a big container with Ethernet and Wi‑Fi inside.
2. Bridge is a plain, global node that lives outside that box.
3. Ethernet and Wi‑Fi point to invisible exit points, and those exit points connect to Bridge.
4. The detailed Bridge steps live in a separate BridgeState subgraph off to the side.

It’s the same logic as the state diagram, just arranged in a way GitHub’s renderer is less likely to mess up.

flowchart LR
  classDef invis fill:transparent,stroke:transparent,color:transparent,stroke-width:0px;

  Bridge[Bridge]

  subgraph Peripherals["Peripherals"]
    direction TB

    subgraph Ethernet["Ethernet"]
      direction TB
      LinkUp[Link Up] -->|Carrier Lost| LinkDown[Link Down]
      LinkDown -->|Carrier Restored| LinkUp
      EthOut(( )):::invis
      LinkUp -->|Sniff MAC| EthOut
    end

    subgraph Wifi["Wi-Fi"]
      direction TB
      Connect -->|Fail| Backoff
      Backoff -->|K <= N| Connect
      Backoff -->|K > N| WifiOut
      Connect -->|Success| WifiOut
      WifiOut(( )):::invis
    end
  end

  EthOut --> Bridge
  WifiOut --> Bridge

  subgraph BridgeState["Bridge internals"]
    direction TB
    Relay[Relay Frames] -->|Button Held| Provision[Provision]
    Provision -->|Reboot| EndBridge([*])
  end

Loading

[owenthewizard]

Wow, thank you!