Mermaid Diyagramlarını Göm
Bir Mermaid diyagramı oluşturun ve herhangi bir web sitesine gömebileceğiniz paylaşılabilir bir iframe kodu alın. Ücretsiz, anında, hesap gerektirmez.
Mermaid Diyagramlarını Göm
Bir Mermaid diyagramı oluşturun ve herhangi bir web sitesine gömebileceğiniz paylaşılabilir bir iframe kodu alın. Ücretsiz, anında, hesap gerektirmez.
Mermaid Kodunuz
Canlı Önizleme
Gömme Kodu
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Geliştiriciler İçin
Bu editörü kullanmadan programatik olarak gömme URL'leri oluşturabilirsiniz. Diyagram kodu URL güvenli base64 olarak kodlanır.
URL Formatı
https://mermaideditor.com/embed?code={encoded}&theme={theme}Nasıl kodlanır
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"Desteklenen temalar: default · dark · forest · neutral
Bir Mermaid Diyagramı Nasıl Gömülür
Yukarıdaki editörde Mermaid diyagram kodunuzu yazın
Oluşturulan iframe kodunu tek tıkla kopyalayın
Herhangi bir web sitesine, blog yazısına veya dokümantasyon sayfasına yapıştırın
Nerede Kullanılır
GitHub ve GitLab
Wiki sayfalarına, issue açıklamalarına veya proje dokümantasyonuna canlı diyagramlar gömün.
Dokümantasyon Siteleri
Confluence, Notion veya herhangi bir HTML tabanlı dokümantasyon platformuna etkileşimli diyagramlar ekleyin.
Blog Yazıları
Teknik makaleleri mimari diyagramlar, akış şemaları ve sıra diyagramlarıyla zenginleştirin.
Dahili Wiki'ler
Gömülü diyagramlarla ekip bilgi tabanlarını görsel ve güncel tutun.
Sık sorulan sorular
Gömme özelliği ücretsiz mi?
Evet, tamamen ücretsiz. Kullanım sınırı yoktur, hesap gerekmez ve oluşturulan iframe URL'leri süresiz olarak çalışır.
Gömülü diyagramı hangi tarayıcılar destekler?
Gömme görüntüleyici Chrome, Firefox, Safari ve Edge dahil tüm modern tarayıcılarda çalışır. Standart HTML5 ve JavaScript kullanır.
iframe boyutunu özelleştirebilir miyim?
Evet — oluşturulan iframe kodundaki width ve height özniteliklerini düzeninize uyacak şekilde düzenlemeniz yeterli. Duyarlı hale getirmek için CSS de ekleyebilirsiniz.