図を作るための新しいテキスト言語「reladraw」のGitHubリポジトリが公開されている。見た目は地味だが、狙いはかなりはっきりしている。Mermaidのように文章から図を起こせる手軽さは欲しい。でも、配置をある程度こちらで決めたい場面では、MermaidやGraphvizの自動レイアウトでは足りない。そこで、その中間を埋める道具として作られている。図を手で引く面倒さに悩んだことがある人ほど、話が見えやすいはずだ。
リポジトリのREADMEによると、reladrawは「図について、どこに何を置くかを言葉で書く」ためのテキスト言語だという。作者は、draw.ioで毎回ドラッグして配置を詰めるやり方は手間が大きすぎる一方で、MermaidやGraphviz、D2のように箱と線だけを宣言してあとは自動配置に任せる方式では、頭の中にある絵をそのまま出しにくいと感じていた。そこで、見た目はきちんとコントロールしたいが、座標を一つずつ指定するのは避けたい、という欲求を満たす位置にreladrawを置いている。
READMEには、簡単な書き方の例も載っている。たとえば node app "Web app" のようにノードを置き、node app.ui "Interface"、node app.api "API" below app.ui として上下関係を指定する。さらに node store "Database" right of app level with app のように相対配置を使い、最後に edge app.api -> store "queries" from: right to: left で接続線の向きまで書ける。つまり、絶対座標を手打ちするのではなく、「この箱の右」「あの箱の下」といった関係で配置を決める方式だ。
実行方法も用意されている。npmからグローバルインストールするなら npm install -g reladraw のあとに reladraw diagram.reladraw -o diagram.svg とすれば、.reladraw ファイルをSVGに変換できる。リポジトリをcloneして使う方法もあり、その場合は npm install && npm run build のあと node dist/cli.js examples/arch.reladraw -o out.svg と実行する。例が欲しい人は examples/ を見ればよいし、構文の細部は SYNTAX.md が案内している。
もう一つ特徴的なのが、エージェント向けの導入手順まで書かれている点だ。npx skills add reladraw/reladraw -g を使うと、Claude Code、Codex、Cursor、Copilot など、各種エージェント向けのskillとして追加できる。-g を外せば現在のプロジェクトだけに入れられ、-a claude-code のように指定すれば特定のagentだけにも入れられる。READMEでは、これは実行時点のコピーを入れる方式なので、新しいリリースが出たら再度コマンドを打って更新する必要があるとも説明している。
状態については、Version 0.9.0 とされていて、「Early stage, but works」とかなり率直だ。パーサー、layout engine、SVG rendererはすべてTypeScriptで書かれており、runtime dependenciesはゼロ。まだ language は安定していないので、構文は変わるかもしれないとも明記されている。ライセンスはApache-2.0だが、コードに対するものであり、名前やロゴ、他のマークには権利を与えないと注意書きがある。Issue歓迎で、特に「reladrawでは表現できない図」の報告が役に立つとしている。Pull requestよりも、まずは困った例を持ち込んでほしい、という姿勢だ。
面白いのは、reladrawが「誰でも簡単に図を描ける」を前面に出していないところだと思う。むしろ逆で、図の細かい印象を自分で握っていたい人向けに見える。Mermaidは便利だが、レイアウトが思い通りにならず、結局「言いたいことは合っているのに絵が違う」という違和感が残ることがある。reladrawはその不満に、相対配置というかなり素直な解を出している。座標の絶対指定ほど面倒ではないが、自動配置ほど他人任せでもない。この中間は、意外と空いていた場所ではないかと思う。
一方で、こうした道具は普及のしやすさで苦戦しやすい。MermaidはMarkdownやGitHub周辺で既に強いし、draw.ioは手元で完結する安心感がある。そこに新しい言語を挟むには、「わざわざ乗り換える理由」が必要だ。reladrawの理由は、READMEを読む限り、図の構成を文章としてレビューしたい場面、あるいはAIエージェントに図を扱わせたい場面にある。人が眺めても機械が読んでも扱える、という方向性は今の開発フローと相性がいい。特に、設計図をコードレビューの延長で扱いたい人には効きそうだ。
ただし、Version 0.9.0で構文がまだ安定していない点は、導入の壁になると思う。図の言語は、一度使い始めるとファイル資産が積み上がる。そこで仕様変更があると、見た目よりも「過去の図をどれだけ壊さず保てるか」が重要になる。READMEが「まだ変わる」とはっきり書いているのは誠実だが、裏を返せば本番運用の中心に据えるには慎重さが要る。今は完成品というより、どの粒度まで相対配置で足りるのかを探る試作品に近い。
それでも、TypeScriptでparser、layout engine、SVG rendererまで自前で持ち、runtime dependenciesをゼロにしているのは好印象だ。配布や実行時の不確実性を抑えやすいからだ。さらに、エージェント向けのskillインストールを最初から用意しているのも今っぽい。単なる図のCLIではなく、「人が書く」「機械が書く」「人が直す」をつなぐ層として設計されている。そこにこのプロジェクトの野心があるように見える。うまく育てば、図を描くための道具というより、図を共同編集するための言語として存在感を持つのではないかと思う。
reladrawの価値は、きれいな図を早く作ることより、図の意図をテキストとして保つことにある。だから一番刺さるのは、ソフトウェア設計やシステム構成を、コードレビューやREADME、ドキュメントと一緒に管理したい人だろう。変更履歴がGitで追え、差分も見える。図が画像で閉じず、文章と同じ感覚で扱えるのは大きい。特に複数人で触るとき、座標ベースの編集よりずっと扱いやすいはずだ。
ただ、その強みは裏返すと、図に「きれいな整形」を求める人にはわかりにくいかもしれない。draw.ioのように思いつくまま置いて、あとで手で整える快楽はある。reladrawはそこをかなり意図的に削っている。つまり、これは絵を描く道具というより、配置ルールを文章化する道具だ。そう考えると、デザイナーよりも開発者、しかも図を成果物として残す人向けだと見たほうが自然だ。
私は、このプロジェクトは「図の自動生成」と「手作業の図解」のあいだにある、実務的な不満をうまく言語化していると思う。今の開発現場では、コードだけでなく、構成図や処理フローもテキストで管理したい要求が増えている。その流れに、reladrawはかなり素直に乗っている。まだ若いプロジェクトではあるが、だからこそ今後、どこまで表現できるか、どこで限界が来るかが面白い。発展の余地があるというより、発展の仕方そのものがこの道具の本体だと感じる。
