Teknik diyagramların çoğu genellikle iki uç yöntemden biriyle oluşturulur: otomatik düzenleme (auto-layout) motorları veya mutlak konumlandırma araçları. Mermaid, Graphviz ve D2 gibi otomatik düzenleme araçları, varlıkları ve bağlantıları tanımlamanıza izin verir ancak bunların nereye yerleşeceğine yazılım karar verir [1]. Öte yandan Figma, Excalidraw ve draw.io gibi araçlar yerleşim üzerinde tam kontrol sunar, ancak karmaşık bir diyagramdaki her düzenleme, öğelerin yavaş ve manuel olarak hareket ettirilmesini gerektirir [1].
Reladraw, bu iki yaklaşım arasında orta bir yol sunar. Koordinatlar yerine göreceli terimler kullanarak öğelerin nereye yerleşeceğini tanımladığınız bir diyagram dilidir [1]. Bir algoritmanın akışı nasıl oluşturacağını tahmin etmek veya kutuları tuval üzerinde manuel olarak sürüklemek yerine, düzeni sade bir dille belirtirsiniz [S1, S3].
Göreceli Yerleşim Nasıl Çalışır?
Reladraw’da her konum, başka bir öğeye göre belirtilir [1]. Dilin hiçbir formunda koordinat bulunmaz [3]. Bunun yerine, düğümleri birbirine bağlamak için yön belirten ifadeler kullanılır [2].
Örneğin, bir düğüm başka bir düğümün above (üstünde), below (altında), left of (solunda) veya right of (sağında) şeklinde yerleştirilebilir [2]. Ayrıca above-left of (sol üstünde) gibi birleşik yönler kullanabilir veya iki öğenin aynı merkez hattını paylaşmasını sağlamak için level with (aynı hizada) ifadesini kullanabilirsiniz [2]. Daha karmaşık gruplandırmaları yönetmek için, bir öğeyi right of A and B (A ve B’nin sağında) şeklinde yerleştirerek, onu her iki öğeyi de kapsayan hayali kutuya göre hizalayabilirsiniz [2].
Reladraw’da mesafeler, kesin ölçümlerden ziyade minimum boşluklar olarak ele alınır [3]. Bir boşluk asla kesin bir sayı değildir; bunun yerine öğeler, ifadelerin izin verdiği ölçüde birbirine yakın yerleşir [3]. Bir düğümü iki diğerinin between (arasında) konumlandırdığınızda, sığması için gereken tam miktar kadar onları birbirinden uzaklaştırır [3]. Eğer ortadaki düğüm silinirse, kalan öğeler otomatik olarak tekrar birbirine yaklaşır [3].
Yapay Zeka Ajanlarının Diyagram Oluşturma Sürecini İyileştirmek
Geleneksel diyagram araçları, yapay zeka ajanları için bir “kör nokta” oluşturur. Bir ajan Mermaid kodu ürettiğinde, daha sonra bir algoritmanın belirleyeceği düzen hakkında tahminde bulunmuş olur [1]. Ajan, ortaya çıkan SVG’yi göremediği için hataları bulmak adına görüntüyü oluşturup ona bakmak zorundadır; bu da yavaş bir döngüye neden olur [3].
Piksel tabanlı araçlarda ise sorun farklıdır. Bir ajan, tek bir servisi hareket ettirmek için hangi koordinatları değiştireceğine karar vermeden önce tüm resmi bir sayı listesinden yeniden inşa etmek zorundadır [1].
Reladraw, düzenlemeyi doğrudan kaynak dosyaya cümleler halinde ekleyerek bu sorunu çözer [1]. Bu sayede bir ajan şunları yapabilir:
- Kaynağı yeniden okuyarak bir veritabanının bir API’nin
under(altında) olduğunu doğrulayıp niyeti teyit edebilir [S1, S3]. - Sadece konumu tanımlayan cümleyi düzenleyerek resmi değiştirebilir [1].
- Karmaşık koordinat sistemlerini yorumlama ihtiyacından kurtulur [1].
Ancak, araç nihai render işlemini bu ifadelerden çözdüğü için, bir ajan bazı sonuçları yalnızca metin üzerinden doğrulayamaz [3]. Görsel bir render veya tanı raporu olmadan, uzun bir metin dizisinin düğümden taşıp taşmadığını veya bağımsız olarak sabitlenmiş iki kümenin üst üste binip binmediğini anlayamaz [3].
Sözdizimi ve Uygulama
Reladraw, iç içe geçme veya belirgin girintiler içermeyen, satır başına tek ifade şeklinde basit bir format kullanır [3]. Bu, hiçbir satırın başka bir satırın konumuna bağımlı olmamasını sağlar [1].
Temel sözdizimi öğeleri şunlardır:
- Düğümler (Nodes):
node name "text"şeklinde tanımlanır [2]. Noktalı isimler (örneğinserver.docker), üst düğüm önce tanımlanmak kaydıyla bir alt düğümü belirtir [2]. - Kenarlar (Edges): Bağlantılar,
edge a -> bgibi oklar kullanılarak tanımlanır [2].from: right to: leftifadesini kullanarak çizginin eğimini belirleyebilirsiniz [2]. - Stil: Görünüm,
styleanahtar kelimesiyle veya metinden sonraki köşeli parantezler içinde yönetilir; bu sayede özel renkler, boyutlar verectangle(dikdörtgen),document(doküman) veyadatabase(veritabanı) gibi şekiller tanımlanabilir [2].
Reladraw’u kullanmak için bir .reladraw dosyası yazabilir ve reladraw diagram.reladraw -o diagram.svg komutuyla bunu bağımsız bir SVG’ye dönüştürebilirsiniz [3]. Claude Code, Cursor veya Copilot gibi yapay zeka asistanlarını kullananlar için, modele dil sözdizimini öğretmek amacıyla npx skills add reladraw/reladraw -g komutuyla özel bir ajan yeteneği yüklenebilir [1].
Herhangi bir kurulum yapmadan dili denemek isterseniz, kaynağı düzenledikçe düzenlerin gerçek zamanlı olarak yeniden çözüldüğünü görmek için tarayıcınızda reladraw playground’u deneyebilirsiniz [S1, S2].
