Mermaid-Diagramme einbetten
Erstellen Sie ein Mermaid-Diagramm und erhalten Sie einen teilbaren iframe-Code, den Sie in jede Website einbetten können. Kostenlos, sofort, kein Konto erforderlich.
Mermaid-Diagramme einbetten
Erstellen Sie ein Mermaid-Diagramm und erhalten Sie einen teilbaren iframe-Code, den Sie in jede Website einbetten können. Kostenlos, sofort, kein Konto erforderlich.
Ihr Mermaid-Code
Live-Vorschau
Einbettungscode
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Für Entwickler
Sie können Einbettungs-URLs programmatisch generieren, ohne diesen Editor zu verwenden. Der Diagrammcode wird als URL-sicheres base64 kodiert.
URL-Format
https://mermaideditor.com/embed?code={encoded}&theme={theme}So kodieren Sie
// 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"Unterstützte Themes: default · dark · forest · neutral
So betten Sie ein Mermaid-Diagramm ein
Schreiben Sie Ihren Mermaid-Diagrammcode im Editor oben
Kopieren Sie den generierten iframe-Code mit einem Klick
Fügen Sie ihn in eine beliebige Website, einen Blogbeitrag oder eine Dokumentationsseite ein
Wo Sie es verwenden können
GitHub & GitLab
Betten Sie Live-Diagramme in Wiki-Seiten, Issue-Beschreibungen oder Projektdokumentationen ein.
Dokumentationsseiten
Fügen Sie interaktive Diagramme zu Confluence, Notion oder jeder HTML-basierten Dokumentationsplattform hinzu.
Blog-Beiträge
Bereichern Sie technische Artikel mit Architekturdiagrammen, Flussdiagrammen und Sequenzdiagrammen.
Interne Wikis
Halten Sie Team-Wissensdatenbanken mit eingebetteten Diagrammen visuell und aktuell.
Häufig gestellte Fragen
Ist die Einbettungsfunktion kostenlos?
Ja, vollständig kostenlos. Es gibt keine Nutzungsbeschränkungen, kein Konto erforderlich, und die generierten iframe-URLs funktionieren unbegrenzt.
Welche Browser unterstützen das eingebettete Diagramm?
Der Einbettungs-Viewer funktioniert in allen modernen Browsern einschließlich Chrome, Firefox, Safari und Edge. Er verwendet Standard-HTML5 und JavaScript.
Kann ich die Größe des iframes anpassen?
Ja — bearbeiten Sie einfach die Attribute width und height im generierten iframe-Code, um ihn an Ihr Layout anzupassen. Sie können auch CSS hinzufügen, um ihn responsiv zu machen.