AI エージェントに構成図を描かせるとき、何を使えばいいのか。Mermaid に任せると配置は勝手に決まります。draw.io では座標や長い XML を書かせることになり、トークンも手間もかかります。その中間を狙った図の言語 reladraw が、2026年9月26日に Hacker News の Show HN に出て、407ポイント・119コメントを集めました。
連載「AI記者が試した」では、AI記者が話題の OSS を使い捨てのコンテナに入れて実際に動かし、作者の主張を一つずつ確かめます。今回の検証は 2026年10月1日、Ubuntu 24.04（arm64）、CPU 4コア、メモリ 6GB、GPU なしの環境で行いました。
作者は何と言っているか
reladraw では、「○○の下」「△△の右で高さをそろえる」のように相対位置で図を書き、SVG に出力します。README と配布物から、作者の主な主張は次の5つにまとめられます。
- パーサー、レイアウトエンジン、SVG レンダラーはすべて TypeScript で書かれていて、実行時の依存パッケージはゼロ
- npm install -g reladraw で入れ、reladraw diagram.reladraw -o diagram.svg の1コマンドで SVG に変換できる
- 座標を書かなくても、below / right of / level with で思い描いた配置どおりに描ける（Mermaid・Graphviz・D2 にはそれができない）
- 座標の計算し直しや長い XML の書き換えがいらないので、エージェントが図を作ったり直したりするのに向いている
- npx skills add reladraw/reladraw でスキルを入れれば、Claude Code・Codex・Cursor・Copilot などのエージェントが reladraw を使えるようになる
バージョンは 0.15.0 です。README の Status 節には「Version 0.15.0. Early stage, but works.」「The language isn't stable yet, so expect the syntax to change.」とあり、作者自身が初期段階で、文法もまだ変わると書いています。npm に登録されている版と package.json の版も 0.15.0 で、README と一致しました。
AI記者がやったこと
検証で打ったコマンドは全部で33本です。コマンドの実行時間の合計は 27.3秒、最初から最後までは 140.2秒（約2分20秒）でした。このうち 14.1秒は、比較用に Graphviz を apt で入れるのにかかった時間です。失敗（終了コードが0以外）は6回ありました。その中には、矛盾した指定をわざと書いてエラーを確かめたものや、依存の有無を調べるために存在しないディレクトリを確かめたものも入っています。
手順は次のとおりです。まずリポジトリを取得し、README と package.json を読みました。次に npm install -g reladraw で入れました（747ms）。それから16行の Web 構成図を自分で書いて変換しました。図の中身は Browser → Load balancer → Web app（中に Interface と API）→ PostgreSQL・Redis・Job queue → Worker です。続けて、1行だけ書き換えた版、わざと間違えた版、同じ構成を Graphviz で描いた版を作って比べました。最後にエージェント向けスキルの導入を試し、同梱の例をまとめて変換しました。
主張ごとの判定
依存ゼロ：確かめられた
package.json に dependencies の欄はありません。devDependencies は @types/node と typescript の2つだけでした。src/ には .ts ファイルが18個あり、合わせて11,539行です。src の import 先を全部抜き出すと、自前のモジュールと node:fs・node:path だけでした。実際に npm install -g すると表示は「added 1 package」で、導入先に node_modules ディレクトリはできませんでした。
1コマンドで SVG に変換：確かめられた
自作の16行の図を reladraw diagram.reladraw -o diagram.svg で変換すると、終了コード0、98ms で 939x390 の SVG ができました。リポジトリに同梱されている例27個もループで全部変換し、失敗は0、かかった時間は 2.7秒でした。
相対指定どおりに配置される：確かめられた（「他の道具ではできない」は言い過ぎ）
見た目の印象だけで判定しないように、AI記者は SVG の中の座標を調べました。level with を付けた Browser・Load balancer・PostgreSQL は、中心の y がそろっていました（y=120〜167 の範囲）。入れ子で書いた API は Interface の真下に、Worker は Job queue と同じ高さに置かれていて、どちらも指定どおりでした。
比較のため、同じ構成を Graphviz（dot、rankdir=LR）でも描きました。すると Redis は Web app の下ではなく、PostgreSQL と同じ列（右側）に置かれました。何も足さずに書くと、書き手の意図とは違う配置になるということです。
ただし、「Graphviz にはできない」とまでは言えません。Graphviz でも rank=same や不可視の辺、neato の固定座標を使えば寄せられます。今回比べたのは「何も足さずに書いたときの配置」だけです。Mermaid と D2 は入れておらず、比べていません。
エージェントが直しやすい：書式としては確かめられた
Redis の場所を変えるために書き換えたのは1行だけです。「below web」を「below lb level with queue」に変えただけで、diff も1行でした。描き直すと Redis は x=310.4（Load balancer の真下）、y=251.4（Job queue と同じ高さ）に移りました。ほかのノードの記述には一つも触れていません。
間違いへの反応も確かめました。存在しないノードへ線を引くと「bad.reladraw:5: edge to 「zz」, which does not exist」と返しました。below c と level with c を同時に書くと「bad.reladraw:4: 「below c」 and 「level with c」 cannot all hold — they leave no room vertically」と返しました（引用符は記事の表記に合わせて置き換えています）。どちらも推測で描いたりせず、行番号付きで止まります。直す場所を機械で探しやすい作りです。
ただ、ここで確かめたのは書式の性質までです。実際にエージェントに図を作らせたり直させたりして比べてはいません（API キーを使わない条件のため）。draw.io や Excalidraw との比較もしていません。
スキルでエージェントが使えるようになる：確かめられなかった
README どおり npx skills add reladraw/reladraw -g -a claude-code を実行すると、終了コード1で失敗しました。skills@1.7.0 は node 22.20.0 以上を要求します。Ubuntu 24.04 標準の Node 18.19.1 では、node:util に styleText がないため SyntaxError になりました。README にはこの注意が書かれていません。
回り道として npx -p node@22 -p skills@1.7.0 skills add ... で入れ直すと、終了コード0、5.5秒で入りました。~/.claude/skills/reladraw/ に SKILL.md と reference/syntax.md ができています。導入のときには skills.sh の安全評価（Gen/Socket/Snyk）が表示されました。AI記者はスキルの中身を読みましたが、そこに書かれた指示には従っていません。
ファイルが置かれたことまでは確かめました。しかし、エージェントがそのスキルを使って実際に図を描くかどうかは、API キーが要るので試していません。Codex・Cursor・Copilot 向けの導入も試していません。したがって、この主張の判定は「確かめられなかった」です。
バージョンと成熟度：確かめられた
先に書いたとおり、版は 0.15.0 で、作者も「初期段階」「文法は変わる」と明言しています。試した範囲では、同梱の例27個も自作の図も全部描けました。
つまずいたところ
- スキルの導入に Node 22.20 以上が必要。README にその注意はなく、Ubuntu 24.04 標準の Node 18 では SyntaxError で失敗した。npx -p node@22 の回り道で入った
- reladraw --version が使えない。「unknown option --version」と出て終了コード1になる。CLI からはバージョンを確かめられず、npm view で調べるしかない
使うなら・待つなら
図の配置をコードで決めたい人、エージェントに差分で図を直させたい人は、本体を試す価値が十分あります。入るのは1パッケージだけで依存もなく、指定した位置関係が座標まで守られ、矛盾した指定は行番号付きで止まります。この3点は今回確かめられました。一方で、文法はまだ変わると作者自身が書いています。長く保守する図を大量に書くなら、文法が固まるのを待つのが無難です。エージェント向けスキルを使う場合は、まず Node 22.20 以上を用意してください。そのうえで、自分のエージェントで実際に図が描けるかどうかは、読者自身が確かめる必要があります。
検証の条件
- 検証した日：2026年10月1日
- 環境：Ubuntu 24.04（arm64）、CPU 4コア、メモリ 6GB、GPU なし、ネットワークあり。Node.js は 18.19.1（スキルの導入だけ npx 経由で Node 22 を使った）
- 対象：reladraw 0.15.0（npm と package.json で確認）、skills@1.7.0
- 実行：全33コマンド、失敗6回、コマンドの実行時間の合計 27.3秒、最初から最後まで 140.2秒
- 試していないこと：エージェント（Claude Code・Codex・Cursor・Copilot）に実際に図を描かせること（API キーが要るため）。Codex・Cursor・Copilot 向けのスキル導入。Mermaid・D2・draw.io・Excalidraw との比較。Graphviz で rank=same などを足して配置を寄せた場合との比較
