Suggestion for how to do this diagram?

[iampi31415]

        |Rx<------------Tx|
Device 1                  Device 2
        |Tx------------>Rx|

Or for an image, something like this.

In words: Each devices has 2 lines labelled Rx, Tx connected to the opposite (Rx to Tx).

What I've checked is the flowcharts and transitions but I don't quite see a way.

[iampi31415]

I do know about the sequence diagrams for Alice and Bob; I don't like for my purposes because I can't represent well the hard-wired connection in the real world.

[iampi31415]

Is this allowed or am i exploiting a bug (not in the docs lol):

stateDiagram-v2
    state First {
        tx1 rx1
    }
    state Second {
        tx2 rx2
    }
    tx1-->rx2
    tx2-->rx1

Luckily the node overlap (for the nodes at the top of each column) does not happen in my book, but I wonder why it happens there.

[chrislyons-dev]

This diagram sets up two devices side by side
Each one has an RX and a TX label inside it.
Then it draws two lines: the TX from Device 1 goes over to the RX on Device 2, and the TX from Device 2 goes back to the RX on Device 1.
So it’s basically showing the classic cross‑connect between the two.

flowchart LR
  subgraph D1["Device 1"]
    direction TB
    D1RX["RX"]
    D1TX["TX"]
  end

  subgraph D2["Device 2"]
    direction TB
    D2RX["RX"]
    D2TX["TX"]
  end

  D1TX -->|Tx to Rx| D2RX
  D2TX -->|Tx to Rx| D1RX

Loading

[iampi31415]

Great, can I use it under MIT license? Im writing a tutorial with that license.

[iampi31415]

I've modified it. Sadly, it breaks alignment of nodes regardless of using flowchart TB or LR.

flowchart TB
    subgraph uart1 [UART 1]
        direction LR
        Rx1
        Tx1
    end
    subgraph uart2 [UART 2]
        direction LR
        Rx2
        Tx2
    end
    Tx1-->|Tx1 to Rx2| Rx2
    Tx2-->|Tx2 to Rx1| Rx1
    DB1[Data Bus 1] <--> uart1
    DB2[Data Bus 2] <--> uart2

flowchart TB
    subgraph uart1 [UART 1]
        direction LR
        Rx1
        Tx1
    end
    subgraph uart2 [UART 2]
        direction LR
        Rx2
        Tx2
    end
    Tx1-->|Tx1 to Rx2| Rx2
    Tx2-->|Tx2 to Rx1| Rx1
    DB1[Data Bus 1] <--> uart1
    DB2[Data Bus 2] <--> uart2

Loading

[chrislyons-dev]

Great, can I use it under MIT license? Im writing a tutorial with that license.

you are free to use however you want

[chrislyons-dev]

Yeah, mermaid’s layout is a bit of a black box, especially on GitHub, so small tweaks to direction are basically your main lever.

Try this: I put the whole diagram left‑to‑right, but inside each UART box I switch to top‑to‑bottom. That makes Tx and Rx stack vertically inside each UART. Then I draw the crossed lines (Tx1 → Rx2 and Tx2 → Rx1) and connect each UART to its data bus.

flowchart LR
  subgraph uart1 [UART 1]
    direction TB
    Tx1
    Rx1
  end

  subgraph uart2 [UART 2]
    direction TB
    Tx2
    Rx2
  end

  Tx1 -->|Tx1 to Rx2| Rx2
  Tx2 -->|Tx2 to Rx1| Rx1
  DB1[Data Bus 1] <--> uart1
  DB2[Data Bus 2] <--> uart2

Loading

[iampi31415]

Thanks, I used this indeed.

graph LR
    subgraph uart2 [UART 2]
        direction TB
        Tx2
        Rx2
    end
    subgraph uart1 [UART 1]
        direction TB
        Tx1
        Rx1
    end
    Tx1--> Rx2
    Tx2--> Rx1
    DB2[Data Bus 2] <--> uart2
    DB1[Data Bus 1] <--> uart1