Visualiseer ideeën met Code
De eenvoudigste manier om diagrammen te maken. Typ gewoon Mermaid-syntaxis en zie je diagrammen direct tot leven komen.
Example
Mermaid editor 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 --> BKrachtige 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
Begin vandaag nog met het maken van diagrammen
Geen registratie vereist. Begin gewoon met typen en zie je ideeën tot leven komen.