Comment by simonw
2 months ago
There's some surprising stuff in this codebase. For example, https://github.com/xai-org/grok-build/blob/b189869b7755d2b48... is a "self-contained terminal renderer for Mermaid diagrams", which renders a subset of Mermaid chart types using Unicode box-drawing.
I had Fable 5 compile that Rust code to WebAssembly and build a browser-based playground for it, so you can try it out with Mermaid diagrams here: https://tools.simonwillison.net/grok-mermaid
A few more notes on my Grok code explorations on my blog: https://simonwillison.net/2026/Jul/15/grok-build/
I love this kind of stuff (ASCII art, if you will), but it just breaks down too easily as soon as Unicode characters (mainly CJK, as I'm Chinese) and fonts are involved.
For example, on your website, any chart or plot involving horizontal arrows breaks down because the assigned font-family (`ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`, which ends up as Consolas on my machine) has no such glyph. Thus, it falls back to Segoe UI Symbol, which does not have the same fixed width (or is not fixed-width at all) as other characters: https://i.imgur.com/d2DPGHE.png
I ran into this problem recently on one of our blog posts: we used some Claude output which included tables drawn with Unicode line drawing characters. However, our monospace font did not include these characters, and so rendering fell back to another font in our font stack with different width metrics. I fixed it by using a font that had similar metrics and did include those characters with `unicode-range` (to only select characters we needed) and `size-adjust` (to match font width more exactly), and adding it to the stack. It's a little hacky but works pretty well in practice.
1 reply →
> Thus, it falls back to Segoe UI Symbol, which does not have the same fixed width
That seems like a glaring omission to me. If you are rendering fixed-width-per-character text and need to fall back, surely it makes sense to keep to the same character grid even if it does mess up the feel of your negative space somewhat (thin characters having a lot of space around them, wide characters butting into those beside them slightly). You've explicitly asked for text aligned to a grid, either by using a mono-spaced typeface, by using a <pre> tag, or with other relevant CSS choices, the browser should be trying to achieve that.
Interesting. Thai characters can also blow it out, I imagine because of the difficulty mapping glyphs to width:
https://biztos.com/hey/thai-mermaid-chart.png
To my surprise, Sublime Text gets it almost right:
https://biztos.com/hey/sublime-thai-mermaid.png
I tried finding a Thai monospace font and using that in the HTML but it was worse, probably didn't have the box drawing chars.
Still a fun tool and useful for lots of ASCII cases!
10 replies →
Considering the Chinese are one of the major contributors to AI, I would think this was a solved problem by now, at least in some other CLI based coding agent.
Aren't those non-ASCII "rich" symbols from Japanese fonts around PC-98/Win95 domains anyway? For me with my background, it was always obvious that mixing full-width character in ASCII text never go well for various reasons. For ASCII arts, it is obvious that vertical lines never line up, and there are going to be tons of wasted spaces and different kinds of whitespaces needed to compensate for those. I wonder if specifying MS Gothic and retuning widths for it could help, at least for Windows/Linux.
2 replies →
I was going to say, perhaps generate a failing test case, but testing for proper unicode rendering might be tricky??
Is there anything opposite of this perhaps as well?
I am interesting in having a perhaps standardized ascii art into mermaid diagrams (which I actually just recently found could be imported easily into Tldraw/excalidraw)
Do you have the source code of this available/open-source?, I would like to have a go at it in the opposite direction perhaps.
Thanks for doing the work and hosting this. This will very quickly become one of my daily drivers.
Thank you for creating an alternative to the toxic mermaid renderer on their website.
Trying to monetize Mermaid was disgusting and honestly rings to me like trying to monetize Markdown.
I had Fable 5 port this to golang[1], as I was looking for a way to render mermaid for my own markdown review tool[2]
[1] https://github.com/spacedock-dev/mermaidtext
[2] https://github.com/spacedock-dev/subspace-beta
How could be a fork outside of this repo? “ This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.”
Looks like there is a newer commit that was force-pushed and overwrote the linked one?
This has been my favorite coding harness of all time. The mouse works for a lot of things. Theres keybindings that confuse me, but I otherwise enjoyed it. I might wind up forking / contributing in the hopes of helping to make it somewhat better. I had built my own also using Rust but I liked their implementation much better. This might explain part of how they pulled it off.
I don't understand why these TUI are popular - isn't a regular Graphical UI better for this?
Because GUI is resource intensive and they can run on headless computer/os like linux without Desktop environment , so Tui is perfect for mimicking GUI in terminal only computers