O Mermaid Viewer

Mermaid Viewer to darmowy edytor diagramów Mermaid działający w przeglądarce. Po lewej piszesz lub wklejasz tekst Mermaid, a po prawej pojawia się wyrenderowany diagram — w trakcie pisania.

Renderowanie odbywa się w Twojej przeglądarce. Twój diagram nie jest wysyłany, przechowywany ani przetwarzany na serwerze — Mermaid działa jako JavaScript na Twoim własnym komputerze, a przeciągnięty plik jest czytany lokalnie. Właśnie dlatego sprawdza się to przy diagramach, których nie wkleiłbyś do narzędzia w chmurze: architektura wewnętrzna, systemy z nazwami klientów w etykietach, wszystko objęte NDA.

Jedno zastrzeżenie, które wolę powiedzieć wprost, niż ukryć: jeśli włączysz link do udostępniania, diagram zostaje zakodowany w samym adresie URL, a adres wysłany komuś innemu wędruje przez sieć. Cała reszta zostaje na Twoim komputerze.

Musiałem udokumentować architekturę oprogramowania i chciałem, żeby diagramy leżały w repozytorium obok kodu, a nie w osobnym programie do rysowania. Mermaid był do tego oczywistym formatem. Brakowało mi dobrego sposobu, żeby je oglądać.

Nie zacząłem od szukania narzędzia. Spojrzałem na problem, uznałem go za mały i oceniłem, że w krótkim czasie zbuduję coś porządnego. Więc to zrobiłem — pierwszy commit w tym projekcie jest ze stycznia 2026.

Zbudowałem to dla siebie i dla nikogo więcej. Chciałem otworzyć diagram, zobaczyć go wyrenderowanego, przybliżyć fragment, który mnie interesował, i wysłać komuś link. Inni znaleźli to później i to zmieniło, na co poświęcam czas — ale nie zmieniło tego, czym to narzędzie jest.

Renderowaniem zajmuje się Mermaid. Ta strona to wszystko dookoła: edytor na żywo z natychmiastowym podglądem, powiększanie i przesuwanie dla diagramów, które nie mieszczą się na jednym ekranie, trzy motywy, eksport do SVG i PNG, linki do udostępniania zakodowane w adresie URL, przeciąganie plików .mmd i .mermaid oraz interfejs w 18 językach.

Korzystanie jest darmowe i finansowane z nienachalnych reklam.

Pytania i zgłoszenia błędów: dominik@malsch.solutions. Dane operatora znajdziesz w nota prawna.