Set direction in Bob-Alice diagrams

[iampi31415]

https://mermaid.js.org/syntax/sequenceDiagram.html

I would like this one horizontally:

sequenceDiagram
    SDA<<->>SCL: Device 1
    SDA<<->>SCL: Device 2
    SDA<<->>SCL: Device 3
    SDA<<->>SCL: ...
    SDA->Vdd: Rp
    SCL->Vdd: Rp

Loading

sequenceDiagram
    SDA<<->>SCL: Device 1
    SDA<<->>SCL: Device 2
    SDA<<->>SCL: Device 3
    SDA<<->>SCL: ...
    SDA->Vdd: Rp
    SCL->Vdd: Rp

Any alternative?

[chrislyons-dev]

Sequence diagrams in Mermaid are always vertical; you can’t rotate them. If you want a horizontal layout, switch to flowchart LR (or graph LR) and draw the same relationships.

This example tries to make the flowchart feel like a real bus.
It sets up two thick lines labeled SDA and SCL, then hangs each device off both lines like little taps.
The pull‑up resistors are shown by arrows from each bus line up to Vdd.
The bus lines look heavier, and the devices look like they’re connected to a shared backbone.

flowchart LR
  classDef bus stroke-width:3px;
  classDef tap stroke-width:1px;

  subgraph Bus["I2C Bus"]
    direction TB
    SDA[SDA bus]:::bus
    SCL[SCL bus]:::bus
  end

  D1[Device 1]:::tap
  D2[Device 2]:::tap
  D3[Device 3]:::tap
  Dn[Device ...]:::tap

  D1 --- SDA
  D1 --- SCL
  D2 --- SDA
  D2 --- SCL
  D3 --- SDA
  D3 --- SCL
  Dn --- SDA
  Dn --- SCL

  Vdd[Vdd]
  SDA -->|Rp| Vdd
  SCL -->|Rp| Vdd

Loading