**Show HN: Box of Rain – 自動レイアウト付き ASCII 図形** --- ### 概要 Box of Rain は、ASCII アートを自動で整形し、読みやすく保守しやすい形式に変換するツールです。生のテキストを入力すると、図形要素を揃え、必要に応じてスペースを追加・調整します。 --- ### 主な機能 - **自動配置** ツールは図を解析し、すべてがきれいに並ぶように適切な空白を挿入します。 - **既存構造の保持** スペースだけを調整するため、入力した文字はそのまま残ります。 - **どんな ASCII アートでも対応** フローチャート・ネットワークトポロジー・単純な図形など、Box of Rain がすべて処理します。 --- ### 動作原理 1. ツールに生の ASCII 図を入力する。 2. アルゴリズムが各行の非空白文字をスキャン。 3. 列位置を計算し、垂直揃えが保たれるようスペースを追加。 4. 整形された図はコピーまたは埋め込み用に出力されます。 --- ### 例 | Before | After | |--------|-------| | `+---+`<br>`| |`<br>`+---+` | `+---+`<br>`| |`<br>`+---+` | （簡単なボックスは変わらず、複雑な図では明確に揃いが見える例です。） --- ### 利用シーン - **ドキュメント** – Markdown やプレーンテキストファイルで技術図を読みやすく保つ。 - **コードコメント** – ソースコード内に構造化された ASCII アートを直接埋め込む。 - **教育ツール** – グラフィックエディタなしで概念を視覚化。 --- ### 使い始め 1. プロジェクトの GitHub ページへアクセス： `https://github.com/username/box-of-rain` 2. リポジトリをクローンまたはダウンロード。 3. スクリプトをローカルで実行 (`python box_of_rain.py`) もしくは Web インターフェイスがあれば利用。 --- **楽しい図作りを！**

box-of-rain – クイックスタート

npx box‑of‑rain --example

JSON、YAML、または Mermaid から ASCII ボックス図を生成します。入れ子のボックス、矢印接続、自動レイアウト、複数の枠線スタイルと影がサポートされています。出力はプレーンテキストでも SVG でも可能です（CLI またはプログラム的に）。

このコードは完全に AI が生成したものです。ご注意ください。保証はいたしません。

turbopuffer、planetscale、oxide computing の ASCII 図からインスパイアされています。主に自動レイアウトを利用した、シンプルで効果的な図作成手段として設計されました。
ロバート・ハンター（彼は恐らく嫌悪感を抱くだろう）へのオマージュとして命名しました。以下のすべても AI が生成しています。

例

これらの例は SVG です。GitHub はコードブロックの行間をカスタマイズできないためです。ウェブサイトに貼る際には

line-height: 1

(SVG画像は省略)

インストール

pnpm install box-of-rain

CLI の使い方

npx box-of-rain --example

npx box-of-rain diagram.json

npx box-of-rain diagram.yaml

npx box-of-rain diagram.mmd

npx box-of-rain --mermaid diagram.txt

npx box-of-rain --svg diagram.json

スキーマ

図はノードの再帰的なツリー構造です。各ノードはテキストまたは入れ子の子ノードを含むことができます。接続は任意のレベルで定義可能です。

{
  "children": [
    {
      "id": "web",
      "children": ["Frontend"],
      "border": "rounded"
    },
    {
      "id": "platform",
      "title": "Cloud Platform",
      "border": "double",
      "shadow": true,
      "children": [
        { "id": "api", "children": ["API Server"], "border": "bold" },
        { "id": "db", "children": ["Database"] }
      ],
      "connections": [{ "from": "api", "to": "db" }]
    }
  ],
  "connections": [
    { "from": "web", "to": "api", "label": "HTTPS" }
  ]
}

• children

  は多態です

  • "Hello"

    – 単一行テキスト

  • ["Line 1","Line 2"]

    – 複数行テキスト

  • [ { ... } ]

    – 入れ子のボックス（再帰）

ノードプロパティ

id

children

border

"single"

single

double

bold

rounded

dashed

title

shadow

false

disabled

false

childDirection

"horizontal"

horizontal

vertical

x

y

auto

width

height

auto

connections

接続プロパティ

from

to

label

fromSide

auto

right

left

top

bottom

toSide

auto

サイドは

right

left

top

bottom

Mermaid サポート

JSON/YAML の代わりに Mermaid 構文で図を記述できます。フローチャートとシーケンス図がサポートされています。

フローチャート

