Reladraw 是一套用來畫圖表的文字語言,目前為 0.8.1 版。作者認為 draw.io 這類工具雖能畫出精細圖表,卻得靠滑鼠手動擺放、效率低;Mermaid、Graphviz 這類宣告式工具打字即可畫圖,但位置交由工具自動決定,無法掌控版面。Reladraw 想填補這兩種做法之間的空白。
Reladraw 用類似「某節點在另一個節點右邊、且對齊」的敘述來擺放圖表元素,取代輸入座標數字的做法。整套工具以 TypeScript 寫成,內含剖析器、版面配置引擎與 SVG 產生器,沒有任何執行期依賴。使用者可透過 npm 安裝,再用指令列把文字檔轉換成 SVG 圖檔。
這個作品以 Show HN 形式發布,獲得 371 分、超過 100 則留言,討論熱烈。留言區有人肯定相對位置語法比自動排版更容易做出可讀架構圖,也有人拿它與 Mermaid、D2 等工具比較,另外因專案標榜可與 AI 代理整合,也有人討論能否讓語言模型直接產生 Reladraw 語法。
對正在學程式的孩子來說,Reladraw 是認識「畫圖表其實也是寫程式」的好例子:只要打幾行文字敘述位置關係,電腦就能自動排版畫出圖形,這跟寫程式解決問題的邏輯是一樣的。它也示範了一個專案可以從解決自己遇到的小麻煩開始,一步步發展成別人也能用的開源工具。
開源開發工具視覺化TypeScript