Mermaid Editör: Markdown'da Canlı Diyagram Çizin

Mermaid ile birkaç satır metin bir diyagrama dönüşür. Markdown Preview Editor bir Mermaid editör olarak da çalışır: diyagram kodunu bir Markdown belgesine yazarsınız, önizleme de siz yazarken onu çizer. Bağımsız bir diyagram aracından farklı olarak diyagram, çevresindeki metinle birlikte durur; böylece bir tasarım belgesi, bir README ya da bir ders planı tek dosyada kalır.

Mermaid diyagramı nedir?

Mermaid diyagramı, düz metinle tarif edilen bir şemadır. Kutuları ve okları sürüklemezsiniz — A --> B gibi satırlar yazarsınız, Mermaid de resmi sizin için yerleştirir. Akış şemaları, sıralama diyagramları, Gantt şemaları, durum ve sınıf diyagramları, pasta grafikleri, zihin haritaları ve daha fazlasını destekler.

Metin olduğu için diyagramı değiştirmek kolaydır; sürüm kontrolünde saklanır ve diff’lerde görünür. GitHub, GitLab, Obsidian ve birçok belgeleme aracı Mermaid’i işler; aynı kod hepsinde çalışır.

Diyagram nasıl çizilir?

1. Editörü açın. Online editöre gidin.
2. Bir Mermaid bloğu ekleyin. Üç ters tırnak ve ardından mermaid yazın ya da şablon eklemek için Gelişmiş düzenleyici araç çubuğu satırındaki Mermaid diyagramı düğmesini kullanın.
3. Diyagramı yazın. Sağdaki önizleme siz yazarken diyagramı yeniden çizer; eksik bir ok ya da parantez hemen fark edilir.
4. Kaydedin veya paylaşın. Belgeyi .md olarak kaydedin, HTML’e aktarın ya da PDF olarak yazdırın — diyagramlar dahildir.

İşte ilk akış şeması. LR diyagramın soldan sağa, TD ise yukarıdan aşağıya çizileceğini belirtir; köşeli parantez bir kutu, süslü parantez bir karar noktası oluşturur:

markdown```mermaid
flowchart LR
  A[Fikir] --> B{Değer mi?}
  B -- evet --> C[Yap]
  B -- hayır --> D[Beklet]
```

Kullanabileceğiniz diyagram türleri

Her türün tam sözdizimi, kopyalamaya hazır örneklerle birlikte Markdown’da Mermaid diyagramları rehberimizde.

Neden bu editör?

• Canlı önizleme. Diyagram siz yazarken güncellenir; sözdizimi hataları hemen görünür.
• Metin ve diyagram bir arada. Açıklamayı, formülleri ve akış şemasını tek bir Markdown dosyasında yazın.
• Gizli. Diyagramlar tarayıcınızda çizilir. Kodunuz bir sunucuya gönderilmez.
• Ücretsiz ve açık kaynak. Hesap yok, diyagram sayısında sınır yok.

Sınırlamalar

• Tek bir diyagram için ayrı PNG veya SVG indirme yoktur. Diyagramlar belgenin parçası olarak dışa aktarılır — HTML çıktısında ve PDF’te. Bağımsız bir görsel için resmî Mermaid araçları dışa aktarma sunar.
• Özel temalar ve düğüm bazında stiller sınırlıdır: diyagramlar açık veya koyu temaya uyan sade, varsayılan bir görünüm kullanır.
• Diyagramlar kod olarak yazılır; sürükle-bırak ile görsel düzenleme yoktur.

Diyagramlar içeren mevcut bir Markdown dosyasını mı görüntülemek istiyorsunuz? Markdown viewer’ı kullanın ya da Markdown editör ana sayfasına dönün.