Mermaid Editor
Maak stroomdiagrammen, sequentiediagrammen, Gantt-charts en meer vanuit tekst met de Mermaid-editor. Render, zoom en exporteer SVG of PNG in je browser.
Wat is Mermaid?
Mermaid is een open-sourcediagramtaal waarmee je diagrammen maakt vanuit platte tekst, vergelijkbaar met Markdown. Je beschrijft knooppunten en verbindingen in eenvoudige syntax en de renderer tekent het diagram automatisch.
Welke diagramtypen worden ondersteund?
De editor bevat voorbeelden van stroomdiagrammen, sequentie-, klasse-, toestands- en ER-diagrammen, Gantt-charts, cirkeldiagrammen, mindmaps en tijdlijnen. Mermaid 11 ondersteunt nog veel meer varianten die je handmatig kunt intypen.
Hoe maak ik een diagram?
Kies een voorbeeld uit de dropdown of typ je eigen code in de linker editor. De voorbeeldweergave herlaadt ongeveer 350 ms na het typen; bij een syntaxfout toont een rood paneel de exacte fout terwijl het oude diagram behouden blijft.
Wordt mijn code ergens naartoe verzonden?
Nee. Alles wordt lokaal in je browser gerenderd met JavaScript. Je code verlaat nooit je apparaat.
Hoe exporteer ik mijn diagram?
Gebruik SVG downloaden voor een schaalbare vector of PNG downloaden voor een afbeelding met dubbele resolutie, optioneel met transparante achtergrond. Code kopiëren zet de Mermaid-bron op je klembord.
Waarom mislukt PNG-export soms?
Sommige Mermaid-functies worden via foreignObject gerenderd, dat browsers mogelijk weigeren te rasteren. Dan toont de PNG-export een fout, maar de SVG-download werkt altijd omdat rasterisatie niet nodig is.
Hoe werkt het zoomen?
De voorbeeldweergave ondersteunt 0,5x tot 2x. De knoppen + en - stappen 10%, Passend maakt het diagram passend in het voorbeeldgebied en 100% herstelt de originele grootte.
Kan ik Mermaid in mijn eigen documentatie gebruiken?
Ja. GitHub, GitLab en veel documentatietools renderen Mermaid-blokken native: omring je code met een mermaid-codeblok en het wordt automatisch getekend.
Ondersteunt de editor de donkere modus?
Ja. Het diagram volgt het platformthema: bij overschakelen naar de donkere modus wordt het automatisch opnieuw gerenderd met Mermaids donkere thema.
Tips voor leesbare diagrammen?
Houd knoppenlabels kort, kies een passende richting (TD verticaal of LR horizontaal), splits zeer grote grafen in subgrafen en gebruik de ingebouwde voorbeelden als sjabloon per type.
Hoe Mermaid Editor te gebruiken
Mermaid zet gewone tekst om in flowcharts, sequentiediagrammen, Gantt-charts en meer. Deze live-editor rendert je code opnieuw terwijl je typt, volledig in de browser — niets verlaat je apparaat.
- Kies een startpunt in het dropdown-menu “Voorbeeld” — negen kant-en-klare diagrammen dekken flowchart, sequentie, klasse, state, ER, Gantt, cirkel, mindmap en tijdlijn; bij keuze wordt de bijbehorende code in de editor geladen.
- Bewerk de Mermaid-code in het linkerpaneel; de Preview rechts rendert ongeveer een derde seconde nadat je stopt met typen opnieuw. Verschijnt er een syntaxfout in het rode paneel, dan blijft het laatste geldige diagram zichtbaar terwijl je de code herstelt.
- Zoom tussen 50% en 200% met de plus- en minknoppen, klik op “Passend maken” om het diagram in het voorvak te schalen, of op “100%” om terug te keren naar de werkelijke grootte.
- Vink “Transparante achtergrond” aan als je de PNG zonder witte ondergrond wilt en klik dan op “SVG downloaden” of “PNG downloaden” — de PNG wordt op dubbele resolutie geëxporteerd en blijft scherp bij inbedding.
- Klik op “Code kopiëren” om de Mermaid-broncode op het klembord te zetten voor documentatie, wiki's of versiebeheer.
Als een diagram niet wil renderen, zet dan de recent gewijzigde regels als commentaar om de fout te isoleren — de foutmelding noemt de betreffende regel, en de preview bewaart je laatste werkende versie tot de syntax weer klopt.
Gerelateerde tools
- Code naar Afbeelding Converteer codefragmenten naar deelbare afbeeldingen met syntaxismarkering, aangepaste thema's en vensterdecoraties. 100% privacy, alles in je browser.
- Markdown Voorbeeld Gratis online Markdown-editor met live voorbeeld. Schrijf, render en exporteer Markdown met volledige GFM-ondersteuning.
- SVG-viewer & Editor Bekijk, bewerk en optimaliseer SVG-bestanden online. Live preview, codebewerking en optimalisatietools.
- JSON boomviewer Visualiseer JSON-gegevens als een interactieve inklapbare boom. Zoek sleutels en waarden, volg JSONPath bij hoveren en verwerk grote bestanden met lazy loading. Drag & drop van .json-bestanden wordt ondersteund.
- Hash-controle MD5, SHA-1, SHA-256, SHA-512 bestand-hashes lokaal berekenen en verifiëren
- Chmod-calculator Gratis online chmod-calculator om Linux-bestandsrechten te visualiseren en berekenen met selectievakjes. Converteer direct tussen numerieke (755, 644) en symbolische notatie (rwxr-xr-x). Ondersteunt speciale rechten zoals setuid, setgid, sticky bit.
- ASCII-tabel Volledige ASCII-tekencoderingreferentie met decimale, hexadecimale, octale, binaire codes, HTML-entiteiten en karakterbeschrijvingen. Direct zoeken en filteren.
- Hex-viewer Bekijk bestandsinhoud in hex-dump formaat met zoekfunctie, offset-navigatie en virtueel scrollen