---
title: "Box of Rain — JSON/YAML/Mermaid로 ASCII 박스 다이어그램 자동 생성하는 도구"
published: 2026-02-14T21:42:11.000Z
canonical: https://jeff.news/article/855
---
# Box of Rain — JSON/YAML/Mermaid로 ASCII 박스 다이어그램 자동 생성하는 도구

JSON, YAML, Mermaid 문법으로 ASCII 박스 다이어그램을 자동 생성하는 CLI/라이브러리. 중첩 박스, 화살표, 자동 레이아웃을 지원하며 코드 전체가 AI로 생성됐다고 솔직하게 밝힘.

- JSON, YAML, 또는 Mermaid 문법으로 입력하면 ASCII 박스 다이어그램을 자동으로 그려주는 CLI/라이브러리임. 중첩 박스, 화살표 연결, 자동 레이아웃, 다양한 테두리 스타일, 그림자까지 지원하고, 출력은 플레인 텍스트 또는 SVG로 가능함

- turbopuffer, PlanetScale, Oxide Computing 같은 회사들이 쓰는 ASCII 다이어그램에서 영감을 받아 만들었다고 함. 이름은 Grateful Dead의 작사가 Robert Hunter 곡에서 따온 거임

- 솔직하게 **코드 전체가 AI로 생성됐다**고 밝힘. 다만 "작고, 유용하고, 독립적이고, 호스팅 불필요한 라이브러리가 AI의 최적 활용처"라는 입장

- 다이어그램은 재귀적 트리 구조로 정의됨. 각 노드는 텍스트나 자식 노드를 포함할 수 있고, `children`에 문자열을 넣으면 텍스트, 객체 배열을 넣으면 중첩 박스가 됨

- Mermaid 문법도 지원하는데 꽤 충실함:
  - Flowchart: 방향(LR, RL, TD, BT), 노드 모양별 테두리 스타일 매핑, 서브그래프 중첩, 체인 엣지
  - Sequence diagram: participant/actor 선언, 별칭, 다양한 메시지 타입(`->>`, `-->>``, `-x` 등)
  - `:::shadow`로 그림자 추가, `%% @route`로 화살표 라우팅 제어 같은 확장 문법도 있음

- 화살표 라우팅이 꽤 똑똑함 — 같은 행이면 직선, 아니면 L자형, 양쪽이 같은 방향이면 U자형으로 우회해서 그림

- 자동 레이아웃 엔진이 콘텐츠에 맞춰 박스 크기를 정하고, 연결 흐름 기반으로 수평 레이어 배치하고, 엣지 크로싱을 최소화함. 사이클도 처리 가능하고, 자동/수동 포지셔닝 혼합도 됨

- `pnpm install box-of-rain`으로 설치하고, stdin 파이프도 가능. Mermaid 파서(chevrotain)는 별도 서브패스(`box-of-rain/mermaid`)로 분리해서 메인 번들을 가볍게 유지함. 입력 검증은 Zod로 함

> [!TIP]
> 문서 같은 데 ASCII 다이어그램 넣고 싶은데 손으로 그리기 귀찮았다면 써볼 만함. Mermaid 문법 그대로 쓸 수 있어서 진입장벽이 낮음

## 핵심 포인트

- JSON/YAML/Mermaid 입력으로 ASCII 다이어그램 자동 생성
- 자동 레이아웃 엔진이 박스 배치와 엣지 크로싱 최소화 처리
- 코드 전체가 AI 생성이라고 솔직하게 공개
- Mermaid 파서는 별도 서브패스로 분리해서 번들 경량화

## 인사이트

AI 생성 코드의 적절한 활용처에 대한 솔직한 입장이 인상적. 작고 독립적인 유틸리티 라이브러리는 AI의 좋은 사용처라는 주장.