Geliştirici / Diyagramlar
Mermaid Canlı Düzenleyici
Mermaid kodu yazarken diyagramı anında görün: akış şemaları, sıra diyagramları, sınıf diyagramları, Gantt grafikleri ve pasta grafiklerini SVG veya PNG olarak indirin.
Mermaid Canlı Düzenleyici: Düzenleyici, diyagramları metin olarak yazmak için GitHub, GitLab ve birçok dokümantasyon aracının kullandığı açık kaynaklı Mermaid kitaplığıyla çizer. Katı modda çalışır; bu nedenle başka birine ait kod betikleri çalıştıramaz veya tıklama işleyicileri ekleyemez. SVG indirmeleri her boyutta net kalır; PNG indirmeleri beyaz arka plan üzerinde ekrandaki boyutun iki katında çizilir. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.
- Kategori
- Geliştirici araçları
- Çalıştırma sayısı
- Tarayıcınızda
- Maliyet
- Ücretsiz · kayıt gerekmez
- Kullanılabilirlik
- Kullanıma hazır
Tamamen tarayıcınızda çalışır
Diyagramlar, katı modda Mermaid ile tarayıcınızda çizilir; bu nedenle diyagram kodu betikleri çalıştıramaz. Aynı kodu GitHub, GitLab veya Notion Markdown'da mermaid kod bloğuna yapıştırarak orada görüntüleyin.
Metin olarak diyagramlar
Bir grafik programında çizilen diyagram, değiştirmek için dosyayı yeniden açmak gerektiğinden zamanla güncelliğini yitirir. Mermaid diyagramı ise açıkladığı kodun veya belgenin yanında duran, aynı commit içinde değişen ve incelemede okunabilir bir diff olarak görünen birkaç satırlık metindir.
Her diyagram türüyle başlar: TD (yukarıdan aşağıya) veya LR (soldan sağa) gibi bir yöne sahip flowchart, sequenceDiagram, classDiagram, gantt veya pie. Düğümler etiketleriyle bir kez yazılır: A[Start]; ardından adlarıyla başvurulur: A --> B.
Dışa aktarma
SVG, her boyutta çizgileri ve metni keskin tutar; belgeler ve slaytlar için daha iyi seçimdir. PNG ise sohbet uygulamaları ve SVG kabul etmeyen yerler için uygundur. Dışa aktarılan SVG'yi elle düzenlemek için SVG düzenleyicide açın.
Nasıl kullanılır?
- Bir örnekle başlayın veya kendi Mermaid kodunuzu yapıştırın.
- Kodu düzenleyin; diyagram yazdıkça yeniden çizilir veya hata gösterilir.
- Diyagramı SVG ya da PNG olarak indirin veya kodu kopyalayın.
Gizlilik ve sınırlamalar
Diyagramlar tarayıcınızda çizilir ve kodunuz yalnızca bu tarayıcıda tutulur; böylece bir sonraki kullanımda da orada kalır.
İlgili araçlar
Sık sorulan sorular
Mermaid nedir?
Diyagramları metin olarak yazmanın bir yoludur. A --> B gibi bir satır, okla birleştirilmiş iki kutu çizer. Böylece diyagramlar Markdown dosyalarında ve kod incelemelerinde tutulabilir ve bir çizim aracı yerine metin düzenlenerek değiştirilebilir.
Diyagramı GitHub'da nasıl gösteririm?
Kodu, bir Markdown dosyasındaki, issue'daki veya pull request'teki mermaid olarak işaretlenmiş çitli kod bloğuna yerleştirin: önce üç ters tırnak, ardından mermaid sözcüğü, kod ve son olarak üç ters tırnak. GitHub, GitLab ve Notion diyagramı bulunduğu yerde çizer.
Diyagramım neden hata gösteriyor?
Mesaj, Mermaid'in okuyamadığı satırı belirtir. Yaygın nedenler arasında ilk satırda flowchart TD gibi bir diyagram türünün eksik olması, kapatılmamış köşeli parantezler veya tırnaklar ve etrafına tırnak eklenmesi gereken özel karakterler içeren metin bulunur.
Hangi diyagram türleri destekleniyor?
Düzenleyicinin yüklediği Mermaid sürümündeki tüm türler desteklenir. Bunlar arasında akış şemaları, sıra, sınıf, durum, varlık-ilişki, Gantt, pasta, zihin haritaları, zaman çizelgeleri ve git grafikleri bulunur. Örnekler en yaygın beş türü kapsar.
Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez