Wklej Mermaid. Zobacz diagram. Natychmiast.

Wklej Mermaid, natychmiast podejrzyj, eksportuj SVG/PNG, przesyłaj pliki, przeciągnij aby przesuwać i udostępnij URL.

Szybkie szablony
Otwórz plik MermaidUpuść w dowolnym miejscu — .mmd · .mermaid · .md · .txt · Jak otworzyć plik .mmd
Ładowanie Mermaid...Wrs 1, Kol 1
Wskazówka: w podglądzie kliknij i przeciągnij (lub dotknij i przeciągnij), aby przesuwać. Upuść pliki na podgląd, aby je wczytać.

Czym jest Mermaid?

Mermaid to narzędzie do tworzenia diagramów i wykresów oparte na JavaScript, które wykorzystuje tekstowe definicje inspirowane Markdownem do dynamicznego tworzenia i modyfikowania diagramów. To projekt open source pozwalający generować diagramy z prostych opisów tekstowych.

Zamiast korzystać ze złożonych narzędzi do rysowania, zapisujesz składnię przypominającą kod, która opisuje diagram, a Mermaid renderuje go jako diagram wizualny. To podejście sprawia, że diagramy można wersjonować, łatwo aktualizować i idealnie nadają się do dokumentacji.

Mermaid bezproblemowo integruje się z platformami dokumentacji, wiki oraz plikami Markdown, dlatego jest ulubionym narzędziem wśród programistów i autorów technicznych.

Dlaczego warto używać Mermaid?

  • Kontrola wersji: diagramy to pliki tekstowe, więc można je śledzić w Git razem z kodem
  • Szybkie aktualizacje: zmień kilka linii tekstu zamiast przerysowywać całe diagramy
  • Spójność: Mermaid automatycznie zajmuje się układem i stylem, zapewniając spójne diagramy
  • Brak narzędzi graficznych: nie potrzebujesz Visio, Lucidchart ani innych drogich narzędzi
  • Dokumentacja jako kod: trzymaj diagramy w tym samym repozytorium co dokumentację
  • Wieloplatformowość: działa w przeglądarkach i Node.js oraz integruje się z wieloma platformami
  • Darmowe i open source: brak kosztów licencji, aktywna społeczność
  • Wiele typów diagramów: obsługuje schematy blokowe, diagramy sekwencji, klas i inne

Schemat Blokowy

Twórz profesjonalne schematy blokowe używając prostej składni tekstowej. Natychmiastowy podgląd, eksport do SVG/PNG i udostępnianie przez URL - wszystko za darmo.

Diagram Sekwencji

Projektuj diagramy sekwencji UML do wizualizacji interakcji między komponentami systemu. Idealny do dokumentacji API i projektowania systemów.

Wykres Gantta

Planuj i wizualizuj osie czasu projektu za pomocą wykresów Gantta. Śledź zadania, zależności i kamienie milowe używając prostej składni tekstowej.

Diagram Klas

Projektuj systemy obiektowe za pomocą diagramów klas UML. Definiuj klasy, atrybuty, metody i relacje używając prostego tekstu.

Diagram Stanów

Wizualizuj automaty skończone i zachowanie systemu za pomocą diagramów stanów. Modeluj stany, przejścia i zdarzenia używając prostego tekstu.

Diagram ER

Projektuj schematy baz danych za pomocą diagramów encja-związek. Definiuj encje, atrybuty i relacje używając prostej składni tekstowej.

Reklama

Kompletny przewodnik po diagramach Mermaid

Naucz się tworzyć profesjonalne diagramy przy użyciu prostej składni tekstowej

Najczęściej zadawane pytania

Najczęstsze pytania dotyczące korzystania z Mermaid Viewer i tworzenia diagramów