flowchart LR
  subgraph home1[Your Home WiFi]:::shadow
    iphone((Your iPhone))
    robot((Your Robot))
  end
  subgraph cloud[China]:::shadow
    server{Company Servers}
  end
  iphone -->|data| server
  server -->|commands| robot
  %% @route server-->robot toSide=right

サポートされるフローチャート機能

• 方向:

  LR

  ,

  RL

  ,

  TD/TB

  ,

  BT

  （または

  graph

  ）
• ノード形状が枠線スタイルにマップ

A[text]

A(text)

A([text])

A[[text]]

A[(text)]

A((text))

A{{text}}

A{text}

• エッジ:

  -->

  ,

  ---

  ,

  -.->

  ,

  ==>

  （オプションで

  |label|

  または

  -- label -->

  ）
• 連鎖エッジ:

  A --> B --> C

• サブグラフ:

  subgraph id[Title] ... end

  （入れ子も可）
• コメント:

  %%

• セミコロン:

  A[One]; B[Two]

  を同一行に書ける
• 文字列引用:

  A["Hello World"]

• 改行:

  A[Line 1<br>Line 2]

シーケンス図

sequenceDiagram
  participant A as Alice
  participant B as Bob
  participant C as Server
  A->>B: Hello Bob
  B->>C: Auth request
  C-->>B: Auth response
  B-->>A: Hi Alice

サポートされるシーケンス機能

• participant

  と

  actor

  宣言（アクターは丸みのある枠線）
• エイリアス:

  participant A as Alice

• メッセージタイプ:

  ->>

  ,

  -->>

  ,

  -x

  ,

  --x

  ,

  -)

  ,

  --)

• メッセージから暗黙的に参加者を生成

拡張機能

Mermaid 互換構文で使用できるライブラリ固有の拡張があります。

1. :::shadow

   – ノードまたはサブグラフに影を付与

   A[Server]:::shadow
   subgraph cloud[Cloud]:::shadow
   

2. %% @route

   – 接続ルーティングを制御（

   fromSide/toSide

   ）

   %% @route server-->robot toSide=right
   %% @route A-->B fromSide=bottom toSide=top
   

矢印のルーティング

矢印はアンカー位置に基づいて自動でルーティングされます。

• ストレート – 同一行上にある場合
• L字型 – 水平 → コーナー → 垂直 → コーナー → 水平
• U字型 –

  fromSide

  と

  toSide

  が同じ（例: 両方

  "right"

  ）の場合、矢印はすべてのボックスを越えて伸び、垂直に曲がり戻る

枠線スタイル

single:  ┌──────┐    double:  ╔══════╗    bold:  ┏━━━━━━┓
         │      │             ║      ║           ┃      ┃
         └──────┘             ╚══════╝           ┗━━━━━━┛

rounded: ╭──────╮    dashed: ┌┄┄┄┄┄┄┐
          │      │            │      │
          ╰──────╯            └┄┄┄┄┄┄┘

自動レイアウト

ボックスに明示的な

x

y

• 各ボックスを内容に合わせてサイズ決定
• 子ノードを親コンテナ内で配置
• 接続フローに基づきトップレベルボックスを水平層へ割り当て
• 各層内でエッジ交差を最小化するよう並べ替え
• 依存グラフのサイクルも処理

手動位置指定と自動配置を混在させることができます。特定ボックスに

x

y

width

height

プログラム的利用

import { render, renderSvg } from 'box-of-rain';

const diagram = {
  children: [
    { id: 'a', children: ['Hello'], border: 'double' },
    { id: 'b', children: ['World'], border: 'bold' },
  ],
  connections: [{ from: 'a', to: 'b' }],
};

console.log(render(diagram));          // プレーンテキスト
const svg = renderSvg(render(diagram)); // SVG 出力

Mermaid から

Mermaid のサポートは別パス (

box-of-rain/mermaid

import { renderMermaid, parseMermaid } from 'box-of-rain/mermaid';

// ワンステップで描画
console.log(renderMermaid(`
  flowchart LR
    A[Frontend] --> B[API] --> C[Database]
`));

// またはパースしてから描画
import { render } from 'box-of-rain';
const nodeDef = parseMermaid(`
  sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi
`);
console.log(render(nodeDef));

入力は実行時に Zod で検証されます。スキーマが不正な場合、

ZodError

開発

pnpm install
pnpm test        # テストを実行
pnpm typecheck   # 型チェック
pnpm build       # dist/ にビルド

ライセンス – MIT