Mermaid Diyagram Editörü: Kod Olarak Diyagram Oluşturma Aracı

Flowchart, sequence diyagram, ER diyagramı ve daha fazlasını canlı Mermaid önizlemesi ile oluşturun. SVG veya PNG olarak dışa aktarın.

Verileriniz tarayıcınızdan çıkmaz.

Şablonlar:

Editör yükleniyor...

Diyagram önizlemesi burada görünecek...

Dönüştürücüler ve Örnekler

Mermaid Sınıf Diyagramı: UML Sınıf Diyagramları Oluşturma

Mermaid sözdizimi ile UML sınıf diyagramları oluşturun. Sınıflar, arayüzler, kalıtım, kompozisyon ve görünürlük değiştiricileri. Canlı önizleme.

 Mermaid ER Diyagram Oluşturucu: Varlık İlişki Diyagramları

Mermaid sözdizimi ile ER diyagramları oluşturun. Varlıkları, özellikleri, türleri ve kardinalite notasyonu ile ilişkileri tanımlayın. Canlı önizleme.

 Mermaid Akış Şeması: Çevrimiçi Akış Diyagramları Oluşturma

Mermaid sözdizimi ile akış şemaları oluşturun. Düğümler, kenarlar, şekiller, alt grafikler ve yön kontrolü. SVG ve PNG dışa aktarma ile canlı önizleme.

 Mermaid Gantt Şeması: Proje Zaman Çizelgesi Diyagramları

Mermaid sözdizimi ile Gantt şemaları oluşturun. Görevleri, süreleri, bağımlılıkları, kilometre taşlarını ve bölümleri tanımlayın. Canlı önizleme.

 Mermaid Sıra Diyagramı Oluşturucu

Mermaid sözdizimi ile sıra diyagramları oluşturun. Katılımcılar, mesajlar, aktivasyon çubukları, döngüler ve alt blokları. Canlı önizleme.

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.

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.