Kod olarak diyagram (diagrams as code), mühendisliğin son on yılda benimsediği en iyi fikirlerden biri. Bir metin dosyasında yaşayan diyagram; inceleyebildiğin, diff alabildiğin ve geri alabildiğin bir diyagramdır. Anlattığı kodla birlikte seyahat eder ve asla birinin indirilenler klasöründe kaybolmaz.
Tek bir pürüz var ve bir diyagramı kod olarak tutmuş herkes bunun ne olduğunu çok iyi bilir. Metin, bir diyagramı saklamak için harika, düzenlemek için ise berbat bir yoldur. Tek bir kutuyu iki santim sola itmek istediğin anda kendini yine sözdiziminin içinde bulursun: rank'ları, yönleri ve görünmez yerleşim kurallarını tahmin eder, motor o şeyi en başından beri gözünün istediği yere nihayet koyana kadar yeniden render edersin.
Eksik yarı: beyaz tahta
İnsanların beyaz tahtaya uzanmasının nedeni, onun farklı bir soruyu yanıtlamasıdır. Kod "doğruluk kaynağı ne" sorusunu yanıtlar. Beyaz tahta "bu doğru görünüyor mu" sorusunu yanıtlar. Bir kutuyu gösterir ve sürüklersin. Riskli yolu kırmızıyla daire içine alırsın. Yerleşimin nasıl kodlandığını düşünmezsin, çünkü bir kodlama yoktur; yalnızca resim ve elin vardır.
LetDraw'un yaklaşımı, seçmek zorunda kalmaman gerektiği. Diyagram kodunu yapıştır; tuvalde gerçek, düzenlenebilir şekillere dönüşsün. Yalnızca bakabildiğin düz bir görsel değil, tutabildiğin gerçek kutular ve oklar. İşte çoğu ekibin zaten bir depoda tuttuğu türden bir kaynak:
graph TD A[Client] --> B[API Gateway] B --> C[Auth Service] B --> D[Orders Service] D --> E[(Database)]
Bu Mermaid'i içe aktar; LetDraw sana onun bir resmini vermez. Grafiği taşıyabileceğin şekiller olarak verir:
Sıkıcı kısım artık bitti. Tek bir yerleşim direktifiyle uğraşmadın. İlk geçişi bedavaya aldın ve tuvaldeki her şeyi istediğin gibi ayarlayabilirsin.
Mermaid'i görsel olarak düzenle: kutuyu taşı, notu düzelt, yolu vurgula
İçe aktarma gerçek şekiller ürettiği için beyaz tahta yarısı kendiliğinden çalışır. Metinde zahmetli, elle ise çocuk oyuncağı olan şeyleri yaparsın:
- Kontrol için yeniden render etmeden bir kutuyu gözünün istediği yere taşı
- Önemli olan düğüm diğerlerinden ayrışsın diye onu yeniden biçimlendir
- İnceleyicilerin hep sorduğu kısmın yanına bir not ekle
- Bugün ilgilendiğin istek akışını göstermek için bir yolu vurgula
Oklar seninle savaşmak yerine yardım eder. Yerleşik başlangıç ve bitiş ok uçlarının yanında kalıtım için UML içi boş uçları ve şema çalışmaları için ER crow's-foot kardinalitesi de hazır gelir. Asla elle bir işaret çizmez ya da döndürülmüş bir üçgenle bir notasyonu taklit etmezsin. Bir kutuyu başka birinin üzerinden sürüklediğinde akıllı bağlantılar oku şekillerinin etrafından otomatik olarak yeniden yönlendirir; böylece çizgi bir düğümün içinden geçmek yerine temiz kalır.
Bir diyagramın yaşaması gereken yer metindir. Düzenlenmesi gereken yer tuvaldir. Birini seçmek zorunda kalmamalısın.
Mermaid ya da D2'ye gidiş-dönüş, işin özü
İşi dürüst tutan kısım şu. İtip kakmayı bitirdiğinde çizimi tekrar Mermaid ya da D2'ye aktarırsın. Diyagram deponuza kod olarak döner ve her şey gibi bir pull request'te incelenebilir. Döngü şöyle görünür:
- Depondaki kod doğruluk kaynağıdır; diff'i alınır ve incelenir
- Tuval, bir insanın onu düzenleyip okunur hale getirdiği yerdir
- Çıkışta yeniden kod; böylece iyileştirilmiş yerleşim metin olarak yayınlanır
"Bir kez bir diyagram içe aktardım" ile "bir insanın bakımına gerçekten katlanabildiği kod olarak diyagram"ı ayıran şey bu son adımdır. Sözdizimi bir duvar olmaktan çıkar. Kodun incelenebilirliğini ve bir beyaz tahtanın ergonomisini korursun; hiçbirinin kaybetmesi gerekmez.
Nasıl denersin
Bir tuval aç, Koddan Oluştur'a uzan ve elindeki bir Mermaid ya da D2 parçasını yapıştır. Kutuları, bir duvara çizeceğin şekilde okunana kadar sürükle. Sonra onu tekrar koda aktar ve deponuza bırak. Koddan tuvale ve tekrar koda tüm yolculuk, bunu okumak kadar sürer.