Przejdź do głównej treści
LibraTool logoLibraTool

Edytor diagramów Mermaid za darmo

Twórz schematy blokowe, diagramy sekwencji, wykresy Gantta i inne w składni Mermaid z podglądem na żywo. Eksportuj jako SVG lub PNG. Działa całkowicie w Twojej przeglądarce.

💡 Twórz diagramy w składni Mermaid — schematy blokowe, diagramy sekwencji, wykresy Gantta, diagramy klas i inne — i eksportuj je jako SVG lub PNG. Wszystko działa w Twojej przeglądarce: tekst diagramu nigdy nie jest wysyłany, a silnik renderujący Mermaid jest serwowany z tej witryny, a nie z zewnętrznego CDN.

Typowe zastosowania

  • Utwórz Schemat BlokowyUtwórz schemat blokowy z tekstu i wyeksportuj jako obraz.
  • Narysuj Diagram SekwencjiDiagram sposobu interakcji systemów lub osób w czasie.
  • Dodaj Diagram do READMEUtwórz diagramy, które GitHub renderuje natywnie w Twoim README.
  • Zbuduj Diagram GanttaUstaw oś czasu projektu jako diagram Gantta z tekstu.
  • Utwórz Diagram KlasyDiagram klas i ich relacji do projektowania oprogramowania.

Jak to działa

Mermaid pozwala pisać diagramy jako tekst i mieć je renderowane automatycznie — świetne do utrzymywania diagramów w kontroli wersji. To jest edytor na żywo, który renderuje podczas pisania.

  1. 1
    Silnik Mermaid się ładuje
    Biblioteka Mermaid wczytuje się z LibraTool przy pierwszym użyciu narzędzia, a potem przeglądarka trzyma ją w pamięci podręcznej.
  2. 2
    Piszesz kod diagramu
    Schematy blokowe, diagramy sekwencji, wykresy Gantta, diagramy klas, wykresy kołowe i inne — przy użyciu składni tekstu Mermaid.
  3. 3
    Renderuje się na żywo
    Twój kod jest parsowany i renderowany do SVG w przeglądarce podczas wpisywania, z motywami jasno i ciemno.
  4. 4
    Eksportuj SVG lub PNG
    Pobierz diagram jako skalowalny SVG lub PNG 2×, aby wstawić go do dokumentów, slajdów lub pliku README.

Twój kod diagramu — który może opisywać systemy wewnętrzne — jest renderowany całkowicie w przeglądarce i nigdy nie przesyłany.

Powiązane narzędzia

📝

Edytor Markdown

Pisz i podglądaj Markdown w czasie rzeczywistym. Obsługuje nagłówki, pogrubienie, kursywę, bloki kodu, tabele i listy.

Wypróbuj
🟦

Generator siatki CSS

Wizualnie zaprojektuj siatkę CSS — ścieżki, jednostki i przerwy — i skopiuj wygenerowany CSS i HTML.

Wypróbuj
🌳

Generator drzewa ASCII

Zamień listę z wcięciami w czyste drzewo folderów (├── └──) do plików README i dokumentacji. Wyjście Unicode lub zwykłe ASCII. Działa całkowicie w Twojej przeglądarce.

Wypróbuj

Często zadawane pytania