Visualiseer ideeën met Code
De eenvoudigste manier om diagrammen te maken. Typ gewoon Mermaid-syntaxis en zie je diagrammen direct tot leven komen.
Krachtige functies voor moderne diagramcreatie
De eenvoudigste manier om diagrammen te maken. Typ gewoon Mermaid-syntaxis en zie je diagrammen direct tot leven komen.
Live preview
De editor rendert je diagrammen in realtime terwijl je typt, zodat je direct feedback krijgt op je syntaxis.
Meerdere formaten
Ondersteuning voor stroomdiagrammen, sequentiediagrammen, Gantt-diagrammen, klassediagrammen, toestandsdiagrammen en meer.
Code-first
Houd je diagrammen versiebeheerbaar en eenvoudig te bewerken. Geen gedoe meer met het slepen en neerzetten van pixelonnauwkeurige vakjes.
Geen registratie vereist
Begin direct met het maken van diagrammen in je browser. Geen accountregistratie, geen downloads, geen installaties nodig.
Versiebeheervriendelijk
Sla je diagrammen op als platte tekst in Git. Volg wijzigingen, werk samen met teams en onderhoud diagramgeschiedenis moeiteloos.
Eenvoudig exporteren
Kopieer je Mermaid-code voor gebruik in Markdown-bestanden, GitHub README's, documentatiesites of elk platform dat Mermaid.js ondersteunt.
Hoe gebruik je de Mermaid Editor
Schrijf je code
Voer Mermaid-syntaxis in de code-editor aan de linkerkant in. Begin met een diagramtype zoals 'graph TD' voor stroomdiagrammen.
Direct preview
Bekijk je diagram in realtime in het rechterpaneel. Wijzigingen worden automatisch gerenderd terwijl je typt.
Gebruik sjablonen
Klik op de knoppen Stroomdiagram, Sequentie of Gantt om voorbeeldcode te laden en de syntaxis snel te leren.
Alle diagramtypen ondersteund
Maak elk type diagram met eenvoudige tekstsyntaxis
Stroomdiagrammen
Visualiseer processen, workflows en algoritmen met knooppunten en gerichte pijlen. Perfect voor bedrijfsprocessen en beslisbomen.
Sequentiediagrammen
Documenteer interacties tussen verschillende actoren of systemen in de tijd. Ideaal voor API-documentatie en systeemontwerp.
Klassediagrammen
Modelleer objectgeoriënteerde systemen met klassen, attributen en relaties. Essentieel voor het plannen van softwarearchitectuur.
Toestandsdiagrammen
Geef toestandsovergangen in systemen of applicaties weer. Uitstekend voor het modelleren van levenscyclustoestanden en workflows.
Gantt-diagrammen
Plan en volg projecttijdlijnen met taken en afhankelijkheden. Perfect voor projectmanagement en planning.
ER-diagrammen
Ontwerp databaseschema's met entiteiten en relaties. Ideaal voor databasemodellering en documentatie.
Gebruikersreis
Breng gebruikerservaringen en interacties over contactpunten in kaart. Uitstekend voor UX-ontwerp en klantreis-mapping.
Git-grafieken
Visualiseer Git-branchingstrategieën en commitgeschiedenissen. Handig voor het uitleggen van versiebeheerworkflows.
Perfect voor elke toepassing
Of je nu ontwikkelaar, ontwerper of projectmanager bent, onze Mermaid-editor heeft alles wat je nodig hebt
Softwareontwikkelaars
Documenteer codearchitectuur, ontwerppatronen en systeemstromen. Integreer diagrammen direct in je GitHub README of technische documentatie.
Projectmanagers
Maak Gantt-diagrammen voor projectplanning, stroomdiagrammen voor procesdocumentatie en tijdlijnvisualisaties voor presentaties aan belanghebbenden.
Docenten & studenten
Leg complexe concepten uit met duidelijke visuele diagrammen. Maak lesmateriaal, studiegidsen en cursusdocumentatie.
Technisch schrijvers
Verrijk documentatie met professionele diagrammen. Houd visuele assets gesynchroniseerd met code door gebruik van versiebeheertekstbestanden.
Waarom kiezen voor onze Mermaid Editor?
De beste online tool voor het maken van diagrammen vanuit code
100% gratis voor altijd
Geen premiumlagen, geen functiebeperkingen, geen tijdslimieten. Alle functies zijn volledig gratis met onbeperkte diagramcreatie.
Privacygericht
Je diagrammen worden lokaal in je browser verwerkt. We slaan je diagramcode nooit op en hebben er geen toegang toe op onze servers.
Snel & responsief
Geoptimaliseerd voor prestaties met directe rendering. Werkt soepel, zelfs met complexe diagrammen met honderden elementen.
Altijd up-to-date
Gebouwd op de nieuwste Mermaid.js-bibliotheek met ondersteuning voor alle moderne diagramtypen en syntaxisfuncties.
Voordelen van tekstgebaseerde diagrammen
Ontdek waarom ontwikkelaars en teams dol zijn op code-first diagrammen
Onderhoudbare documentatie
In tegenstelling tot afbeeldingsgebaseerde diagrammen die verouderd raken, kunnen tekstdiagrammen net zo eenvoudig worden bijgewerkt als het wijzigen van een regel code.
Naadloze samenwerking
Bekijk diagramwijzigingen in pull requests, volg aanpassingen in Git-geschiedenis en los conflicten op net als bij code.
Geautomatiseerde integratie
Genereer diagrammen automatisch vanuit CI/CD-pipelines, integreer met documentatiegeneratoren en houd visuals synchroon met code.
Consistente styling
Mermaid past automatisch consistente styling toe. Geen tijd meer verspillen aan het uitlijnen van vakjes of handmatig kleuren kiezen.
Veelgestelde vragen
Mermaid is een op JavaScript gebaseerd diagram- en grafiekhulpmiddel dat door Markdown geïnspireerde tekstdefinities rendert om dynamisch diagrammen te maken en te wijzigen. Hiermee kun je stroomdiagrammen, sequentiediagrammen, klassediagrammen, toestandsdiagrammen en meer maken met eenvoudige tekstsyntaxis.
Ja, deze online Mermaid-editor is volledig gratis te gebruiken. Er zijn geen verborgen kosten of premiumfuncties. Je kunt onbeperkt diagrammen maken en alle functies zonder beperkingen gebruiken.
Je kunt de Mermaid-code direct uit de editor kopiëren om deze in je eigen bestanden op te slaan. De code kan worden geplakt in elk Markdown-bestand, GitHub README of documentatie die Mermaid-rendering ondersteunt.
De editor ondersteunt alle Mermaid.js-diagramtypen, waaronder stroomdiagrammen, sequentiediagrammen, Gantt-diagrammen, klassediagrammen, toestandsdiagrammen, entiteit-relatiediagrammen, gebruikersreiskaarten, Git-grafieken en cirkeldiagrammen.
Absoluut! Diagrammen die met deze editor zijn gemaakt, kunnen voor elk doel worden gebruikt, inclusief commerciële projecten, presentaties, documentatie en lesmateriaal.
Geen installatie vereist! Dit is een browsergebaseerde online Mermaid-editor. Bezoek gewoon de website en begin direct met het maken van diagrammen. Het werkt op alle moderne browsers, waaronder Chrome, Firefox, Safari en Edge.
In tegenstelling tot traditionele sleep-en-neerzetdiagramtools gebruikt onze Mermaid-editor een code-first benadering. Je schrijft tekstgebaseerde syntaxis om diagrammen te definiëren, waardoor ze versiebeheerbaar, eenvoudig bij te werken en perfect zijn om naast je code in documentatie op te nemen. Deze aanpak is sneller voor ontwikkelaars en houdt diagrammen consistent met je codebase.
Het primaire exportformaat is de Mermaid-code zelf, die als afbeelding kan worden gerenderd door platforms die Mermaid.js ondersteunen, zoals GitHub, GitLab, Notion en veel documentatiegeneratoren. Je kunt ook browserschermafdruktools gebruiken om het gerenderde diagram vast te leggen.
Het eerste laden vereist een internetverbinding, maar zodra de pagina is geladen, gebeurt de diagramrendering volledig in je browser. Je diagramgegevens verlaten nooit je computer, wat privacy en veiligheid garandeert.
Onze editor bevat voorbeeldsjablonen voor veelvoorkomende diagramtypen zoals stroomdiagrammen, sequentiediagrammen en Gantt-diagrammen. Klik op de sjabloonknoppen om voorbeelden te laden en de syntaxis te leren. De officiële Mermaid.js-documentatie biedt ook uitgebreide handleidingen voor alle diagramtypen en geavanceerde functies.
Begin vandaag nog met het maken van diagrammen
Geen registratie vereist. Begin gewoon met typen en zie je ideeën tot leven komen.