Edytor Mermaid
Twórz schematy blokowe, diagramy sekwencji, wykresy Gantta i więcej z tekstu w edytorze Mermaid. Renderuj, zoomuj i eksportuj do SVG lub PNG w przeglądarce.
Czym jest Mermaid?
Mermaid to otwartoźródłowy język opisu diagramów pozwalający tworzyć je z czystego tekstu, podobnie jak Markdown. Opisujesz węzły i połączenia prostą składnią, a renderer rysuje diagram automatycznie.
Jakie typy diagramów są obsługiwane?
Edytor zawiera przykłady schematów blokowych, diagramów sekwencji, klas, stanów, ER, wykresów Gantta, kołowych, map myśli i osi czasu. Mermaid 11 obsługuje też wiele innych typów do wpisania ręcznie.
Jak utworzyć diagram?
Wybierz przykład z listy lub wpisz kod w edytorze po lewej. Podgląd renderuje się ponownie około 350 ms po zatrzymaniu pisania; przy błędzie składni czerwony panel pokazuje dokładny komunikat, a stary diagram pozostaje.
Czy mój kod jest gdzieś wysyłany?
Nie. Wszystko renderuje się lokalnie w przeglądarce za pomocą JavaScript. Kod nigdy nie opuszcza Twojego urządzenia.
Jak wyeksportować diagram?
Pobierz SVG daje skalowalną grafikę wektorową, a Pobierz PNG obraz o podwójnej rozdzielczości (opcjonalnie z przezroczystym tłem). Kopiuj kod umieszcza źródło Mermaid w schowku.
Dlaczego eksport PNG czasem się nie udaje?
Niektóre funkcje Mermaid są renderowane przez foreignObject, którego przeglądarka może odmówić rasteryzacji. Wtedy PNG zgłasza błąd, ale pobieranie SVG zawsze działa, bo nie wymaga rasteryzacji.
Jak działa zoom?
Podgląd obsługuje skalowanie od 0,5x do 2x. Przyciski + i - zmieniają o 10%, Dopasuj skaluje diagram do obszaru podglądu, a 100% przywraca rozmiar oryginalny.
Czy mogę używać Mermaid w swojej dokumentacji?
Tak. GitHub, GitLab i wiele narzędzi dokumentacyjnych natywnie renderuje bloki Mermaid: umieść kod w bloku kodu mermaid, a zostanie narysowany automatycznie.
Czy edytor obsługuje tryb ciemny?
Tak. Diagram podąża za motywem platformy: po przełączeniu na tryb ciemny renderuje się ponownie z ciemnym motywem Mermaid.
Wskazówki dla czytelnych diagramów?
Krótkie etykiety węzłów, kierunek dobrany do treści (TD pionowo, LR poziomo), dzielenie bardzo dużych grafów na podgrafy i używanie wbudowanych przykładów jako szablonów.
Jak korzystać z Edytor Mermaid
Mermaid zamienia zwykły tekst w schematy blokowe, diagramy sekwencji, wykresy Gantta i nie tylko. Ten edytor na żywo przerysowuje kod w trakcie pisania — w całości w przeglądarce, nic nie opuszcza Twojego urządzenia.
- Wybierz punkt startowy z listy rozwijanej „Przykład” — dziewięć gotowych diagramów obejmuje schemat blokowy, sekwencję, klasy, stany, ER, Gantta, kołowy, mapę myśli i osią czasu, a wybór ładuje jego kod do edytora.
- Edytuj kod Mermaid w lewym panelu; podgląd po prawej przerysowuje się około jednej trzeciej sekundy po zakończeniu pisania. Gdy w czerwonym panelu pojawi się błąd składni, ostatni poprawny diagram pozostaje widoczny, gdy wprowadzasz poprawki.
- Powiększaj od 50% do 200% przyciskami plus i minus, naciśnij „Dopasuj”, aby dopasować diagram do pola podglądu, albo „100%”, by wrócić do rzeczywistego rozmiaru.
- Zaznacz „Przezroczyste tło”, jeśli chcesz PNG bez białego podkładu, a następnie naciśnij „Pobierz SVG” lub „Pobierz PNG” — PNG eksportowany jest w podwójnej rozdzielczości, więc po osadzeniu pozostaje ostry.
- Naciśnij „Kopiuj kod”, aby przenieść źródło Mermaid do schowka i wkleić je do dokumentacji, wiki lub repozytorium.
Gdy diagram się nie rysuje, zakomentuj ostatnio zmienione wiersze, aby odizolować błąd — komunikat wskazuje winowajcę, a podgląd zachowa ostatnią działającą wersję, aż składnia znów będzie poprawna.
Powiązane narzędzia
- Kod na Obraz Konwertuj fragmenty kodu na udostępniane obrazy z podświetleniem składni, niestandardowymi motywami i dekoracjami okna. 100% prywatność, wszystko w przeglądarce.
- Podgląd Markdown Darmowy edytor Markdown online z podglądem na żywo. Pisz, renderuj i eksportuj Markdown z pełnym wsparciem GFM.
- Przeglądarka i Edytor SVG Przeglądaj, edytuj i optymalizuj pliki SVG online. Podgląd na żywo, edycja kodu i narzędzia optymalizacyjne.
- Przeglądarka drzewa JSON Wizualizuj dane JSON jako interaktywne zwijalne drzewo. Szukaj kluczy i wartości, śledź JSONPath przy najechaniu i obsługuj duże pliki z leniwym ładowaniem. Obsługuje przeciąganie i upuszczanie plików .json.
- Sprawdzanie Hash Obliczaj i weryfikuj hashe MD5, SHA-1, SHA-256, SHA-512 lokalnie
- Kalkulator Chmod Darmowy kalkulator chmod online do wizualizacji i obliczania uprawnień plików Linux za pomocą pól wyboru. Natychmiastowa konwersja między notacją liczbową (755, 644) a symboliczną (rwxr-xr-x). Obsługuje specjalne uprawnienia jak setuid, setgid, sticky bit.
- Tabela ASCII Kompletna referencja kodowania znaków ASCII z kodami dziesiętnymi, szesnastkowymi, ósemkowymi, binarnymi, encjami HTML i opisami znaków. Natychmiastowe wyszukiwanie i filtrowanie.
- Przeglądarka Hex Przeglądaj zawartość plików w formacie hex dump z wyszukiwaniem, nawigacją offsetu i wirtualnym przewijaniem