Mermaid Diyagram Editörü

Mermaid Diyagram Editörü: Kod Olarak Diyagram Oluşturun

Mermaid, metin tanımlarını SVG diyagramlarına dönüştüren bir diyagram oluşturma dilidir. Bir flowchart, sequence diyagram veya ER diyagramını düz metin olarak yazın ve gerçek zamanlı render edilmiş halini görün. Bu editör, resmi Mermaid.js kütüphanesini kullanarak Mermaid sözdiziminizi istemci tarafında ayrıştırır ve kaydırılabilir, yakınlaştırılabilir bir SVG önizlemesi olarak görüntüler.

Mermaid Nedir?

Mermaid, metin tabanlı tanımları kullanarak diyagramlar ve grafikler oluşturan JavaScript tabanlı bir diyagram ve grafik oluşturma aracıdır. Bir GUI aracında diyagramları manuel olarak çizmek yerine, basit bir metin tanımı yazarsınız ve Mermaid bunu SVG resmi olarak render eder. Knut Sveidqvist tarafından oluşturulmuş ve şimdi açık kaynak topluluğu tarafından sürdürülür. Mermaid, dokümantasyonda (GitHub, GitLab, Notion), README dosyalarında ve teknik dokümantasyonda yaygın olarak kullanılır. Flowchart, sequence diyagram, class diyagram, entity relationship diyagram, Gantt şeması ve birçok diğer diyagram türünü destekler. Sözdizimi kasıtlı olarak basit tutulmuştur, böylece teknik olmayan paydaşlar özel eğitim olmadan diyagram tanımlarını okuyabilir ve anlayabilir.

Nasıl Kullanılır

1. Editöre Mermaid sözdizimi yazın (satır numaraları ve parantez eşleştirme ile) veya bir başlangıç noktası yüklemek için şablon butonuna tıklayın
2. Önizleme, kısa bir gecikmeyle yazarken güncellenir
3. Editör ve önizleme arasındaki ayırıcıyı sürükleyerek panelleri yeniden boyutlandırın
4. Önizlemede tıklayıp sürükleyerek kaydırın, yakınlaştırmak için kaydırın
5. Açılır menüden bir diyagram teması seçin (Varsayılan, Koyu, Orman, Nötr)
6. SVG/PNG indirme butonları ile dışa aktarın veya diğer uygulamalara yapıştırmak için PNG Kopyala’yı kullanın
7. Diyagramınızı ve temanızı hash içinde kodlayan bir bağlantı oluşturmak için Paylaş’a tıklayın

Desteklenen Diyagram Türleri

Flowchart’lar

En yaygın Mermaid diyagramı. Yönü TD (yukarıdan aşağıya), LR (soldan sağa), RL veya BT ile tanımlayın. Düğümler şekiller için parantez kullanır: [dikdörtgen], (yuvarlak), {elmas}, ([stadyum]). Düğümleri oklarla birleştirin: -->, -.->, ==>.

Sequence Diyagramları

Katılımcılar arasındaki zaman içindeki etkileşimleri modelleyin. Oklar senkron (->>) ve asenkron (-->>) mesajları gösterir. Karmaşık akışları temsil etmek için activate/deactivate blokları, alt/else koşulları ve loop bölümleri ekleyin.

Entity Relationship Diyagramları

Varlıklar ve ilişkilerle veritabanı şemaları tanımlayın. Standart kardinalite gösterimini kullanın: ||--o{ (bire çok), }|--|{ (çoka çok). Varlık bloklarının içine doğrudan türleriyle birlikte nitelikler ekleyin.

Class Diyagramları

Kalıtım (<|--), kompozisyon (*--) ve toplama (o--) içeren UML sınıf diyagramları. Görünürlük değiştiricileriyle (+ public, - private, # protected) yöntemler ve özellikler tanımlayın.

State Diyagramları

Geçişlerle durum makineleri modelleyin. Başlangıç ve bitiş durumları için [*] kullanın. Karmaşık iş akışlarını belgelemek için koşullar, iç içe durumlar ve notlar ekleyin.

Gantt Şemaları, Pasta Grafikleri, Zihin Haritaları, Git Grafikleri

Mermaid ayrıca proje zaman çizelgeleri (Gantt), veri dağılımı (pasta), hiyerarşik beyin fırtınası (mindmap) ve dal görselleştirmesini (gitGraph) destekler. Çalışan örnekler görmek için editörün üzerindeki şablon butonlarına tıklayın.

İpuçları

Mermaid sözdizimi bazı bağlamlarda boşluğa duyarlıdır. Alt grafikler ve iç içe yapılar içinde girinti önemlidir. Bir diyagram render edilmezse, eksik kapatma parantezleri, eşleşmeyen tırnak işaretleri veya düğüm ID’si olarak kullanılan ayrılmış anahtar kelimeleri kontrol edin.

Dokümantasyon üzerinde mi çalışıyorsunuz? Tam Markdown’ınızı Markdown Önizleme ile önizleyin. Diyagramlarınızın içindeki kod parçacıklarını temizlemeniz mi gerekiyor? Kod Biçimlendirici kullanın.