Claude Code ile Ücretsiz, Editoryal Diyagramlar: diagram-design Kurulum Rehberi

Claude Code'a doğrudan "bana bir mimari diyagramı çiz" dediğinizde genelde tek düze, kutu ok tarzında, hiç şık durmayan bir çıktı alırsınız. Bu rehberde, bu sorunu çözen ücretsiz ve açık kaynaklı bir Claude Code skill'i olan diagram-design'ı nasıl kuracağınızı ve kullanacağınızı adım adım anlatıyoruz.

Araç, tek bir doğal dil isteğiyle 39 farklı editoryal diyagram tipini (mimari, akış şeması, zaman çizelgesi, öncelik matrisi ve daha fazlasını) tutarlı bir tasarım dilinde üretiyor hem de tamamen yerel, internet bağlantısı gerektirmeyen tek bir HTML dosyası olarak.

diagram-design Nedir?

diagram-design, Cathryn Lavery tarafından geliştirilen açık kaynaklı bir "skill" yani Claude Code, Codex, Factory Droid ve Pi gibi AI kodlama araçlarının okuyup uygulayabildiği bir talimat setidir. Kendi başına çalışan bağımsız bir program değildir; bir AI ajanının bu talimatları yorumlayıp sizin isteğinize göre HTML/SVG kodu üretmesiyle işler.

Neden Kullanmalı?

• Ücretsiz ve açık kaynaklı: Herhangi bir lisans ücreti yok.
• 39 farklı diyagram tipi: Mimari, akış şeması (flowchart), sıralama diyagramı (sequence), durum makinesi, ER/veri modeli, zaman çizelgesi, quadrant, Gantt, ER şeması, Sankey, UML sınıf diyagramı ve dahası hepsi aynı editoryal tasarım diline sahip.
• Tek dosya, sıfır bağımlılık: Çıktı, tarayıcıda çift tıklayarak açılabilen tek bir HTML dosyası. Figma veya başka bir tasarım aracına ihtiyaç yok.
• Marka uyumluluğu: Kendi web sitenizin renk paletini ve fontlarını otomatik olarak çekip diyagramlara uygulayabiliyor.
• draw.io / Mermaid dönüştürme: Elinizde zaten bir draw.io veya Mermaid diyagramı varsa, aynı içerikle bu editoryal tasarıma yeniden çizdirebiliyorsunuz.

Gereksinimler

Bu skill, aşağıdaki AI kodlama araçlarından biri üzerinde çalışır:

• Claude Code
• Codex
• Factory Droid
• Pi

Bu rehberde Claude Code üzerinden kurulumu anlatıyoruz.

Adım 1: Marketplace'i Ekleme

Claude Code'u açın ve şu komutu çalıştırın:

/plugin marketplace add cathrynlavery/diagram-design

Bu komut, diagram-design deposunu Claude Code'un plugin marketliğine ekler.

Adım 2: Skill'i Kurma

Ardından şu komutu çalıştırın:

/plugin install diagram-design@diagram-design

Kurulum birkaç saniye sürer. Tamamlandığında skill kullanıma hazırdır.

Adım 3: Otomatik Güncellemeleri Açma (Opsiyonel)

Skill'in gelecekteki güncellemelerini otomatik almak isterseniz:

1. /plugin komutunu çalıştırın.
2. Marketplaces sekmesini açın.
3. diagram-design'ı seçin.
4. Enable auto-update seçeneğini işaretleyin.

Claude Code, üçüncü taraf marketlikler için otomatik güncellemeyi varsayılan olarak kapalı tutar; bu adımı yaptıktan sonra arka planda güncellemeleri kontrol etmeye başlar.

Adım 4: İlk Diyagramınızı Oluşturma

Artık herhangi bir komut yazmanıza gerek yok doğrudan doğal dille isteyin. Örnek:

Bana bir SaaS uygulamasının mimarisini göster: frontend, backend,
veritabanı, Redis cache.

veya:

Bir kullanıcı kayıt akışının karar mantığını flowchart olarak çiz:
email doğrulama, şifre kontrolü, hoş geldin maili.

Claude, isteğinize en uygun diyagram tipini kendi belirler, HTML dosyasını oluşturur ve dosyanın kaydedildiği konumu terminalde gösterir. Dosyayı tarayıcıda açarak sonucu görebilirsiniz.

Adım 5: Kendi Marka Renklerinizi Uygulama

Diyagramların sitenizin renk paletine ve fontlarına uymasını isterseniz, şunu isteyin:

diagram-design'ı https://sizinsiteniz.com adresine göre ayarla.

Skill, sitenizin ana renklerini ve font ailelerini otomatik olarak tespit eder, size bir önizleme (diff) sunar, onayınızla birlikte bu tercihleri kaydeder. Bu andan itibaren oluşturduğunuz tüm diyagramlar kendi marka kimliğinizi taşır.

Sonucu Düzenleme

Çıktıdan memnun kalmazsanız, aynı sohbette doğal dille düzeltme isteyebilirsiniz örneğin "bu kutuyu kaldır" veya "vurgu rengini değiştir" gibi. Skill dosyayı yeniden üretir.

Sonuç

diagram-design, teknik içerik üreten herkes için diyagram üretim sürecini önemli ölçüde hızlandırıyor. Kurulumu birkaç dakika sürerken, sonuçta elde ettiğiniz diyagramlar hem tutarlı hem de profesyonel görünüyor üstelik hiçbir ücret ödemeden. İlk diyagramınızı oluşturduktan sonra, aracın 39 farklı diyagram tipini ve draw.io/Mermaid dönüştürme özelliğini keşfetmeye devam edebilirsiniz.