Mermaid Diyagram Tipleri: Her Grafik Türü için Örnekler

Mermaid, düz metni diyagrama çevirir; böylece bir şema, belgelediği kodun yanında durabilir. Aşağıdaki her diyagram tipi, kopyalayıp uyarlayabileceğiniz çalışan bir örnekle geliyor. Diyagramı tam ekran açmak için üzerine tıklayın.

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.

Aşağıdaki stilli düğümler tek nötr dolgu (#1e293b) kullanır ve anlamı stroke renginde taşır; bu, yoğun bir diyagramı koyu zeminde okunur tutar.

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ı#

Diyagramları Görüntüleme#

• Tam ekran: Diyagrama tıklayın; ekrana sığacak şekilde ölçeklenir
• Klavye: Tab ile diyagrama gelin, Enter veya Space ile açın
• Kapatma: Esc’e basın, kapat butonunu kullanın veya diyagramın dışına tıklayın

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

Diyagram Tipi Seçim Rehberi#

• 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

Kaynaklar#

• Mermaid Resmi Belgeleri (yeni sekmede açılır) - Mermaid’in tanıtımı, sözdizimi referansı ve diyagram tipleri
• Mermaid GitHub Deposu (yeni sekmede açılır) - Kaynak kodu, sürüm notları ve topluluk katkıları
• Mermaid Canlı Editör (yeni sekmede açılır) - Mermaid diyagramlarını etkileşimli olarak oluşturma ve paylaşma aracı
• Diyagram Sözdizimi Referansı (yeni sekmede açılır) - Desteklenen tüm diyagram tiplerini kapsayan kapsamlı sözdizimi kılavuzu
• Mermaid Akış Şeması Belgeleri (yeni sekmede açılır) - Akış şeması düğümleri, kenarları ve stil seçenekleri için ayrıntılı kılavuz