(Author) I am aware of the problem. For me it works on desktop but not on mobile browsers – apparently the Unicode box drawing characters are not really fixed-width on all systems?
One day I'll write a Pandoc filter that pipes these diagrams through a Shaky or Ditaa type tool first…
> For me it works on desktop but not on mobile browsers
Looks weird for me on Mac desktop Chrome. It looks like the default monospace font, Courier, lacks box drawing characters. So it probably falls back to some other monospace font which likely has different metrics.
A good CSS font stack for monospace fonts is something like:
font-family: Consolas, Monaco, monospace;
The first catches almost all Windows users, the second almost all Mac users, and the last fallback to the default.
One day I'll write a Pandoc filter that pipes these diagrams through a Shaky or Ditaa type tool first…