Mermaid Diyagram Vitrin: Tüm Grafik Tipleri

Tüm Mermaid diyagram tiplerini interaktif örneklerle keşfedin. Her diyagram, optimal deneyim için yakınlaştırma, kaydırma ve tam ekran görüntülemeyi destekler - ancak interaktif özellikler tarayıcınıza ve platformunuza bağlı olarak değişebilir.

1. Akış Şeması - Süreç Akışı Görselleştirme

Akış şemaları süreçleri, karar ağaçlarını ve sistem akışlarını görselleştirmek için mükemmeldir.

Border-first (site standardı): Stilli düğümlerde tek nötr dolgu (#1e293b) ve anlam stroke renkleri kullanılır; parlak düğüm dolguları yok. Palet ve şablonlar için docs/BLOG_WRITING.md dosyasına bak.

2. Sıralı Diyagram - Etkileşim Zaman Çizelgesi

API çağrıları, kullanıcı etkileşimleri ve sistem iletişimlerini belgelemek için mükemmel.

3. Sınıf Diyagramı - Nesne Yönelimli Yapı

Yazılım mimarisi ve sınıf ilişkilerini belgelemek için ideal.

4. Durum Diyagramı - Durum Makinesi Görselleştirme

Durum makineleri, yaşam döngüsü akışları ve durum geçişlerini modellemek için mükemmel.

5. Varlık İlişki Diyagramı - Veritabanı Şeması

Veritabanı tasarımı ve ilişki dokümantasyonu için gerekli.

6. Gantt Şeması - Proje Zaman Çizelgesi

Proje planlama ve zaman çizelgesi görselleştirmesi için mükemmel.

7. Pasta Grafiği - Veri Dağılımı

Oranları ve yüzdeleri göstermek için basit ve etkili.

8. Git Grafiği - Versiyon Kontrol Akışı

Git dallanma stratejilerini ve birleştirme akışlarını görselleştirin.

9. Kullanıcı Yolculuğu - Müşteri Deneyimi Haritalama

Kullanıcı deneyimlerini ve müşteri yolculuklarını haritalayın.

10. Dört Bölmeli Grafik - Öncelik Matrisi

Önceliklendirme ve karar verme için kullanışlı.

11. Zihin Haritası - Kavram Organizasyonu

Beyin fırtınası ve hiyerarşik bilgi organizasyonu için harika.

12. Zaman Çizelgesi - Tarihsel Olaylar

Kronolojik olayları ve kilometre taşlarını belgeleyin.

13. Gereksinim Diyagramı - Sistem Gereksinimleri

Sistem gereksinimlerini ve ilişkilerini belgeleyin.

Mermaid Diyagramlarını Kullanma İpuçları

İnteraktif Özellikler

• Yakınlaştırma: Fare tekerleği veya pinch hareketi kullanın (tarayıcı desteğine bağlıdır)
• Kaydırma: Tıklayın ve sürükleyerek hareket ettirin (dokunmatik cihazlarda değişebilir)
• Tam Ekran: Detaylı görünüm için genişlet butonuna tıklayın (platforma bağlıdır)
• Sıfırlama: Sıfırlama butonu ile orijinal görünüme dönün
• Erişilebilirlik: Çoğu interaktif özellik klavye navigasyonu ile çalışır, ancak deneyim farklı yardımcı teknolojilerde değişebilir

En İyi Uygulamalar

1. Diyagramları odaklı tutun ve çok karmaşık yapmayın
2. Önemli öğeleri vurgulamak için renkleri stratejik kullanın
3. Açıklık için notlar ve etiketler ekleyin
4. Mobil cihazlarda duyarlılık için test edin
5. Büyük diyagramları daha küçük parçalara bölmeyi düşünün

Her Diyagram Tipini Ne Zaman Kullanmalı

• Akış Şeması: Süreç akışları, karar ağaçları
• Sıralı: API etkileşimleri, kullanıcı akışları
• Sınıf: Yazılım mimarisi, OOP tasarımı
• Durum: Durum makineleri, durum akışları
• ER: Veritabanı şemaları, veri ilişkileri
• Gantt: Proje zaman çizelgeleri, zamanlama
• Pasta: Veri dağılımı, yüzdeler
• Git: Versiyon kontrol stratejileri
• Yolculuk: Kullanıcı deneyimi haritalama
• Dört Bölme: Öncelik matrisleri, karşılaştırmalar
• Zihin Haritası: Beyin fırtınası, kavram organizasyonu
• Zaman Çizelgesi: Tarihsel olaylar, yol haritaları
• Gereksinim: Sistem özellikleri