Reladrawで、AIに描かせた構成図の配置を言葉で直せるか。

構成図は一度描いたら終わりではなく、レビューのたびに直すものですよね。AIに描かせた図に「DBをAPIの右へ」と頼んだら、関係のない箱まで動いてしまい、結局元に戻した経験はありませんか？ Reladrawは配置を「〇〇の右」「〇〇の下」という言葉で書く図の言語なので、位置の指示がそのままソースの1行の書き換えになります。

GitHub - reladraw/reladraw

Contribute to reladraw/reladraw development by creating an account on GitHub.

github.com

AIに描かせた構成図は、なぜ直すたびに崩れるのか？

修正指示が通りにくい原因は、AIの腕より、図を書き出す形式の側にあります。Mermaidのフローチャートは箱と線を宣言すると、位置はレイアウトの仕組みが決めます。「DBを右へ」と頼まれても位置を書く欄がないので、AIは位置以外の書き方をいじって、描き上がった結果が右に寄るのを待つしかありません。

draw.ioはその逆で、箱ごとに座標を持つXMLです。人ならドラッグで済む移動でも、AIは座標を計算し直し、長いXMLのあちこちを書き換えることになります。ReladrawのREADMEも、この2つを両極に置き、その間を狙った言語だと説明しています。

図の見栄えより、直す段階で指示がどれだけ通るかで比べると、形式の差がはっきり出ます。普段AIに図を描かせるとき、どの形式で書き出させていますか？

Reladrawの構成図は、配置を文章で書く

Reladrawは、配置を言葉で書いてSVGに描き出す、テキストの図の言語です。9月下旬にHacker NewsのShow HNで411ポイントを集め、執筆時点の版は0.15.1（2026年10月1日公開）。npmのパッケージは実行時の依存がなく、Node 18以上で動きます。ライセンスはApache-2.0ですが、READMEによれば対象はコードだけで、名前とロゴは含まれません。

書き方は、箱を1行ずつ並べて、それぞれに置き場所を添えるだけです。

node web "Web"
node api "API" right of web
node db "DB" below api
node queue "Queue" right of api

Webには置き場所を書いていません。この箱が基準になり、APIはWebの右、DBはAPIの下、QueueはAPIの右に並びます。置き場所を書かない箱は1つの図に1つだけと決まっていて、2つ以上あるとエラーで止まります。曖昧なまま推測で置かない作りなので、AIが置き場所を書き漏らしても、その場で気づけます。

DBをQueueの右へ移し、APIと同じ高さにそろえるなら、書き換えるのはDBの行だけです。

- node db "DB" below api
+ node db "DB" right of queue level with api

npx reladraw diagram.reladraw -o diagram.svg で描き直すと、DBがQueueの右、APIと同じ高さに移ったSVGが出てきます。座標の数字は、ソースのどこにも出てきません。

配置の言葉は above below left of right of と斜めの4方向、中心線をそろえる level with が基本です。設計書のレビューで出る指摘も、「〇〇の下に」「〇〇と高さをそろえて」という形がほとんどですよね。指摘の言葉と、ソースに書く言葉がほぼ同じなんです。

「もう少し右に」は、Reladrawではgapの言い換えになる

Reladrawに座標はないので、「あと5ミリ右」に当たる書き方もありません。距離を変えたいときは、間隔の gap を none tight normal wide から選ぶか、gap: 12 のように数値で書きます。

ただし、この間隔は最小の距離です。複数の条件がぶつかったときは一番大きい間隔が採られるので、wide に変えても、ほかの条件で決まった位置から動かないことがあります。「もう少し右に」をそのまま渡すより、「Queueとの間をwideに」「Queueの右へ」と、何のどちら側かに言い換えて頼むほうが通りやすいと私は考えています。

レビューで「もう少し右に」と言う人が求めているのは、たいてい「隣の箱と離して」か「線を見やすく」のどちらかですよね。あなたが直近で受けたレビュー指摘は、相対の言葉に言い換えられそうでしょうか？

Reladrawでも残る、線の交差と文字のあふれ

公式のスキル説明には、ソースを読み返して確かめられるのは意図であって結果ではない、と書かれています。DBがAPIの下にあることはソースで分かっても、長い文字があふれたか、線が別の線と交差したかは、描いた図を見るまで分かりません。

線については、仕様書の「まだ作っていない」項目にはっきり書かれています。関係のない箱を線が横切ることがあり、線に付けた文字が箱に重なることもある。通り道を between などで指定しなかった線は、何もチェックされません。線が別の箱をまたいでいると、設計書のレビューでは真っ先に指摘が入ります。ここは人の目で見る工程として残しておきます。

文字の折り返しは wrap: で文字数を指定します。仕様では単語の区切りで折り返すとされていて、空白のない日本語のラベルがどこで折れるかは仕様から読み取れません。試すときは長めの日本語ラベルを1つ入れて描画し、はみ出しや文字化けがないかを最初に確かめておくのが安全です。前後に空白を入れた / で改行する書き方も、仕様に用意されています。

構文もまだ固まっていません。READMEは構文が変わる前提で使うよう書いていて、9月27日に0.8.0だった版が、10月1日には0.15.1まで進みました。設計書に貼る図なら、使った版をソースの横にメモしておきます。

Claude Codeで試すなら、構成図1枚と修正指示3つ

AIエージェント向けのスキルは、コマンド1行で入ります。-g を付けるとClaude CodeやCodex、Cursorなど複数のエージェントに、ユーザー単位で入ります。付けなければ今のプロジェクトだけ、-a claude-code を足せばClaude Codeだけです。

# 対応する複数のエージェントに入れる
npx skills add reladraw/reladraw -g

# Claude Codeだけに入れる
npx skills add reladraw/reladraw -g -a claude-code

入るのは実行した時点のスキルのコピーなので、新しい版が出たら同じコマンドを実行し直します。入れたら、まず図を1枚描かせます。

Reladrawで、Web、API、DB、Queueの4つの箱の構成図を描いて、SVGに書き出してください。

そのうえで、修正指示を1つずつ渡します。

1. DBをAPIの下からQueueの右へ移し、APIと同じ高さにそろえてください。
2. QueueとDBの間を、今より広げてください。
3. 図の右下に「本番環境」という注釈を足してください。

指示のたびに見ておきたいのは、次のところです。

• ソースの差分が何行だったか（Gitで管理していれば git diff で見られます）
• 指示していない箱が動いていないか
• 日本語のラベルや注釈が、はみ出さずに描けているか

2の指示は、さきほどの間隔の話がそのまま出る場面です。広がらなかったときに、AIが「何のどちら側か」に言い換えて直せるかまで見ると、Reladrawが手元の図に合うかどうかが判断できます。

最初の1枚は、チームでレビューのたびに一番直されている構成図にするのがいいと思います。あなたの手元で、いちばん描き直しの回数が多い図はどれでしょうか？