Show HN: Reladraw – 物の配置を自由に決められる図式言語

概要

• reladraw は、テキストで図の配置関係を記述する新しいダイアグラム言語
• 絶対座標不要、全ての位置関係は相対的な文で指定
• 人間・エージェント両対応、編集や変更が容易
• npmで簡単インストール、ブラウザ上のプレイグラウンドも提供
• Mermaidやdraw.ioの弱点を補い、柔軟かつ意図通りの図作成が可能

reladraw：テキストで制御する柔軟なダイアグラム言語

• reladraw は、図の各要素の配置を 英語の文 で記述するテキスト言語
• 絶対座標やピクセル指定不要、全て「何の右」「どれの下」のような 相対配置 で記述
• MermaidやGraphviz のような自動レイアウト言語との違いは、「配置を自分で明示できる」点
• draw.ioやFigma のような絶対配置ツールとの違いは、「手作業が不要で、編集が高速」な点
• 例文
  • node app "Web app"
  • node app.ui "Interface"
  • below app.ui
  • right of app
  • 座標やネスト構造不要、一文ごとに関係のみ記述

reladrawの特徴とメリット

• レイアウトの意図がそのままテキストに残る、後からの編集や変更が容易
  • 「左に移動」「間に挿入」 などの変更も、該当文を編集するだけ
• エージェントによる自動編集・修正が容易
  • 絶対座標や画像認識不要、文の追加・修正のみで対応可能
• 自動レイアウト言語の弱点克服
  • 意図した配置ができない問題を解決
• 絶対配置ツールの手間を削減
  • 手作業やピクセル編集不要、複雑な図でも編集が高速

reladrawの使い方

• ブラウザ上のプレイグラウンド で即座に試せる
• npmインストール でローカル利用も可能
  • npm install -g reladraw
  • reladraw diagram.reladraw -o diagram.svg
• エージェント用スキル も提供
  • npx skills add reladraw/reladraw -g
  • Claude Code、Copilotなど各種AIエージェントに対応

技術的な仕組み

• 各要素の「最小距離」制約を連立解決
  • ノード同士の重なり回避 も自動
• 配置の「意図」は全てファイル内の文で決定
  • エンジンが判断するのは距離のみ、関係性は作者が明示
• SVGレンダラ・CLIツールも同梱
• 診断機能 （ノード重なりやエッジ交差の検出）は今後実装予定

他ツールとの比較

• Mermaid/Graphviz/D2
  • 自動レイアウトで配置制御不可
• draw.io/Excalidraw/Figma
  • 完全手動配置で編集が煩雑
• Archify/PIC/pikchr/Structurizr
  • それぞれ配置制御や記法に制限あり
• reladraw は 柔軟性と制御性のバランス を実現

今後の展望・設計思想

• 配置文法の拡張 による表現力向上
• 診断レポート による修正支援
• 自動レイアウト禁止、意図した配置のみを許容
• エージェントとの連携重視、人間・AIどちらにも扱いやすい設計

まとめ

• reladraw は「テキストで意図通りに図を描きたい」ニーズに最適
• 人間もAIも編集しやすい ダイアグラム言語
• 即試せるプレイグラウンド と 簡単インストール
• 配置自由度・編集効率・再現性 を両立する新しい選択肢