Mermaid.js Diyagramları için Tam Rehber
Basit metin tabanlı sözdizimiyle profesyonel diyagramlar oluşturmayı öğrenin
Mermaid.js nedir?
Mermaid, diyagramları dinamik olarak oluşturmak ve değiştirmek için Markdown esinli metin tanımlarını kullanan JavaScript tabanlı bir diyagram ve grafik aracıdır. Basit metin açıklamalarından diyagramlar üretmenizi sağlayan açık kaynaklı bir projedir.
Karmaşık çizim araçları yerine, diyagramınızı tanımlayan koda benzer bir sözdizimi yazarsınız ve Mermaid bunu görsel bir diyagram olarak render eder. Bu yaklaşım diyagramları sürüm kontrolüne uygun, güncellenmesi kolay ve dokümantasyon için ideal hale getirir.
Mermaid, dokümantasyon platformları, wikiler ve Markdown dosyalarıyla sorunsuz entegre olur ve geliştiriciler ile teknik yazarların favori araçlarından biridir.
Neden Mermaid.js kullanmalı?
- Sürüm kontrolü: Diyagramlar metin dosyalarıdır, bu yüzden kodunuzla birlikte Git’te izlenebilir
- Hızlı güncellemeler: Tüm diyagramları yeniden çizmek yerine birkaç satır metni değiştirin
- Tutarlılık: Mermaid düzeni ve stili otomatik olarak yönetir, tutarlı diyagramlar sağlar
- Tasarım araçları gerekmez: Visio, Lucidchart veya diğer pahalı araçlara ihtiyaç yok
- Kod olarak dokümantasyon: Diyagramları dokümantasyonunuzla aynı depoda tutun
- Çapraz platform: Tarayıcılarda ve Node.js’te çalışır, birçok platformla entegre olur
- Ücretsiz ve açık kaynak: Lisans maliyeti yok, aktif topluluk
- Birden çok diyagram türü: Akış şemaları, sekans diyagramları, sınıf diyagramları ve daha fazlasını destekler
Desteklenen diyagram türleri
Mermaid, farklı dokümantasyon ihtiyaçlarını karşılamak için çok çeşitli diyagram türlerini destekler:
Akış şeması
Düğümler ve kenarlar ile iş akışlarını, süreçleri ve karar ağaçlarını görselleştirin.
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[Alternative]
C --> E[End]
D --> EKullanım senaryosu: Süreç akışları, algoritmalar, karar mantığı
Sekans diyagramı
Zaman içinde farklı aktörler veya sistemler arasındaki etkileşimleri gösterir.
sequenceDiagram
participant User
participant API
participant DB
User->>API: Request data
API->>DB: Query
DB-->>API: Results
API-->>User: ResponseKullanım senaryosu: API etkileşimleri, sistem iletişimi, kullanıcı akışları
Sınıf diyagramı
Sınıflar, öznitelikler ve ilişkilerle nesne yönelimli sistemleri modelleyin.
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- DogKullanım senaryosu: Yazılım mimarisi, OOP tasarımı, veritabanı şemaları
Durum diyagramı
Bir sistem veya süreçteki durumları ve geçişleri gösterir.
stateDiagram-v2
[*] --> Idle
Idle --> Loading: Start
Loading --> Success: Complete
Loading --> Error: Fail
Success --> [*]
Error --> Idle: RetryKullanım senaryosu: Durum makineleri, yaşam döngüsü yönetimi, UI durumları
ER diyagramı
Veritabanı yapılarını ve varlıklar arasındaki ilişkileri modelleyin.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
int id
string name
string email
}Kullanım senaryosu: Veritabanı tasarımı, veri modelleme, sistem mimarisi
Gantt diyagramı
Proje zaman çizelgelerini ve planlarını planlayın ve görselleştirin.
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :a2, after a1, 45dKullanım senaryosu: Proje planlama, sprint zaman çizelgeleri, yol haritaları
Pasta grafiği
Oransal verileri ve yüzdeleri görsel olarak gösterir.
pie title Distribution
"Category A" : 42
"Category B" : 30
"Category C" : 28Kullanım senaryosu: Anket sonuçları, pazar payı, kaynak tahsisi
Git grafiği
Git dallanma stratejilerini ve commit geçmişini görselleştirin.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge developKullanım senaryosu: Git iş akışı dokümantasyonu, dallanma stratejileri
Mermaid ile Başlarken
1. Diyagram türünüzü seçin
Önce neyi göstermek istediğinizi en iyi temsil eden diyagram türüne karar verin. Her diyagram türü 'flowchart', 'sequenceDiagram' veya 'classDiagram' gibi belirli bir anahtar kelimeyle başlar.
2. Metin sözdizimini yazın
Diyagramınızı tanımlamak için Mermaid'in basit sözdizimini kullanın. Sözdizimi sezgiseldir ve neredeyse doğal dil gibi okunur. Örneğin, 'A --> B' A'dan B'ye bir ok oluşturur.
3. Diyagramınızı önizleyin
Diyagramınızı gerçek zamanlı görmek için çevrimiçi görüntüleyicimizi veya Mermaid uyumlu bir aracı kullanın. İstediğiniz gibi ayarlayın.
4. Dışa aktarın ve paylaşın
Diyagramınızı sunumlar için SVG veya PNG olarak dışa aktarın ya da ekibinizle bir URL paylaşın. Mermaid'i Markdown dosyalarına da doğrudan gömebilirsiniz.
En iyi uygulamalar
- Diyagramları tek bir kavram veya iş akışı üzerinde odaklayın
- Gerçek iş mantığını açıklayan anlamlı etiketler kullanın
- Karmaşık diyagramları daha küçük, birbirine bağlı diyagramlara bölün
- Karmaşık bölümleri açıklamak için %% ile yorum ekleyin
- Diyagramlarınızda tutarlı adlandırma kuralları kullanın
- Diyagramlarınızı sonlandırmadan önce hedef ortamda test edin
- Gerektiğinde düzeni kontrol etmek için yön ipuçları (TD, LR) ekleyin
- Akış şemalarında ilgili düğümleri gruplamak için subgraph kullanın
- Okunabilirliği korumak için stil seçeneklerini ölçülü kullanın
- Diyagram kaynak dosyalarını kodunuzla birlikte sürümleyin
Yaygın kullanım senaryoları
Yazılım dokümantasyonu
Sistem mimarisini, API akışlarını ve bileşen etkileşimlerini kodunuzla birlikte belgeleyin.
Proje planlama
Sprint planlaması, proje zaman çizelgeleri ve kaynak tahsisi için Gantt diyagramları oluşturun.
Teknik öneriler
Önerilen çözümleri, sistem tasarımlarını ve mimari kararları görselleştirin.
Kullanıcı yolculukları
Kullanıcı akışlarını, müşteri deneyimlerini ve etkileşim kalıplarını haritalayın.
Veritabanı tasarımı
Varlık ilişkilerini, şema yapılarını ve veri bağımlılıklarını modelleyin.
Süreç dokümantasyonu
İş süreçlerini, iş akışlarını ve standart operasyon prosedürlerini belgeleyin.
Eğitim materyalleri
Eğitimler ve teknik kurslar için net, sürüm kontrollü diyagramlar oluşturun.
API dokümantasyonu
İstek/yanıt akışlarını, kimlik doğrulama dizilerini ve uç nokta etkileşimlerini gösterin.
Ek kaynaklar
Sık Sorulan Sorular
Mermaid Viewer kullanımı ve diyagram oluşturma hakkında sık sorulan sorular
İlk diyagramınızı oluşturmaya hazır mısınız?
Ücretsiz çevrimiçi Mermaid görüntüleyicimizi deneyin ve dakikalar içinde profesyonel diyagramlar oluşturmaya başlayın.
Mermaid Viewer'ı aç