Neat, but you can just do this in mermaid too. Taking one of your examples:
<mermaid>
flowchart LR
web([Frontend])
subgraph platform [Cloud Platform]
api([API Server])
db[(Database)]
api --> db
end
web -->|HTTPS| api
</mermaid>
If you install the latest https://oj-hn.com , you can see it rendered inline here.
switz | 2026-02-15 00:47 UTC
Fair point. I added basic mermaid parsing to the library so you can do that here too.
$ echo 'flowchart LR
web([Frontend])
subgraph platform [Cloud Platform]
api([API Server])
db[(Database)]
api --> db
end
web -->|HTTPS| api' | npx box-of-rain --mermaid
╔══ Cloud Platform ════════════════════╗
║ ║
╭──────────╮ ║ ╭────────────╮ ╔════════════╗ ║
│ │ ║ │ │ ║ ║ ║
│ Frontend │ ─── HTTPS ──▶│ API Server │ ────▶║ Database ║ ║
│ │ ║ │ │ ║ ║ ║
╰──────────╯ ║ ╰────────────╯ ╚════════════╝ ║
╚══════════════════════════════════════╝
Retr0id | 2026-02-18 00:26 UTC
On my system the "right arrow" glyph is 2 units wide and breaks all the layouts.
switz | 2026-02-18 00:34 UTC
TIL about ambiguous width unicode characters. Turns out some locales render these chars as double width. I'm attempting to work out a solution.
Seems like maybe there are some universal half-width characters that can be used.
First off, let me say it is awesome you're doing something like this.
But... I'm encountering a similar issue on both Chrome and Firefox on Leenucks. I guess it's possible you don't see the problem on your Mac because both these browsers use the OS to do font rendering.
Comments
Seems like maybe there are some universal half-width characters that can be used.
https://www.unicode.org/reports/tr11/
But... I'm encountering a similar issue on both Chrome and Firefox on Leenucks. I guess it's possible you don't see the problem on your Mac because both these browsers use the OS to do font rendering.