Edytor Mermaid online: diagramy w Markdown na żywo

W Mermaid kilka wierszy tekstu zamienia się w diagram. Markdown Preview Editor działa jako edytor Mermaid z podglądem na żywo: wpisujesz kod diagramu w dokumencie Markdown, a podgląd rysuje go w trakcie pisania. W przeciwieństwie do osobnego programu do diagramów rysunek jest częścią tekstu wokół niego, więc dokument projektowy, README czy konspekt lekcji mieści się w jednym pliku.

Czym jest diagram Mermaid?

Diagram Mermaid to wykres opisany zwykłym tekstem. Nie przeciągasz prostokątów i strzałek — piszesz wiersze w rodzaju A --> B, a Mermaid sam rozmieszcza elementy. Obsługuje schematy blokowe, diagramy sekwencji, wykresy Gantta, diagramy stanów i klas, wykresy kołowe, mapy myśli i więcej.

Ponieważ diagram jest tekstem, łatwo go zmienić, trzymać w systemie kontroli wersji i przeglądać w diffach. GitHub, GitLab, Obsidian i wiele narzędzi do dokumentacji renderuje Mermaid, więc ten sam kod działa we wszystkich.

Jak narysować diagram

1. Otwórz edytor. Przejdź do edytora online.
2. Dodaj blok Mermaid. Wpisz trzy grawisy (backticki), a po nich mermaid, albo wstaw szablon przyciskiem Diagram Mermaid w rzędzie narzędzi Edytor zaawansowany.
3. Napisz diagram. Podgląd po prawej przerysowuje go w trakcie pisania, więc brakującą strzałkę czy nawias widać od razu.
4. Zapisz lub udostępnij. Zapisz dokument jako .md, wyeksportuj go do HTML albo wydrukuj do PDF — diagramy są w nim uwzględnione.

Oto pierwszy schemat blokowy:

markdown```mermaid
flowchart LR
  A[Pomysł] --> B{Warto?}
  B -- tak --> C[Zrób to]
  B -- nie --> D[Odłóż]
```

Dostępne typy diagramów

Pełną składnię każdego typu wraz z przykładami gotowymi do skopiowania znajdziesz w poradniku o diagramach Mermaid w Markdown.

Dlaczego warto

• Podgląd na żywo. Diagram aktualizuje się podczas pisania; błędy składni widać od razu.
• Tekst i diagramy razem. Objaśnienia, wzory i schemat blokowy piszesz w jednym pliku Markdown.
• Prywatnie. Diagramy są rysowane w Twojej przeglądarce. Kod nie jest wysyłany na serwer.
• Za darmo i open source. Bez konta i bez limitu liczby diagramów.

Ograniczenia

• Nie ma osobnego pobierania pojedynczego diagramu jako PNG lub SVG. Diagramy są eksportowane jako część dokumentu — w eksporcie HTML i w PDF. Osobny obraz można wyeksportować oficjalnymi narzędziami Mermaid.
• Własne motywy i style poszczególnych węzłów są ograniczone: diagramy mają prosty, domyślny wygląd dopasowany do jasnego lub ciemnego motywu.
• Diagramy pisze się jako kod; nie ma wizualnej edycji metodą przeciągnij i upuść.

Chcesz tylko obejrzeć istniejący plik Markdown z diagramami? Użyj przeglądarki Markdown albo wróć na stronę główną edytora Markdown.