Plak Mermaid, bekijk direct, exporteer SVG/PNG, upload bestanden, sleep om te pannen en deel via URL.
Snelle templates
Een Mermaid-bestand openenSleep het overal naartoe — .mmd · .mermaid · .md · .txt · Een .mmd-bestand openen
●Mermaid laden...Rg 1, Kol 1
Nog niets om te renderen
100%
Tip: in de preview kun je klikken-en-slepen (of aanraken) om te pannen. Laat bestanden op de preview vallen om ze te laden.
Wat is Mermaid?
Mermaid is een op JavaScript gebaseerde diagram- en chartingtool die Markdown-geïnspireerde tekstdefinities gebruikt om diagrammen dynamisch te maken en te wijzigen. Het is een open-sourceproject waarmee je diagrammen kunt genereren uit eenvoudige tekstbeschrijvingen.
In plaats van complexe tekentools te gebruiken, schrijf je code-achtige syntax die je diagram beschrijft, en Mermaid rendert het als een visueel diagram. Deze aanpak maakt diagrammen versiebeheerbaar, eenvoudig te updaten en perfect voor documentatie.
Mermaid integreert naadloos met documentatieplatforms, wiki's en markdown-bestanden, waardoor het een favoriet hulpmiddel is onder ontwikkelaars en technische schrijvers.
Waarom Mermaid gebruiken?
Versiebeheer: diagrammen zijn tekstbestanden en kunnen in Git naast je code worden bijgehouden
Snelle updates: pas een paar regels tekst aan in plaats van complete diagrammen te hertekenen
Consistentie: Mermaid regelt automatisch layout en styling en zorgt voor consistente diagrammen
Geen designtools nodig: geen Visio, Lucidchart of andere dure tools
Documentatie als code: houd diagrammen in dezelfde repository als je documentatie
Platformonafhankelijk: werkt in browsers en Node.js en integreert met veel platforms
Gratis en open source: geen licentiekosten, actieve community
Meerdere diagramtypes: ondersteunt flowcharts, sequentiediagrammen, klassendiagrammen en meer
Veelgestelde vragen over het gebruik van de Mermaid Viewer en het maken van diagrammen
Is deze Mermaid-editor echt gratis?
Ja, volledig gratis. Je kunt onbeperkt diagrammen maken, exporteren naar SVG/PNG, via URL delen en alle functies gebruiken zonder registratie of betaling. De tool wordt ondersteund door niet-opdringerige advertenties.
Moet ik iets installeren?
Nee, je hoeft niets te installeren. Dit is een webtool die volledig in je browser draait. Open de site en begin direct, op desktop, tablet of mobiel.
Hoe sla ik mijn diagrammen op?
Je kunt op meerdere manieren opslaan: 1) exporteren als SVG of PNG, 2) delen via URL (de diagramcode zit in de URL), 3) de Mermaid-code kopiëren naar je eigen bestanden, 4) .mmd- of .mermaid-bestanden uploaden/downloaden.
Kan ik de diagrammen in documentatie gebruiken?
Zeker. Exporteer als SVG (schaalbaar) of PNG en gebruik je diagrammen in documentatie, presentaties of websites. Je kunt Mermaid-code ook direct insluiten in platforms zoals GitHub, GitLab en Notion.
Wat is het verschil tussen SVG en PNG?
SVG is vectorgebaseerd, blijft scherp op elke grootte en is ideaal voor documentatie en webgebruik. PNG is raster, handig voor snel delen maar met kwaliteitsverlies bij schalen.
Waarom rendert mijn diagram niet?
Controleer je Mermaid-code op syntaxfouten. Veelvoorkomende oorzaken zijn niet-gesloten quotes, ontbrekende dubbele punten/puntkomma’s, foutieve node-ID’s of niet-ondersteunde syntax. Vereenvoudig het diagram om de fout te vinden.
Kan ik met anderen samenwerken?
Realtime samenwerking is niet ingebouwd, maar je kunt diagrammen eenvoudig via URL delen. Anderen kunnen openen, bewerken en hun versie terugdelen. Omdat Mermaid tekstgebaseerd is, werkt het ook goed met Git.
Werkt dit ook offline?
De eerste keer laden vereist internet. Daarna werkt basisbewerking vaak ook offline. Sommige functies, zoals exporteren, kunnen wel verbinding nodig hebben.
Hoe leer ik Mermaid-syntax?
Begin met onze uitgebreide Mermaid-gids met voorbeelden voor alle diagramtypen. Gebruik de templates voor een snelle start en vul aan met de officiële documentatie op mermaid.js.org.
Kan ik het uiterlijk aanpassen?
Ja. Diagrammen volgen het thema van de site: schakel tussen licht en donker met de knop Thema in de bovenbalk en het diagram wordt opnieuw gerenderd met het bijpassende Mermaid-thema. Voor geavanceerde styling gebruik je de %%{init:...}%%-directive om kleuren, lettertypes en andere visuele eigenschappen te definiëren.
Welke diagramtypes worden ondersteund?
Deze editor ondersteunt alle belangrijke Mermaid-diagramtypen: flowcharts, sequence diagrams, class diagrams, state diagrams, ER-diagrammen, Gantt charts, pie charts, Git graphs, user journeys en meer.
Zijn mijn diagramgegevens privé?
Je diagramcode wordt niet naar onze servers gestuurd. Alle rendering gebeurt in je browser. Bij delen via URL staat de code in de URL; we slaan je inhoud niet op en volgen die ook niet.
Waarom tekstgebaseerde diagrammen gebruiken?
Tekstgebaseerde diagrammen bieden duidelijke voordelen: versiebeheer (perfect voor Git), snelle updates, consistente stijl, doorzoekbaarheid, lichtgewicht formaat en programmeerbare generatie. Ook review in pull requests is eenvoudiger.
Kan ik Mermaid op mijn website insluiten?
Ja. Voeg de Mermaid JavaScript-library toe aan je website en plaats Mermaid-codeblokken. Veel platforms ondersteunen Mermaid al standaard, zoals GitHub, GitLab, Notion en Obsidian.
Wat is de aanbevolen maximale grootte?
Er is geen harde limiet, maar zeer grote diagrammen (meer dan ~100 nodes) kunnen trager renderen, afhankelijk van je apparaat. Voor complexe systemen zijn meerdere kleinere diagrammen meestal beter.