Bir mermaid diyagramını PNG, SVG veya Markdown'a aktarma
Bir diyagram yalnızca görülebildiği yerde işe yarar. Mermaid size dört çıkış yolu sunar — bir resim, bir vektör, kaynak veya kendini render eden bir Markdown bloğu — ve doğrusu tamamen diyagramın nereye gideceğine bağlıdır. Bu kısa versiyon, artı her birinde nelerin bozulduğu.
Önce formatı seçin
| Hedef | Kullanım | Neden |
|---|---|---|
| GitHub, GitLab, Notion, Obsidian | Bir Markdown bloğu | Doğal olarak render edilir ve fark alınabilir kalır — senkronize tutulacak bir dosya yoktur. |
| Sunumlar, bir şartname, bir sohbet mesajı | PNG | Her yere yapıştırılır, bir render motoru gerektirmez, her yerde aynı görünür. |
| Bir web sitesi, basılı bir belge | SVG | Vektör — her boyutta keskin kalır ve metin seçilebilir kalır. |
| Başka bir editör, bir depo | .mmd kaynağı | Sonradan düzenlenebilir. Bir resim çıkmaz sokaktır. |
Hedef mermaid'i render ediyorsa, hiç dışa aktarmayın. Metin olarak commit edilen bir diyagram satır satır incelenebilir; aynı diyagram bir PNG olarak commit edildiğinde yalnızca değiştirilebilir.
Bu editörden dışa aktarma
Kod sekmesini açın — dışa aktarma düğmeleri araç çubuğunda yer alır ve her biri o anda render edilmiş olan şey üzerinde çalışır.
- SVG'yi kopyala —
<svg>işaretlemesini panoya koyar, doğrudan bir HTML dosyasına veya bir tasarım aracına yapıştırmaya hazır. - SVG indir —
diagram.svgolarak kaydeder. - PNG indir —
diagram.pngolarak kaydeder, yüksek yoğunluklu bir ekranda keskin kalması ve beyaz bir slaytta asla saydam bir leke olarak bitmemesi için beyaz arka planla 2 kat çözünürlükte render edilir. - .mmd indir — mermaid kaynağını düz metin dosyası olarak kaydeder.
- .md indir (Notion) — kaynağı çevrelenmiş bir ```mermaid bloğuna sararak kaydeder, ki Notion, GitHub ve Obsidian yapıştırmada bunu render eder.
Bir slayt sunumu için PNG'yi alın. Yeniden boyutlandırılacak herhangi bir şey için — bir belge başlığı, bir poster, baskı — SVG'yi alın; dışa aktarma boyutunun ötesine büyütülen bir PNG hemen bulanıklaşır.
Bunun yerine metin olarak tutun
Çevrelenmiş blok, yerinde düzenlenebilir kalan tek dışa aktarmadır. Üç ters tırnak, mermaid kelimesi, diyagramınız, üç ters tırnak:
```mermaid
flowchart LR
A[Write] --> B[Review]
B --> C[Merge]
```- GitHub — README dosyalarında, issue'larda, pull request'lerde ve yorumlarda render edilir.
- GitLab — wiki'de, issue'larda ve merge request'lerde render edilir.
- Notion — bir kod bloğuna yapıştırın ve dili Mermaid olarak ayarlayın.
- Obsidian — önizlemede ve yayınlanan notlarda render edilir.
- Docusaurus / MkDocs Material / VitePress — mermaid blokları derlenmiş dokümanlarda render edilir.
Ters giden şeyler
PNG bulanık
Bir PNG sabit çözünürlüklüdür: belirli bir piksel boyutunda dışa aktarılır ve bunun ötesine ölçeklendirme aradeğerleme yapar. Bu editör bu yüzden 2 kat çözünürlükte dışa aktarır. Yine de yetmiyorsa, SVG'yi dışa aktarıp ihtiyacınız olan boyutta dönüştürün — ya da doğrudan SVG'yi kullanın.
SVG'nin arka planı yok
SVG dışa aktarmaları tasarım gereği saydamdır, bu yüzden koyu düğüm metni koyu bir slaytta kaybolur. Ya SVG'yi açık renkli bir kart üzerine koyun ya da beyaz üzerine dışa aktarılan PNG'yi alın.
Yazı tipleri başka bir yerde farklı görünüyor
Bir SVG, yazı tiplerini gömmek yerine yazı tipi ailelerine referans verir, bu yüzden o yazı tipine sahip olmayan bir makine başka bir yazı tipi kullanır ve etiket kutuları hizasını kaybeder. Görüntüleyenin yazı tiplerini kontrol edemediğinizde PNG'yi kullanın.
Diyagram kesiliyor
Dışa aktarma o anda render edilmiş olanı okur, bu yüzden büyük bir diyagramı dışa aktarmadan önce görünümü yeniden ortalayın. Bir düğüm etiketi çok büyükse, <br> ile bölün — mermaid etiketleri kendiliğinden satır kaydırmaz.
İki tıkla dışa aktarın
Editörü açın, diyagramınızı yapıştırın veya çizin ve SVG'yi, PNG'yi veya kaynağı alın. Hiçbir şey bir hesabın arkasında değil.
Sıkça sorulanlar
Mermaid'i PNG'ye nasıl dönüştürürüm?
Diyagramı render edin, sonra PNG İndir'i kullanın. Editör, render edilen SVG'yi 2 kat ölçekte beyaz arka planla bir tuval üzerine çizer ve sonucu kaydeder — sunucuya gidiş dönüş yoktur, bu yüzden diyagram tarayıcınızdan asla çıkmaz.
Saydam bir PNG dışa aktarabilir miyim?
PNG düğmesinden değil — kasıtlı olarak beyaz doldurur, çünkü saydam bir arka plan üzerindeki koyu diyagram metni bir PNG'nin yapıştırıldığı çoğu yerde okunamaz. Bunun yerine SVG'yi dışa aktarın; o saydamdır.
Bir boyut sınırı var mı?
Sabit bir sınır yok. Dışa aktarma tarayıcınızda gerçekleşir, bu yüzden pratik sınır tarayıcınızın render edebileceği şeydir — ki bu bir diyagramın bir insan için hâlâ okunabilir olduğu noktanın çok ötesindedir.
Dışa aktardıktan sonra diyagramı düzenlenebilir nasıl tutarım?
Kaynağı saklayın. .mmd dosyasını veya Markdown bloğunu görselle birlikte indirin; bir PNG veya SVG mermaid'e geri dönüştürülemez, ama kaynak doğrudan editöre geri yapıştırılır.