
2026/09/27 2:10
Show HN: Reladraw – 配置位置を自分で決めるための図解言語
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Reladraw は、ノードの配置を絶対座標や複雑なアルゴリズムではなく、相対的な文(例:"below app.ui")を通じて定義する図面のテキスト言語を導入します。すべての距離はこれらのステートメントから導き出されるため、デフォルトでノードが重ならないように決定論的なレイアウト解決が可能になり、ネストされたインデントを必要としません。Mermaid、Graphviz、または D2 といった自動配置ツール(配置を推測するもの)とは異なり、Reladraw は完全な制御を提供すると同時に、draw.io や Figma のような絶対位置決定ツールの遅い手作業を回避します。これにより、エージェントはソーステキスト内で直接配置を編集でき、ファイルを再読み込みして意図と配置を確認し、自動エンジンからの不確実性を避けることができます。現在バージョン 0.5.0 であり、TypeScript ベースのパルサー、決定論的なソルバー、SVG レンダラーを使用しており、実行時依存関係はなく、Apache-2.0 ライセンスの下で動作します(フォークは異なる名称を携える必要があります)。
npm install -g reladraw または npx skills add reladraw/reladraw -g などのエージェントスキルコマンドを通じてインストールできます。現在組み込みアイコン、ノード周囲のエッジ経路付け、診断レポートが欠落しているものの、開放的でネストされていない構文により、厳密な座標系と曖昧な自動生成の間の架け橋となる予測可能で読みやすい図面定義のための安定した基盤を提供します。
Text to translate:
-
Improved Summary:
Reladraw introduces a text-based language for diagrams that defines node placement through relative sentences (e.g., "below app.ui") rather than absolute coordinates or complex algorithms. Every distance is derived from these statements, enabling deterministic layout resolution where nodes do not overlap by default and without requiring nested indentation. Unlike auto-layout tools such as Mermaid, Graphviz, or D2—which guess arrangements—Reladraw provides total control while avoiding the slow hand-work of absolute-positioning tools like draw.io or Figma. This allows agents to edit placements directly in source text, re-read the file to confirm intent and arrangement, and avoid unpredictability from automatic engines. Currently at version 0.5.0, it uses a TypeScript-based parser, deterministic resolver, and SVG renderer with no runtime dependencies, runs under an Apache-2.0 license (forks must carry a different name), and can be installed via
npm install -g reladraw or agent skill commands like npx skills add reladraw/reladraw -g. While it currently lacks built-in icons, edge routing around nodes, and diagnostics reports, its open, non-nested syntax offers a stable foundation for predictable, readable diagram definitions that bridge rigid coordinate systems and vague automatic generation.本文
reladraw: 配置を記述するテキスト言語
reladraw は、図の要素配置場所を文章で直接指定するためのテキスト言語です。ブラウザですぐに使えてインストール不要です。左側のソースコードを変更すると、右側でレイアウトが自動的に再計算されます。
動作原理と特徴
reladraw は「自動レイアウト」と「絶対位置指定」の中間地点を目指しています。ファイル内には座標の数値は一切含まれず、配置関係のみを記述します。
言語の仕組み
- 相対的配置: すべての位置関係は他の要素に対して相対的に記述されます。
- 数値の不在: ファイル内には「座標」という数字が一切登場しません。
- 独立した記述: ネスト構造を使用しないため、インデントや線分の位置に依存せず、各要素を独立して処理できます。
例文
以下のコードは
examples/arch.reladraw の例です。
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
座標の計算方法
- 距離や配置は、
やcluster.hub の左上
といった記述から自動計算されます。cluster.desktop1 と cluster.laptop1 の間 - 人間が手作業で座値を調整する必要はありません。配置そのものが宣言されています。
なぜエージェントに必要なのか
最も一般的なユースケースは「図を描くこと」ではなく、「既存の図を変更すること」です。
メリットとデメリットの比較
| 手法 | 特徴 | アーグエントとの相性 |
|---|---|---|
| 自動レイアウト (Mermaid, Graphviz) | 配置をシステムに任せるが、具体的なイメージの変更には適さない。 | ⚠️ 意図と結果の乖離が発生しやすい。配置情報が文書化されていないため、「何もしゃべらないまま書き換え」になりがち。 |
| 絶対位置指定 (draw.io, Figma) | 配置への完全な制御があるが、改修に手間がかかる。 | ⚠️ エージェントは座標値を読み込み画像解析し、「どの数値を変えよ」と判断する必要があるため負荷が高い。 |
| reladraw (推奨) | **「明示的配置」**を採用。配置関係が文章で記述されている。 | ✅ 意図の変更は「『どこに置くか』を記述する文句を変える」だけ。画像解析不要。 |
システムの限界と診断(Diagnostics)
エージェントが自動で生成したレイアウトでは、以下の問題はテキストからは直接表せず、解析結果としてしか得られません:
- クラスターの重なり
- テキストがノードからこぼれ出る
- エッジが他のエッジを横切っている
reladraw のアプローチ:
- 診断情報の重視: 解決後の幾何形状に基づく機械可読な情報を「真の出力」として捉えます。
- 再レンダリング不要: レンダリングやビジョンモデル、ピクセル演算一切不要で、テキストファイルの編集だけで修正が可能です。
エージェントとの連携方法
現時点ではどのモデルのトレーニングデータにも含まれていないため、エージェントに事前に言語仕様を教える必要があります。本リポジトリには、そのためのスキル(Agent Skill)が用意されています。
インストールコマンド
エージェントにスキルを追加します(例:Claude Code, Codex, Cursor など)。
npx skills add reladraw/reladraw -g
- プロジェクト全体へのインストール: 上記コマンドのデフォルト動作です。
- 特定のモデルのみを対象にする場合:
npx skills add reladraw/reladraw -g -a claude-code
注意点
- スkil はインストール時にコピーされた静的なファイルのため、自動更新されません。文法が変更された場合は手動で再インストールする必要があります。
- コンテンツは Markdown で記述されており、文法説明も同梱されています。
現状(v0.5.0)
初期段階ですが、主要機能の動作確認は完了しています。
- 実装済み: パーサー、決定論的な解決エンジン、SVG レンダラー、コマンドラインツール。
- 外部依存関係なしの SVG レンダラーを使用。
実装予定・未実装の機能(優先度順)
- 診断レポート: 「成功して描画された画像にどのような問題があるか」を報告する機能。
- ノード回避エッジルーティング: エッジに対して「どの面から出発し、どの面へ到達するか」「途中ではどのギャップを下って進むか」を指定可能にする。
- 図面の拡張対応: アイコンや形状のセットを固定しているため、新しいアイコン・形状は現時点では追加できません。
注意: 言語仕様は現在固定されていません。文法の変更が予想されます。
設計上の制約と Scope
システムには以下の 3 つの重要な設計課題(Scope)があります。
1. 十分な表現力
- ベンチマークには文法では表現できない配置が含まれる場合がある。
- 焦点は「制約を設けること」ではなく「より多くの記述を追加すること」に置かれている。
- 危険なのは「表現力そのもの」ではなく、「エンジンが勝手に配置を選ぶこと」だ。
2. エンジンの判断範囲の制限
- 自動配置(推測)は拒否される。アルゴリズムによって選ばれた画像は予測不能であり、これは「予測可能性」を損なうためだ。
- ソースから座標を導くことは、記述された配置関係からの演繹であるべきだ。
- エンジンの自由さが距離には影響しても、関係性(誰が左で誰が右か)には影響してはならない。
3. 重なりとエッジルーティングの回避
- 相対配置のみを使うと、要素間が近づくと衝突する恐れがある。
- 「配置を宣言し、その後エッジルーティングを適用」というアプローチは失敗そのものを再現するため避ける。
- 第一版には「最小限のノード回避正交ルーティング」が必要であり、診断機能はその補完となる(代替ではない)。
先行事例との比較
reladraw とは異なる 4 つのアプローチが存在します。
-
Archify:
- エージェントによる記述に特化。型付き JSON を出力し、自己完結 HTML にコンパイル。
- グリッドまたは絶対座標を使用するため、「出力→レンダリング→確認→微調整」のループが残りやすい。
-
PIC と pikchr:
- ライブラリエンジンを持たず、文書で宣言された確定系テキスト図形式。
- 「カメの描画(turtle graphics)」に近い。「ペン運びのシーケンス」として表現されるため、再フローによるグループ構造の変更が難しい。
-
Graphviz の rank と cluster:
- 自動配置エンジンに対する「制約条件」であり、完全な置換ではない。
- 出力は依然として発生的・予測不能である。
-
Structurizr:
- 実際の手作業レイアウトが可能だが、C4 モデルに縛られるため汎用的でない。
- 「モデル記述法+レンダラーの付帯」という性質がある。
ライセンス
本プロジェクトは Apache-2.0 ライセンスで公開されています。
- 目的: 再利用可能な基礎要素として普及を促進すること。商用利用制限は目的に反します。
- 範囲: コードのみをカバーします。「reladraw」という名前やロゴ、商標の使用権までは付与されません。
- フォーク: 歓迎しますが、別の名前を使用することをお勧めします(詳細は NOTICE を参照)。
貢献について
特に Issues の作成をお待ちしています。あなたが試みて書けなかった図であれば尚更显珍贵です。
- 理由: 言語は急速に変化しているため、プルリクエストよりも Issues の方が有効です。
- 詳細: CONTRIBUTING.md に記述されています。