Reladraw - 配置を自分で決められるダイアグラム言語
Show HN: Reladraw – A diagram language where you decide where to place things
Reladrawは、要素の位置を「どこに置くか」を文章で指定できる新しいダイアグラム言語です。MermaidやGraphvizのような自動レイアウトでは思い通りの配置ができず、draw.ioやFigmaのような手作業では複雑な図の編集が大変という課題を解決します。すべての位置は「above-left of cluster.hub」のように他の要素との相対関係で記述され、座標は一切使いません。TypeScript製のパーサー、リゾルバー、SVGレンダラーを備え、CLIツールでテキストからSVGを生成できます。エージェント向けのスキルも提供され、AIが図の意図を読み取りやすく、変更も簡単です。
配置はファイルに文章として書かれている。だから図を変えることは、物の場所を述べた文を変えることなのだ。
HNでの議論
113- atombender
readmeにはこう書かれています：
> Mermaid、Graphviz、D2では、ボックスと接続を宣言すると、位置は自動的に決まります。特定の図を思い描いている場合、これらは適切なツールではありません。
D2のレイアウトエンジンTALA [1] は、実は多くの手動制御を可能にします。TALAは以前は商用でしたが、現在はオープンソースです。
私自身のテストでは、TALAはMermaidよりもはるかに優れたレイアウトを生成する傾向があり、ELKレイアウトアルゴリズム（Mermaidのデフォルトではなく、D2もELKをサポートしています）も含まれます。
TALAはコンテナごとの方向制御、どのシェイプを近くに配置する必要があるかの定義などをサポートしています。ただし、まだ試していません。
- s1mon
これは楽しみです。ただ、多くの例を「dark」から「light」や「print」テーマに切り替えると、ボックスが黒いままでテキストが読めなくなります。
- picardo
気に入りました！Markdownファイルでレンダリングし、シンタックスハイライトするVSCode拡張機能を作りました：https://github.com/volkanunsal/relative-diagrams-vscode/
- apinstein
これはAIコーディング時代に非常に必要とされています！ダイアグラムは、私のメンタルモデルとエージェントの間で高帯域の調整を行う最良の方法の一つだと思います。実際のアーキテクチャを維持しながら高速開発を進める上で、優れたビジュアルが主要なボトルネックであると感じ、この問題に少し取り組んできました。
エージェントが使えるダイアグラムツールのリストに必ず追加します！
- hhh
これにはExcalidrawを使っています
- whizzter
いいですね。このようなエンジンが、コピー＆ペーストして移動する代わりに、要素を追加すると「自動的に」配置してくれるなら、周りにものを描くのは面倒になりがちです。
コンパイラライターとして、データソースなどである程度パラメータ化できるか考えています。それとも、カスタムスクリプトジェネレータの方が適していると思いますか？（現状、これを手動でたくさん書く必要があるように感じますが、グループ化システムはデータからのワイルドカード展開に適しているように思えます。）
- tonnydourado
面白いアイデアで、未開拓のデザイン空間ですね。Graphvizのdotにはランクやヘッド/テールポートがあり、Plantumlのクラス図には相対位置のサポートがいくつかありますが、どちらもレイアウトエンジンへのヒントであり、決定論的な宣言ではありません。Plantuml図をいじって関係方向を強制し、少なくとも望むものに近いレイアウトにするために費やした時間ごとにニッケルをもらえたら、引退がずっと近くなるでしょう。
mermaidやPlantumlのように多くの特定の構文ではなく、一つの汎用構文を目指しているのは良いですが、それは長所でもあり短所でもあります。それがこれらの言語がそもそも進化した理由の一つで、みんながDOTを使うだけではなかったのです。緩和策の一つとして、何らかの再利用メカニズムはどうでしょうか？汎用ノードを一度定義して何度もインスタンス化できる方法です。例えばシーケンス図のようなものを描きたいとき、参加者レーンを一度定義/変更するだけで済みます。
もう一つの問題は「複数行ステートメントなし、行継続なし、ブロックなし」という哲学です。なぜそれを選んだのかは分かりますし、利点もありますが、特に長いノード名や、クラスの責任を列挙するなどノードのラベルにもっと詳細な説明を持たせたい場合、かなり煩わしい制約です。「ブロックなし」はおそらく大差ないでしょうが、行継続（つまり物理行と論理行の区別）はユーザー体験を左右します […]
- recroad
少しバグがあるようです。次の行を追加しました：
edge parser -> renderer "test edge" from: left to: right
すると、曲線矢印を作るほど賢くはありませんでした