Mermaid-diagrammen insluiten
Maak een Mermaid-diagram en krijg een deelbare iframe-code die je in elke website kunt insluiten. Gratis, direct, geen account nodig.
Mermaid-diagrammen insluiten
Maak een Mermaid-diagram en krijg een deelbare iframe-code die je in elke website kunt insluiten. Gratis, direct, geen account nodig.
Jouw Mermaid-code
Live voorbeeld
Insluitcode
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Example
Embedded Mermaid diagram example
A simple Mermaid flowchart showing how code becomes a live preview and exportable PNG.
Mermaid code
graph TD
A[User opens Mermaid Editor] --> B[Write Mermaid code]
B --> C{Preview looks right?}
C -- Yes --> D[Export PNG]
C -- No --> E[Edit diagram]
E --> BVoor ontwikkelaars
Je kunt insluit-URL's programmatisch genereren zonder deze editor te gebruiken. De diagramcode is gecodeerd als URL-veilige base64.
URL-formaat
https://mermaideditor.com/embed?code={encoded}&theme={theme}Hoe te coderen
// 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"Ondersteunde thema's: default · dark · forest · neutral
Hoe je een Mermaid-diagram insluit
Schrijf je Mermaid-diagramcode in de editor hierboven
Kopieer de gegenereerde iframe-code met één klik
Plak het in een website, blogpost of documentatiepagina
Waar te gebruiken
GitHub & GitLab
Sluit live diagrammen in wiki-pagina's, issue-beschrijvingen of projectdocumentatie in.
Documentatiesites
Voeg interactieve diagrammen toe aan Confluence, Notion of elk HTML-gebaseerd documentatieplatform.
Blogposts
Verrijk technische artikelen met architectuurdiagrammen, stroomdiagrammen en sequentiediagrammen.
Interne wiki's
Houd teamkennisbanken visueel en up-to-date met ingesloten diagrammen.
Veelgestelde vragen
Is de insluitfunctie gratis?
Ja, volledig gratis. Er zijn geen gebruikslimieten, geen account vereist, en de gegenereerde iframe-URL's werken voor onbepaalde tijd.
Welke browsers ondersteunen het ingesloten diagram?
De insluitviewer werkt in alle moderne browsers, waaronder Chrome, Firefox, Safari en Edge. Het gebruikt standaard HTML5 en JavaScript.
Kan ik de iframe-grootte aanpassen?
Ja — pas gewoon de width- en height-attributen in de gegenereerde iframe-code aan om het aan je lay-out aan te passen. Je kunt ook CSS toevoegen om het responsief te maken.