Czy ten edytor Mermaid jest naprawdę darmowy?
Tak, całkowicie za darmo. Możesz tworzyć nieograniczoną liczbę diagramów, eksportować do SVG/PNG, udostępniać przez URL i korzystać ze wszystkich funkcji bez rejestracji i opłat. Narzędzie utrzymuje się z nienachalnych reklam.
Czy muszę coś instalować?
Nie musisz nic instalować. To narzędzie webowe działające w całości w przeglądarce. Wejdź na stronę i od razu twórz diagramy na komputerze, tablecie i telefonie.
Jak zapisywać diagramy?
Pracę możesz zapisać na kilka sposobów: 1) eksport do SVG lub PNG, 2) udostępnienie przez URL (kod jest zakodowany w adresie), 3) skopiowanie kodu Mermaid do własnych plików, 4) import/eksport plików .mmd lub .mermaid.
Czy mogę używać diagramów w dokumentacji?
Tak. Eksportuj diagramy jako SVG (skalowalne) lub PNG i używaj ich w dokumentacji, prezentacjach i na stronach WWW. Kod Mermaid możesz też osadzać bezpośrednio na platformach takich jak GitHub, GitLab czy Notion.
Jaka jest różnica między SVG a PNG?
SVG jest formatem wektorowym, więc zachowuje jakość w każdym rozmiarze i świetnie nadaje się do dokumentacji oraz webu. PNG jest rastrowy, wygodny do szybkiego udostępniania, ale traci jakość po skalowaniu.
Dlaczego diagram się nie renderuje?
Sprawdź błędy składni w kodzie Mermaid. Typowe problemy to niezamknięte cudzysłowy, brakujące dwukropki/średniki, błędne identyfikatory węzłów lub nieobsługiwana składnia. Uprość diagram, aby znaleźć źródło błędu.
Czy mogę współpracować z innymi?
Współpraca w czasie rzeczywistym nie jest wbudowana, ale możesz łatwo udostępniać diagramy przez URL. Inni mogą otworzyć, edytować i odesłać swoją wersję. Tekstowy format Mermaid dobrze współpracuje też z Git.
Czy to działa offline?
Pierwsze wczytanie wymaga internetu. Po załadowaniu podstawowa edycja często działa offline. Niektóre funkcje, np. eksport, mogą jednak wymagać połączenia.
Jak nauczyć się składni Mermaid?
Zacznij od naszego pełnego przewodnika Mermaid z przykładami wszystkich typów diagramów. Skorzystaj z panelu szablonów, a następnie uzupełnij wiedzę oficjalną dokumentacją na mermaid.js.org.
Czy mogę dostosować wygląd?
Tak. Diagramy podążają za motywem strony: przełączaj między jasnym a ciemnym przyciskiem Motyw na górnym pasku, a diagram zostanie ponownie wyrenderowany w pasującym motywie Mermaid. Bardziej zaawansowane dostosowanie wykonasz przez dyrektywę %%{init:...}%%, definiując kolory, czcionki i inne właściwości wizualne.
Jakie typy diagramów są wspierane?
Edytor obsługuje główne typy diagramów Mermaid: flowchart, sequence, class, state, ER, Gantt, pie chart, Git graph, user journey i inne.
Czy moje dane są prywatne?
Kod diagramu nie jest wysyłany na nasze serwery. Renderowanie odbywa się po stronie przeglądarki. Przy udostępnianiu przez URL kod znajduje się w samym adresie; nie przechowujemy ani nie śledzimy treści diagramów.
Dlaczego warto używać diagramów tekstowych?
Diagramy tekstowe dają wiele korzyści: kontrolę wersji (idealne z Git), szybkie aktualizacje, spójny styl, możliwość wyszukiwania, lekkość i automatyczne generowanie. Łatwiej je też recenzować w pull requestach.
Czy mogę osadzić Mermaid na stronie?
Tak. Dodaj bibliotekę JavaScript Mermaid do swojej strony i umieść bloki kodu Mermaid. Wiele platform ma już natywne wsparcie, m.in. GitHub, GitLab, Notion i Obsidian.
Jaki jest zalecany maksymalny rozmiar diagramu?
Nie ma twardego limitu, ale bardzo duże diagramy (powyżej ~100 węzłów) mogą renderować się wolniej zależnie od urządzenia. W złożonych systemach lepiej dzielić je na mniejsze, bardziej skupione diagramy.