Reladrawとは — 座標を書かず「右に」「下に」で配置する相対配置の図解言語

Reladrawは、ノードの位置を絶対座標ではなく「right of app」「below app.ui」といった相対的な言葉で指定するテキストベースの図解言語だ。MermaidやGraphvizのような自動レイアウトツールと、draw.ioやExcalidrawのような手動配置ツールのちょうど中間に位置する、と開発者自身が説明している。2026年9月26日にHacker Newsで「Show HN: Reladraw – A diagram language where you decide where to place things」として紹介され、投稿から16時間ほどで310ポイント・83コメントを集めた。

結論から言うと、Reladrawが解決するのは「自動レイアウトは見た目を自分で決められない」「手動配置は書くのが遅くAIエージェントに向かない」という、既存の2系統の図解ツールが抱える弱点だ。座標を1つも書かずに、しかし配置の意図（どのノードが右にあるか、どれとどれが同じ高さか）はテキストではっきり指定できるため、人間が読み書きしやすく、かつAIエージェントが差分としてレビューしやすい図解フォーマットを狙っている。GitHubリポジトリはreladraw/reladrawで公開されており、本稿執筆時点でスター数549・実装言語TypeScript・ライセンスApache-2.0（コードのみ、名称とロゴは対象外）、バージョンはv0.8.0で構文はまだ変わる可能性がある早期段階のツールだ。

Reladrawの構文は、ノードをnodeで宣言し、below・right of・level withといったキーワードで既存のノードを基準に位置を指定していく。ノード名をドットでつなぐと入れ子のグループ（app.uiのような親子関係）を表現でき、edgeで矢印を引く際はfrom:・to:でどちら側から出てどちら側に着地するかまで指定できる。

位置指定が矛盾した場合（たとえば同じノードに対して「Aの右」と「Aの左」を同時に指定するなど）は、自動レイアウトツールにありがちな「それらしく黙って解決される」動きではなく、エラーとして弾かれる。エッジは他のノードを避けて経路を自動で引き、直角（グリッド的な見た目）で描画される。近い時期に複数のテーマ（配色・線種のプリセット）も追加されており、見た目の調整を細かいCSS的な指定なしに切り替えられる。

無料のオープンソースソフトウェアで、有償プランは存在しない。npmで単体インストールするか、ソースからビルドして使う。

Claude Code・Codex・Cursor・GitHub Copilotなどのコーディングエージェント向けには、専用のスキルが用意されている。npx skills add reladraw/reladraw -gでグローバルに追加すると、エージェントがReladrawの構文をその場で理解して図を生成・修正できるようになる。

最短の流れは、.reladraw拡張子のテキストファイルに構文を書き、CLIでSVGに変換し、そのままMarkdownやドキュメントに埋め込むというものだ。

生成されたSVGはそのまま画像として貼り付けられるほか、テキストソース（.reladrawファイル）自体もGitでバージョン管理できるため、レビューではコードの差分と同じようにdiffを追える。エージェント経由で使う場合は、上記のスキルを追加したうえで「このAPIの構成図を作って」のように自然言語で依頼すれば、エージェントがnode・edgeの構文を生成し、必要に応じてCLIでSVG化するところまで一括で行える。ブランド配色の図解をエージェントに生成させるClaude Codeで図解を作るdiagram-designスキルと比べると、Reladrawは装飾よりも「意図した配置をテキストで固定する」ことに主眼を置いた、より軽量なアプローチだと言える。

図解ツールは大きく「自動レイアウト系」「手動配置系」「相対配置系（Reladraw）」の3系統に整理できる。

MermaidやGraphviz、D2、PlantUMLは自動レイアウトエンジンがノード位置を計算するため書く手間は少ないが、思った配置にならず微調整ができない、あるいはできても限定的というケースがある。draw.ioやExcalidrawは逆にドラッグ＆ドロップで自由に配置できる反面、テキストで表現できないためGit管理やAIエージェントによる自動編集に向かない。TikZはLaTeX前提で学習コストが高く、対象もボックスと矢印中心の狭い範囲にとどまる。ReladrawはHNの議論でもこの2系統との比較が主題になっており、開発者自身「自動配置は見た目を決められない、手動配置は書くのが遅くAIに向かない」という動機を説明している。似た文脈のエージェント向け図解ツールとしては、アーキテクチャ図生成に特化したarchifyや、コードの変更内容をキャンバス上でレビューするWhiteboardもあり、目的に応じた使い分けが進んでいる分野だ。

- 配置の意図をテキストで固定したいが、座標を手で計算したくない人に向く。Mermaid・D2で「思った通りの見た目にならない」不満がある場合の代替候補になる
- AIエージェントに図を生成・修正させたい用途に向く。npx skills addでスキル化でき、構文がシンプルなためエージェントが生成しやすい
- v0.8.0の早期段階で構文はまだ変わる可能性がある。本番のドキュメント基盤に組み込む場合はバージョン追従の手間を見込む必要がある
- スター549・フォーク6と、MermaidやD2に比べるとコミュニティ規模はまだ小さく、Obsidian・VS Code向けの公式拡張機能はHN議論の時点で未整備（要望として挙がっている）
- 出力はSVGのみ。PDFやPNGへの変換は別途ツールを挟む必要がある
- 複雑な自動グラフレイアウト（大量のノードを美しく自動整列するような用途）にはGraphvizやD2の方が向く。Reladrawは配置を明示する分、ノード数が増えるほど記述量も増える
- ライセンスはApache-2.0だがReladrawの名称・ロゴは対象外のため、フォークして再配布する際は名称の扱いに注意

Reladrawは、自動レイアウト（Mermaid・Graphviz・D2・PlantUML）と手動配置（draw.io・Excalidraw・TikZ）の間を埋める、相対配置というアプローチを取る図解言語だ。座標計算をツールに任せつつ配置の意図はテキストで固定できるため、AIエージェントとの相性を重視して設計されている。v0.8.0とまだ早期段階であり構文が変わる可能性はあるが、npx skills addでエージェントにすぐ組み込める手軽さは、archifyやWhiteboardと並んで、AIエージェント時代の図解ツールの一つの方向性を示している。