Breadboarding in Mermaid

1

I do a lot of breadboarding and always wished it had native support in Mermaid — that’s what renders diagrams in GitHub, GitLab, Obsidian and most markdown tooling, so a breadboard could live in the doc instead of as a screenshot that goes stale.

You can get close with a flowchart, but affordances end up as edge labels or hand-formatted text inside a node, and the arrows come out of the box rather than out of the affordance you clicked.

flowchart LR
    Checkout["<b>Checkout</b><hr/><u>Sign in as guest</u><br/><u>Sign in</u><br/><u>Place order</u>"]
    Guest["<b>Sign in as guest</b><hr/>Email<br/><u>Continue</u>"]
    Returning["<b>Sign in</b><hr/>Password<br/><u>Continue</u>"]
    Receipt["<b>Receipt</b><hr/>Print receipt"]

    Checkout -->|"Sign in as guest"| Guest
    Checkout -->|"Sign in"| Returning
    Checkout -->|"Place order"| Receipt
    Guest -->|"Continue"| Receipt
    Returning -->|"Continue"| Receipt

SCR-20260807-teau
SCR-20260807-teau986×434 28.4 KB

I have a proposal to add a breadboard diagram to mermaidjs: UX breadboard · Issue #8043 · mermaid-js/mermaid · GitHub

uxBreadboard
Checkout
  Sign in as guest -->
  Sign in -->
  Place order --> Receipt
Sign in as guest
  Email
  Continue --> Receipt

SCR-20260807-syfw
SCR-20260807-syfw589×159 15.4 KB

If you breadboard regularly I’d genuinely like a sanity check on the syntax on the syntax and formatting.