Osadzanie diagramów Mermaid
Utwórz diagram Mermaid i otrzymaj udostępnialny kod iframe, który możesz osadzić na dowolnej stronie internetowej. Darmowe, natychmiastowe, bez konta.
Osadzanie diagramów Mermaid
Utwórz diagram Mermaid i otrzymaj udostępnialny kod iframe, który możesz osadzić na dowolnej stronie internetowej. Darmowe, natychmiastowe, bez konta.
Twój kod Mermaid
Podgląd na żywo
Kod osadzania
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Dla programistów
Możesz programowo generować adresy URL osadzania bez użycia tego edytora. Kod diagramu jest kodowany jako base64 bezpieczny dla URL.
Format URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}Jak kodować
// 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"Obsługiwane motywy: default · dark · forest · neutral
Jak osadzić diagram Mermaid
Napisz kod diagramu Mermaid w edytorze powyżej
Skopiuj wygenerowany kod iframe jednym kliknięciem
Wklej go na dowolnej stronie, we wpisie na blogu lub na stronie dokumentacji
Gdzie używać
GitHub i GitLab
Osadzaj żywe diagramy na stronach wiki, w opisach issue lub dokumentacji projektu.
Strony dokumentacji
Dodawaj interaktywne diagramy do Confluence, Notion lub dowolnej platformy dokumentacji opartej na HTML.
Wpisy na blogu
Wzbogacaj artykuły techniczne o diagramy architektury, schematy blokowe i diagramy sekwencji.
Wewnętrzne wiki
Utrzymuj wizualne i aktualne bazy wiedzy zespołu dzięki osadzonym diagramom.
Często zadawane pytania
Czy funkcja osadzania jest darmowa?
Tak, całkowicie darmowa. Nie ma limitów użycia, konto nie jest wymagane, a wygenerowane adresy URL iframe działają bezterminowo.
Które przeglądarki obsługują osadzony diagram?
Przeglądarka osadzania działa we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge. Używa standardowego HTML5 i JavaScript.
Czy mogę dostosować rozmiar iframe?
Tak — wystarczy edytować atrybuty width i height w wygenerowanym kodzie iframe, aby dopasować go do swojego układu. Możesz także dodać CSS, aby uczynić go responsywnym.