- diyagram
- acik-kaynak
- claude-code
- yapay-zeka
- yazilim-gelistirme
- mimari
- gorsellestirme
diagram-design: Kod Tabanınızın Mimarisini Otomatik Çizen Açık Kaynak Araç
diagram-design, Claude Code eklentisi olarak çalışan MIT lisanslı bir repo. Marka renklerinizle temiz, okunabilir mimari diyagramlar üretiyor.
Instagram'da izle
Karmaşık bir sistemi anlatmanın en hızlı yolu bazen yazmak değil, çizmektir. Üç paragraf yazan biri kimseyi ikna edemezken, üç kutu ve birkaç ok her şeyi netleştirebilir. İşte bu yüzden diyagramlar hâlâ vazgeçilmez.
Diyagram Nedir, Neden Önemlidir?
Her gün karşılaştığınız Tokyo Metro haritası, diyagramın en yalın örneği. Aynı bilgiyi yazıyla aktarmaya kalkışsanız onlarca sayfa tutardı ve yine de anlaşılmazdı. Diyagram; "bu, şuna bağlı" ilişkisini bir bakışta iletmenin en kısa yoludur. Metro haritası da bir diyagram, organizasyon şeması da, yazılım mimarisi de.
Yapay Zekadan Önce Nasıl Yapıyorduk?
Yapay zeka araçları yaygınlaşmadan önce Miro, draw.io ve Figma bu işin başlıca platformlarıydı. Bir kutu çiziyordunuz, okun ne anlama geldiğini yazıyordunuz, akışı elle kuruyordunuz. Zaman alıcıydı ama en azından çıktı üzerinde tam kontrolünüz vardı.
AI'ın gelmesiyle birlikte Claude gibi araçlara "Bana bu projenin diyagramını çıkar" diyebilir oldunuz. Claude bir diyagram üretiyor; ancak burada bazı pratik sorunlar çıkıyor:
- Renk uyumsuzluğu: Üretilen diyagram projenizin marka renkleriyle örtüşmüyor.
- Ok karmaşası: Oklar birbirinin üzerine biniyor, takip etmek zorlaşıyor.
- Estetik tutarsızlıklar: Etiketler kutunun dışına taşıyor, görsel hiyerarşi bozuluyor.
Bunları tek tek düzeltmek ekstra efor demek.
diagram-design Eklentisi Ne Yapıyor?
diagram-design, Claude Code eklentisi olarak çalışan, MIT lisanslı ve ücretsiz bir açık kaynak repo. Üç temel avantajı var:
- Marka renklerini otomatik çekiyor. Sitenizden ya da proje dosyalarınızdan renk paletini alıp diyagrama uygular. Çıktı, projenizin görsel kimliğiyle uyumlu görünür.
- Kod tabanını okuyup mimariyi kendisi çıkarıyor. Siz elle açıklamak zorunda kalmadan bileşenler arasındaki ilişkileri analiz eder.
- Tutarlı çıktı üretir. Her çalıştırmada aynı görsel dili korur; oklar çakışmaz, etiketler doğru konumlanır.
Videoda iki çıktı yan yana karşılaştırılıyor: biri Claude'a sıfırdan istenen diyagram, diğeri diagram-design eklentisiyle üretilen. Eklenti çıktısı çok daha temiz; oklar net, legend (açıklama kutusu) diyagramın alt kısmında düzenli biçimde sıralanmış.
Diyagram Türleri
Repo yalnızca mimari diyagramlarla sınırlı değil; farklı diyagram türlerini destekleyen şablonlar da içeriyor. Claude Code skill olarak eklendiğinde, projenizin ihtiyacına göre doğru türü seçip üretebiliyorsunuz.
Kullanmadan Öğrenilmez
Bu aracı değerli kılan tek şey teknik özellikleri değil. Asıl mesele şu: bir sistemi anlamayan birine sunum yapacaksanız, görselin sade ve temiz olması kritik. Karşı tarafın gözünü yormayan, akışı tek bakışta kavratan bir diyagram, uzun bir dökümanın önüne geçer.
Yapay zeka araçlarıyla çalışmayı öğrenmenin tek yolu elleri kirletmektir. Bir repoyu indirip denemeden, bir promptu çalıştırıp sonuca bakmadan bu işi teoride öğrenmek mümkün değil. diagram-design de tam olarak böyle bir deneme alanı sunuyor: ücretsiz, açık kaynak ve hemen uygulanabilir.
Repo adresine GitHub üzerinden cathrynlavery/diagram-design yazarak ulaşabilirsiniz.