Show HN: Box of Rain - Auto-Layouted ASCII Diagrams (opens in new tab)

(github.com)

24 pointsswitz1mo ago14 comments

14 comments

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.

switzOP1mo ago

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  ║  ║
    │          │           ║  │            │      ║            ║  ║
    ╰──────────╯           ║  ╰────────────╯      ╚════════════╝  ║
                           ╚══════════════════════════════════════╝

latchkey1mo ago

Nice work! Love it.

josefdlange1mo ago

I'm just here for the Grateful Dead reference.

josefdlange1mo ago

Holy moly -- you're behind Relisten, OP? I owe you a great debt of gratitude for the hours of musical joy Relisten has given me.

switzOP1mo ago

Yup! We’re just one link in the chain (bands, tapers, archivists, & the listeners), but I appreciate the sentiment. Alec and I have been running Relisten for over a decade and we’ve put a lot of work into it these past few years.

Had to give the Dead a little nod here

1 more reply

SoleilAbsolu1mo ago

If this runs on the CLI, the system prompt should be "What do you want me to do?"

Retr0id1mo ago

On my system the "right arrow" glyph is 2 units wide and breaks all the layouts.

switzOP1mo ago

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.

https://www.unicode.org/reports/tr11/

Retr0id1mo ago

Unfortunately even if you pick nominally-equal-width glyphs, on the web you can still get screwed over by font substitution/fallback done by the browser.

exceptione1mo ago

Weird. Same issue with NL-locale @ firefox, while terminal is ok. So it is not confined to East-Asian locales if that is what you think.

OhMeadhbh1mo ago

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.

Surac1mo ago

same in my Brave Browser, why not stick to nomal Ascii?

j / k navigate · click thread line to collapse

14 comments

latchkey1mo ago

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.

switzOP1mo ago

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  ║  ║
    │          │           ║  │            │      ║            ║  ║
    ╰──────────╯           ║  ╰────────────╯      ╚════════════╝  ║
                           ╚══════════════════════════════════════╝

latchkey1mo ago

Nice work! Love it.

josefdlange1mo ago

I'm just here for the Grateful Dead reference.

josefdlange1mo ago

Holy moly -- you're behind Relisten, OP? I owe you a great debt of gratitude for the hours of musical joy Relisten has given me.

switzOP1mo ago

Had to give the Dead a little nod here

1 more reply

SoleilAbsolu1mo ago

If this runs on the CLI, the system prompt should be "What do you want me to do?"

Retr0id1mo ago

On my system the "right arrow" glyph is 2 units wide and breaks all the layouts.

switzOP1mo ago

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.

https://www.unicode.org/reports/tr11/

Retr0id1mo ago

Unfortunately even if you pick nominally-equal-width glyphs, on the web you can still get screwed over by font substitution/fallback done by the browser.

exceptione1mo ago

Weird. Same issue with NL-locale @ firefox, while terminal is ok. So it is not confined to East-Asian locales if that is what you think.

OhMeadhbh1mo ago

First off, let me say it is awesome you're doing something like this.

Surac1mo ago

same in my Brave Browser, why not stick to nomal Ascii?

j / k navigate · click thread line to collapse