diagram-design: işini tek cümleyle şemaya çevir

Sayfada iki yol var: aracın kendisi (1. bölüm, Claude Code ister) ve araç olmadan claude.ai sohbetinde kullanabileceğin hazır şema promptları (2. bölüm).

01 · Araç

Aracın kendisi: diagram-design

• Ne yapar: isteğine göre şema türünü seçer (adım adım akış, evet/hayır karar akışı, kimin ne yaptığını gösteren kulvarlı akış, müşteri yolculuğu, zaman çizelgesi, organizasyon şeması gibi; toplam 45 tür), planını söyler, şemayı tek bir HTML dosyası olarak yazar. Dosyaya çift tıklayınca tarayıcıda açılır.
• Neden işe yarar: sade, düzenli, okunaklı şemalar; yazılarla zemin arasındaki kontrastı kendisi kontrol eder.
• Renkler: renk kodlarını promptun içine yazabilirsin (aşağıdaki örneklerdeki gibi). Ya da sitenin adresini verirsin; renkleri ve yazı tipini oradan çıkarıp gösterir, onaylarsan kaydeder ve sonraki şemalar da o renkte çıkar.
• Neyle çalışır: Claude Code ve skill destekleyen benzer yapay zekâ araçlarıyla. claude.ai sohbet sitesinde çalıştığı doğrulanmadı; orada 2. bölümü kullan.

Kurulum (Claude Code)

Şu iki satırı sırayla yaz; güncel adımlar için aracın sayfasına bak.

/plugin marketplace add cathrynlavery/diagram-design

/plugin install diagram-design@diagram-design

Bil: sonuç modele göre değişir, aynı prompt iki kez farklı yerleşim verebilir. Yazmadığın bir kuralı varsayabilir (videodaki sipariş şemasında iade süresini kendisi koydu), şemayı paylaşmadan önce oku. Yazı tipleri internetten yüklenir.

Aracın sayfası ve lisansı (MIT): github.com/cathrynlavery/diagram-design

Videodaki dört prompt (birebir)

Köşeli parantez yok; kendi işine göre kelimeleri ve renk kodlarını değiştir.

Sipariş yolu (butik):

Instagram'dan kadın giyim satan Lavin Butik için sipariş → ödeme (kapıda, kart ya da havale) → kargo → teslim ya da iade sürecini şemaya çevir; renkler: ana renk #7A2E4D, zemin #F7F3EF, yazı #2B2626.

Yeni elemanın ilk haftası (kim ne yapar):

Yeni işe başlayan elemanın ilk haftasını kim ne yapar şeklinde şemaya çevir; renkler: ana renk #1F5F5B, zemin #F4F6F5, yazı #1E2524.

Randevu süreci (müşterinin gözünden):

Kuaför salonumuzun randevu sürecini müşterinin gözünden şemaya çevir; renkler: ana renk #B4532A, zemin #FAF6F1, yazı #2A2522.

Teklif süreci (ajans):

Ajansımızın teklif sürecini brif → teklif → onay → teslim adımlarıyla şemaya çevir; renkler: ana renk #2F4A8A, zemin #F5F6F8, yazı #1F2430.

02 · claude.ai

Araç olmadan: claude.ai'da hazır şema promptları

Program, kurulum ya da kod gerekmez.

1. claude.ai'da yeni bir sohbet aç.
2. Promptu kopyala, yapıştır, köşeli parantezli yerleri [ ... ] kendi bilginle değiştir.
3. Gönder, şemayı Claude çizsin. Çıkan şemanın ekran görüntüsünü alıp kullanabilirsin. Beğenmezsen tek cümleyle düzelt (2c).

Bir kural: müşteri adı, telefon, adres, IBAN gibi bilgileri yapıştırma. Şemaya gerek yok.

2a. Herhangi bir süreç

İşletmemde şu süreci herkesin anlayacağı bir şemaya çevirmek istiyorum: [süreç adı, ör. sipariş ve kargo / randevu alma / teklif hazırlama / iade ve değişim / yeni çalışanın ilk haftası].

Süreci kendi cümlelerimle anlatıyorum: [kim ne yapar, hangi sırayla, nerede karar verilir; dağınık olabilir]

Önce bu süreç için en uygun şema türünü öner (adım adım akış, evet/hayır karar akışı, kimin ne yaptığını gösteren kulvarlı akış ya da zaman çizelgesi) ve nedenini tek cümleyle söyle. Sonra o türde, tek sayfalık bir SVG şema çiz.
- Renkler: [markanın renkleri, ör. bordo ve krem; renk kodların varsa onları yaz]. Yazılar zeminin üstünde rahat okunsun.
- Kutular kısa olsun, en fazla dört kelime. Karar noktalarını soru olarak yaz.
- Anlatmadığım adımı ya da kuralı ekleme. Eksik gördüğün yeri şemanın altına soru olarak yaz.

2b. Öne Çıkanlar için dikey sipariş şeması

[Ne sattığını yaz] satıyorum. Müşterinin bana yazmasından siparişin eline ulaşmasına kadar olan yolu tek bir şema olarak çiz.

Adımlar: [kendi adımlarını sırayla yaz, ör. mesaj atar → ürünü seçer → adresini verir → ödeme (havale ya da kapıda ödeme) → sipariş hazırlanır → kargoya verilir → takip numarası gönderilir]

- Şemayı tek sayfalık bir SVG çizimi olarak oluştur, telefon ekranına sığacak dikey oranda olsun.
- Her adım kısa bir kutu, en fazla dört kelime; seçenekli adımları iki kola ayır.
- Renkler: [markanın renkleri]. En üste başlık: [ör. "Nasıl sipariş verilir?"].
- Benim yazmadığım süre, fiyat ya da kural ekleme. Bilmediğin yere [DOLDUR] yaz.
- IBAN, telefon, adres gibi bilgileri şemaya koyma; "mesajla iletilir" yaz.

Şemayı Öne Çıkanlar'a eklemeden önce [DOLDUR] yazan yerleri tamamla; IBAN gibi bilgileri herkese açık hikâyeye yazma.

2c. Tek cümleyle düzelt

Aynı sohbette şunlardan birini yaz:

• "Kutuları büyüt, yazılar telefonda okunsun."
• "Dördüncü ve beşinci adımı tek kutuda birleştir."
• "Arka planı açık renk yap, yazıları koyu."
• "Aynı şemayı yatay olarak da çiz."

03 · Kullanım

Şemayı nerede kullanırsın

• Öne Çıkanlar: şemanın ekran görüntüsünü al, hikâye olarak paylaş, profilinde yeni bir öne çıkan açıp adını "Sipariş" koy. Aynı soru geldiğinde "Öne Çıkanlar'daki Sipariş'e bakabilirsin" demen yeter.
• Ekibine: yeni çalışana ilk gün şemayı gönder; kim ne zaman ne yapıyor tek sayfada görsün.
• Teklifine: teklif dosyana süreç şemasını ekle; müşteri neyin ne zaman olacağını baştan görsün.

Promptlar bir başlangıç. Kendi işine göre değiştir, beğendiğin hâlini kaydet; bir dahaki süreçte yalnız kelimeleri değiştirirsin.