Mermaid diagrams -- horizontal line goes through the middle of word, making it hard to read

Describe the bug

The bidirectional arrows are drawn on top of the text labels rather than behind them (or better is how GitHub renders them: https://github.com/kasir-barati/dev.to/blob/e2de1ed7d37684ef2f7527407694a35c74d953d1/articles/agentic-programming/using-mcp-in-your-app.md).

Because the horizontal line goes straight through the middle of the words, it creates makes it harder to read (like this: stdio).

To Reproduce

1. Open the dev.to editor.
2. Create a mermaid like this:
   复制

   ```mermaid
   flowchart LR
       subgraph Host["MCP Host (your app)"]
           LLM["LLM"]
           subgraph ClientA["MCP Client A"]
           end
           subgraph ClientB["MCP Client B"]
           end
       end
   
       ServerA["MCP Server A (filesystem)"]
       ServerB["MCP Server B (Postgres / hosted API)"]
   
       LLM <--> ClientA
       LLM <--> ClientB
       ClientA <-->|"stdio (local subprocess)"| ServerA
       ClientB <-->|"Streamable HTTP (remote)"| ServerB
   ```

Expected behavior

Something like what we see in GitHub preview or what you see in Zed IDE preview:

Desktop (please complete the following information):

• OS, version: Ubuntu 26.04
• Browser, version: Brave 1.95.102 (Official Build) (x86_64)

Smartphone (please complete the following information):

N/A

Additional context

N/A