Mermaid diyagram düzenleyici

Bir tarafa Mermaid yazın, diyagram öbür tarafta siz yazdıkça çizilsin. Bir hata kendi satırında işaretlenir, son çalışan sürüm ise ekranda kalır. Her şey bu tarayıcı sekmesinde çalışır.

Nasıl çalışır

Mermaid, bir diyagramı metin olarak yazmanın bir yoludur. «A --> B» gibi birkaç satır; bir akış şemasına, bir sıralama diyagramına, bir sınıf ya da veritabanı diyagramına, bir Gantt şemasına veya bir zihin haritasına dönüşür. GitHub, GitLab, Notion ve çoğu dokümantasyon aracı onu yerinde çizer; README’lerdeki ve belgelerdeki diyagramların bu kadar sık Mermaid olmasının nedeni budur. Bu araçların vermediği şey, onu yazmak için iyi bir yerdir.

Bu düzenleyici diyagramı siz yazdıkça çizer. Bir satır hatalıysa o satırın altı çizilir ve mesaj Mermaid’in ne beklediğini söyler. Bu sırada son çalışan sürüm soluk hâlde ekranda kalır, böylece bir oku yazmanın yarısındayken resim her seferinde kaybolmaz. Büyük diyagramlar sürüklenip yakınlaştırılabilir.

Doğru göründüğünde SVG olarak ya da gideceği yere göre boyutlandırılmış PNG olarak kaydedin: bir belge, bir slayt ya da basılı bir sayfa. Doğrudan panoya da kopyalayabilirsiniz. Taslağınız ziyaretler arasında bu tarayıcıda saklanır, paylaşım bağlantısı ise diyagramı bağlantının kendi içinde taşır; bu yüzden onunla ilgili hiçbir şey bir sunucuda saklanmaz.

Nasıl kullanılır

1 Mermaid yazın ya da yapıştırın, bir .mmd veya Markdown dosyası açın ya da bir örnekle başlayın.
2 Önizlemeyi izleyin. Bir satırın altı çiziliyse düzeltin; mesaj Mermaid’in ne beklediğini söyler.
3 Bir görünüm seçin, ayrıntıları kontrol etmek için önizlemeyi sürükleyin ya da yakınlaştırın.
4 SVG ya da PNG indirin, görseli kopyalayın ya da diyagramı paylaşmak için bir bağlantı kopyalayın.

Bilmekte fayda var

Bir Markdown dosyası açmak onun ilk ```mermaid bloğunu açar, böylece bir README’deki diyagram tek başına düzenlenebilir.
Bir örnek seçmek düzenleyicideki içeriğin yerine geçer, Ctrl+Z ise diyagramınızı geri getirir.
SVG her boyutta keskin kalır ve web için kullanılacak olan odur. PNG ise slaytların, sohbet uygulamalarının ve kelime işlemcilerin en güvenilir biçimde kabul ettiği biçimdir.
Diyagramın içinde %%{init}%% satırıyla belirlenen bir tema, Görünüm ayarından önce gelir.
Hiçbir şey yüklenmez. Diyagram bu sekmede çizilir ve paylaşım bağlantıları onu adresin, tarayıcının bir sunucuya asla göndermediği kısmında tutar.

Tarayıcı desteği

Chrome 94 ve üzeri
Firefox 93 ve üzeri · 113 sürümünden itibaren tam hız
Safari 16.4 ve üzeri
Edge 94 ve üzeri

Bunlar aracın kullandığı her şeye sahip en eski sürümler. Aracın kendisinden hesaplanır, yani araç değiştikçe değişirler.

Sürüm numaraları 2026-09-04 tarihinde denetlendi.

Sık sorulan sorular

Diyagramım bir yere yükleniyor mu?

Hayır. Mermaid bu tarayıcı sekmesinin içinde çalışır ve taslağınız yalnızca bu tarayıcıda saklanır. Bunu tarayıcınızın geliştirici araçlarında, Ağ sekmesinde kontrol edebilirsiniz: yazmak hiçbir şey göndermez.

Paylaşım bağlantıları sunucu olmadan nasıl çalışıyor?

Diyagram sıkıştırılır ve bağlantının # işaretinden sonraki kısmına yazılır. Tarayıcılar bu kısmı web sitesine asla göndermez, bu yüzden bağlantı diyagramı herkesin cihazında açar ama sitenin kendisi onu hiç almaz. Uzun bir diyagram uzun bir bağlantı demektir.

Hangi diyagram türlerini destekliyor?

Mermaid 12’nin çizdiği her şeyi: akış şemaları, sıralama, sınıf, durum ve varlık ilişki diyagramları, Gantt şemaları, pasta grafikler, zihin haritaları, zaman çizelgeleri, kullanıcı yolculukları, Git grafikleri, dörtgen grafikleri, Sankey ve XY grafikleri, ayrıca daha yeni blok, paket, mimari, kanban, radar ve ağaç haritası diyagramları.

Bir satırın altı neden çizili?

Mermaid diyagramı anlamayı orada bıraktı. Yanındaki mesaj Mermaid’in kendi mesajıdır ve bulmayı beklediği şeyi söyler. Çoğu zaman asıl hata hemen öncesindedir, örneğin hiç kapatılmamış bir parantez ya da tırnak.

Ne boyutta bir PNG alacağım?

Ne için olduğuna bağlı. Belge için diyagramın çizildiği boyutun iki katı; bu, yüksek yoğunluklu ekranlarda keskin kalır. Slaytlar için bir 4K ekrana sığabilecek en büyük boyut. Baskı için 300 dpi’da A4’e sığabilecek en büyük boyut. Düğme, indirmeden önce tam piksel boyutunu gösterir.

README’mdeki bir diyagramı düzenleyebilir miyim?

Evet. Markdown dosyasını açın, içindeki ilk Mermaid bloğu düzenleyicide açılır. İşiniz bitince metni dosyaya geri kopyalayın.

Başkasının gönderdiği bir diyagramı açmak güvenli mi?

Diyagramlar Mermaid’in katı modunda çizilir. Kod çalıştırabilecek her şey kaldırılır ve diyagramın içindeki bir satır bu modu kapatamaz.

İlgili araçlar

Markdown’ı PDF’e dönüştürün Bir README’yi ya da notlarınızı düzgün dizilmiş bir PDF’e dönüştürün. Hiçbir şey yüklenmez. Bir görseli JPEG, PNG, WebP veya AVIF biçimine dönüştürün iPhone’un HEIC’i dahil. Hiçbir şey yüklenmez. Resimleri PDF’ye dönüştür Fotoğraflarınızı ve taramalarınızı tek PDF’de toplayın, her biri bir sayfa. Hiçbir şey yüklenmez.

Dosyalarınız cihazınızda işlenir ve yüklenmez, bunu tarayıcınızın geliştirici araçlarındaki Ağ sekmesinden doğrulayabilirsiniz.