Quickstart
$ 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
Generate ASCII box diagrams from JSON, YAML, or Mermaid. Supports nested boxes, arrow connections, auto-layout, multiple border styles, and shadows. Can output as plain text or SVG. CLI or programmatic.
This code is entirely AI generated. Be warned, take it for what you will. No promises.
It's inspired by turbopuffer's, planetscale's, and oxide computing's ascii diagrams. It's meant to be a simple and effective way to generate diagrams through a rote interface, largely self-layouting.
Of course, it's named as an homage to the inimitable Robert Hunter. Though he'd likely be disgusted, everything written below here is AI generated as well. But tiny, useful, isolated, and non-hosted libraries are probably the best use-case for AI.
Examples
These examples are SVGs because Github doesn't allow for customizing line-height of code blocks. If you put this on a website, you might want to set line-height: 1 to avoid clipping.
Install
pnpm install box-of-rain
... continue reading