Over Mermaid Viewer

Mermaid Viewer is een gratis editor voor Mermaid-diagrammen die in de browser draait. Links schrijf of plak je Mermaid-tekst, rechts verschijnt het gerenderde diagram terwijl je typt.

Het renderen gebeurt in je browser. Je diagram wordt niet geüpload, niet opgeslagen en niet op een server verwerkt: Mermaid draait als JavaScript op je eigen machine, en een bestand dat je erin sleept wordt lokaal gelezen. Daarom werkt dit ook voor diagrammen die je niet in een gehoste tool zou plakken: interne architectuur, systemen met klantnamen in de labels, alles wat onder een geheimhoudingsverklaring valt.

Eén kanttekening die ik liever uitspreek dan verzwijg: als je de deel-link inschakelt, wordt het diagram in de URL zelf gecodeerd, en een URL die je naar iemand stuurt gaat over het netwerk. Al het andere blijft op je eigen machine.

Ik moest software-architectuur documenteren en wilde dat de diagrammen in de repository stonden, naast de code, in plaats van in een apart tekenprogramma. Mermaid was daarvoor het voor de hand liggende formaat. Wat ik niet had, was een goede manier om ze te bekijken.

Ik ben niet eerst een tool gaan zoeken. Ik keek naar het probleem, vond het klein, en schatte in dat ik in korte tijd iets netjes kon bouwen. Dus dat deed ik — de eerste commit van dit project is van januari 2026.

Ik heb het voor mezelf gebouwd, en voor niets daarbuiten. Ik wilde een diagram openen, het gerenderd zien, inzoomen op het stuk dat me interesseerde, en iemand een link sturen. Anderen vonden het later, en dat veranderde waar ik tijd in steek, maar niet wat de tool is.

Mermaid doet het renderen. Deze site is alles eromheen: een live editor met directe voorbeeldweergave, zoomen en slepen voor diagrammen die niet op één scherm passen, drie thema's, SVG- en PNG-export, deel-links gecodeerd in de URL, slepen-en-neerzetten van .mmd- en .mermaid-bestanden, en een interface in 18 talen.

Het gebruik is gratis en wordt betaald door niet-opdringerige advertenties.

Vragen en bugmeldingen naar dominik@malsch.solutions. De beheerdersgegevens staan in het colofon.