Mermaid Editor

Mermaid editor online gratis, visueel en code op één plek

De meeste mermaid-editors geven je een tekstvak en een voorbeeld. Deze geeft je ook een canvas: klik om een blok toe te voegen, sleep een pijl, groepeer dingen in gebieden — en de mermaid-code schrijft zichzelf. Wissel naar het codetabblad en pas het handmatig aan; het canvas volgt.

  • Rendert terwijl je typt

    De echte mermaid-engine, opnieuw getekend een paar honderd milliseconden na je laatste toetsaanslag.

  • Code en canvas synchroon

    Bewerk beide kanten. De andere volgt automatisch — geen kopiëren en plakken tussen twee tools.

  • 14 knoopvormen

    Rechthoek, afgerond, pil, cirkel, ruit, database, zeshoek en de rest, met één klik.

  • Gratis, geen aanmelding

    Geen proefperiode of watermerk — de editor opent meteen. Log alleen in als je meer dan één diagram wilt.

Een canvas, geen tekstvak

Het visuele tabblad is een echte editor bovenop het gerenderde diagram: klik op een knoop om te selecteren, dubbelklik om ter plekke te hernoemen, sleep overal om te pannen.

  • Bouw met klikkenVoeg een blok toe, wijs een pijl naar een ander blok, label de pijl. Geen syntax om te onthouden voordat je begint.

  • Kies een vormVeertien mermaid-flowchartvormen — beslissingsruiten, databasecilinders, subroutines — uit één kiezer.

  • Kleur allesAcht voorinstellingen plus een kleurkiezer, toegepast op één knoop of op een heel gebied.

Mermaid-code die van jou blijft

Het codetabblad is gewoon mermaid — dezelfde syntax die GitHub, GitLab, Notion en Obsidian al renderen. Niets hier is een eigen formaat.

  • Schrijf het handmatigTyp mermaid rechtstreeks en kijk hoe het rendert. Zes kant-en-klare voorbeelden om mee te beginnen.

  • Gaat beide kanten opFlowcharts die je plakt worden teruggelezen op het canvas — knopen, vormen, kleuren, subgraphs en al.

  • Elk diagramtypeFlowchart, sequence, class, state, ER, gantt, git graph, pie — de preview rendert alles wat mermaid ondersteunt.

Grote diagrammen blijven leesbaar

Architectuurdiagrammen groeien snel voorbij één scherm. Pannen, zoomen en groeperen zijn daarvoor gebouwd, in plaats van ertegen te vechten.

  • Gebieden en nestenGroepeer blokken in subgraphs, nest een gebied binnen een ander, verplaats een hele deelboom met één gebaar.

  • Zoom van 2% tot 1600%Scroll om te pannen, ctrl-scroll om te zoomen, of centreer opnieuw met één knop.

  • Automatisch opgeslagenJe diagram wordt tijdens het bewerken automatisch opgeslagen in je browser. Log je in, dan wordt het in je account opgeslagen en volgt het je naar elk apparaat.

Exporteer en ga verder

Niets zit vast. Neem de afbeelding, neem de broncode, of neem een Markdown-blok klaar om in een document te plakken.

  • Geen betaalmuurElke functie, inclusief export, is gratis. Er is geen betaald abonnement om naar te upgraden.

  • Wordt in je browser gerenderdHet renderen gebeurt in je browser; zonder account verlaat het diagram die nooit, en met een account volgt het opgeslagen document je naar elk apparaat.

  • SVG, PNG, .mmd, .mdKopieer de SVG-markup, download een 2x PNG, sla de mermaid-broncode op, of pak een Markdown-blok met code.

Hoe het zich verhoudt tot de gebruikelijke opties

Diagram-als-code-tools laten je alles handmatig schrijven. Drag-and-drop-tools geven je een afbeelding die je niet kunt diffen. Deze weigert een kant te kiezen.

Aan de slag gaan

IQ Mermaid: Dubbelklik op het canvas en er verschijnt een knoop. De syntax leer je later, of nooit.

Gebruikelijke tool: Lees eerst de syntaxreferentie, of accepteer een tekentool zonder tekstrepresentatie.

Het exportformaat

IQ Mermaid: Gewone mermaid — dezelfde tekst die GitHub, GitLab en Notion native renderen.

Gebruikelijke tool: Een eigen bestand dat alleen opent in de tool die het gemaakt heeft.

Later bewerken

IQ Mermaid: Wijzig de code of verplaats de blokken. Beide richtingen werken op hetzelfde diagram.

Gebruikelijke tool: Slechts één richting: code-first tools hebben geen canvas, canvas-first tools hebben geen broncode.

Prijs

IQ Mermaid: Gratis — zelfs geen e-mail.

Gebruikelijke tool: Gratis laag beperkt tot een paar diagrammen, met export of samenwerking achter een abonnement.

Waar de data staat

IQ Mermaid: In je browser, of in je account als je wilt dat het je naar elk apparaat volgt.

Gebruikelijke tool: Een account op iemands server, met je diagrammen eraan gekoppeld.

Vragen over de mermaid editor

Om te beginnen hoef je alleen de pagina te openen.

Wat is mermaid?

Mermaid is een tekstsyntax voor diagrammen: je beschrijft knopen en pijlen in een paar regels, en een renderer tekent de afbeelding. GitHub, GitLab, Notion en Obsidian renderen het binnen Markdown, zodat een mermaid-blok leesbaar blijft in een pull request of een wikipagina.

Is deze mermaid editor echt gratis?

Ja. Elke functie, inclusief export naar SVG en PNG, is gratis en je kunt de editor gebruiken zonder iets aan te maken. Een optioneel gratis account voegt meer opgeslagen diagrammen en synchronisatie tussen apparaten toe — er is geen betaald abonnement en niets wordt achtergehouden.

Moet ik mermaid-syntax kennen?

Nee. Begin op het visuele tabblad: dubbelklik op het canvas om een blok toe te voegen, selecteer het en teken een pijl naar een ander blok. De mermaid-code wordt voor je gegenereerd en je kunt hem lezen wanneer je de syntax wilt leren.

Welke diagramtypes worden ondersteund?

Het codetabblad rendert alles wat mermaid ondersteunt — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie en meer. Het visuele canvas bewerkt specifiek flowcharts, wat de meeste diagrammen zijn.

Kan ik exporteren naar PNG of SVG?

Ja. Kopieer de SVG-markup naar het klembord, download het SVG-bestand, of download een PNG gerenderd op 2x voor presentaties en documenten. Je kunt ook de mermaid-broncode opslaan als .mmd of als een Markdown-blok met code.

Waar wordt mijn diagram opgeslagen?

Zonder account wordt je ene diagram in de browser opgeslagen, dus het staat er nog als je op hetzelfde apparaat terugkomt. Log je in, dan wordt het in je account opgeslagen en kan het je naar een ander apparaat volgen. Exporteer de bron als je een eigen kopie wilt.

Kan ik een bestaand mermaid-diagram plakken?

Ja. Plak het in het codetabblad; een flowchart wordt teruggelezen op het visuele canvas met knopen, vormen, kleuren en subgraphs intact. Andere diagramtypes renderen in de preview maar blijven alleen-code.

Werkt het offline?

Rendering gebeurt volledig in je browser, dus zodra de pagina is geladen werkt de editor ook zonder verbinding.

Open de editor. Gratis — geen aanmelding.

Een leeg canvas, een codetabblad en elke exportoptie — gratis, in je browser, nu meteen.