Mermaid Editor

Edytor mermaid online, wizualnie i w kodzie w jednym miejscu

Większość edytorów mermaid daje ci pole tekstowe i podgląd. Ten dodaje też płótno: kliknij, by dodać blok, przeciągnij strzałkę, pogrupuj elementy w obszary — a kod mermaid napisze się sam. Przełącz się na zakładkę kodu i edytuj go ręcznie; płótno podąża za zmianami.

  • Renderuje się w locie

    Prawdziwy silnik mermaid, przerysowywany kilkaset milisekund po ostatnim naciśnięciu klawisza.

  • Kod i płótno zsynchronizowane

    Edytuj dowolną stronę. Druga nadąża za zmianami — bez kopiowania między dwoma narzędziami.

  • 14 kształtów węzłów

    Prostokąt, zaokrąglony, pigułka, koło, romb, baza danych, sześciokąt i inne — jednym kliknięciem.

  • Za darmo, bez rejestracji

    Bez okresu próbnego i znaku wodnego — edytor otwiera się od razu. Zaloguj się tylko wtedy, gdy chcesz więcej niż jeden schemat.

Płótno, a nie tylko pole tekstowe

Zakładka wizualna to prawdziwy edytor na wyrenderowanym diagramie: kliknij węzeł, by go zaznaczyć, kliknij dwukrotnie, by zmienić nazwę w miejscu, przeciągnij w dowolnym miejscu, by przesunąć widok.

  • Buduj klikającDodaj blok, skieruj strzałkę na inny, opisz strzałkę. Żadnej składni do zapamiętania, zanim zaczniesz.

  • Wybierz kształtCzternaście kształtów flowchartu mermaid — romby decyzyjne, cylindry baz danych, podprocesy — z jednego selektora.

  • Koloruj wszystkoOsiem gotowych kolorów plus wybór koloru niestandardowego, do pojedynczego węzła albo całego obszaru.

Kod mermaid, który zostaje twój

Zakładka tekstowa to zwykły mermaid — ta sama składnia, którą renderują już GitHub, GitLab, Notion i Obsidian. Nic tu nie jest formatem zastrzeżonym.

  • Pisz ręcznieWpisz mermaid bezpośrednio i patrz, jak się renderuje. Sześć gotowych przykładów na start.

  • Odczyt w obie stronyWklejone flowcharty są odczytywane z powrotem na płótno — węzły, kształty, kolory, podgrafy i cała reszta.

  • Każdy typ diagramuFlowchart, sekwencja, klasy, stan, ER, gantt, git graph, pie — podgląd renderuje wszystko, co obsługuje mermaid.

Duże diagramy zostają czytelne

Diagramy architektury szybko wychodzą poza jeden ekran. Przesuwanie widoku, zoom i grupowanie są stworzone właśnie do tego, zamiast z tym walczyć.

  • Obszary i zagnieżdżanieGrupuj bloki w podgrafy, zagnieżdżaj jeden obszar w drugim, przesuń całe poddrzewo jednym gestem.

  • Zoom od 2% do 1600%Przewijaj, by przesuwać widok, ctrl+scroll, by przybliżać, albo wyśrodkuj jednym przyciskiem.

  • Zapisywane na bieżącoSchemat zapisuje się automatycznie w przeglądarce podczas edycji. Po zalogowaniu zapisuje się na koncie i podąża za Tobą na każde urządzenie.

Eksportuj i działaj dalej

Nic nie jest zamknięte. Weź obraz, weź źródło albo weź blok Markdown gotowy do wklejenia w dokument.

  • Bez płatnej wersjiKażda funkcja, łącznie z eksportem, jest darmowa. Nie ma płatnego planu, do którego trzeba by przejść.

  • Renderowane w Twojej przeglądarceRenderowanie odbywa się w Twojej przeglądarce; bez konta schemat nigdy jej nie opuszcza, a z kontem zapisany dokument podąża za Tobą na każde urządzenie.

  • SVG, PNG, .mmd, .mdSkopiuj kod SVG, pobierz PNG w rozdzielczości 2x, zapisz źródło mermaid albo weź gotowy blok Markdown.

Jak to wypada na tle typowych rozwiązań

Narzędzia typu diagram-jako-kod każą pisać wszystko ręcznie. Narzędzia typu przeciągnij-i-upuść dają obraz, którego nie da się porównać. To narzędzie nie wybiera jednej strony.

Rozpoczęcie pracy

IQ Mermaid: Kliknij dwukrotnie na płótnie i pojawia się węzeł. Składni możesz nauczyć się później — albo nigdy.

Typowe narzędzie: Najpierw przeczytaj dokumentację składni, albo zaakceptuj narzędzie do rysowania bez żadnej reprezentacji tekstowej.

Format wyjściowy

IQ Mermaid: Zwykły mermaid — ten sam tekst, który natywnie renderują GitHub, GitLab i Notion.

Typowe narzędzie: Zastrzeżony plik, który otwiera się tylko w narzędziu, które go stworzyło.

Edycja później

IQ Mermaid: Zmień kod albo przesuń bloki. Obie ścieżki działają na tym samym diagramie.

Typowe narzędzie: Tylko jeden kierunek: narzędzia oparte na kodzie nie mają płótna, narzędzia oparte na płótnie nie mają źródła.

Cena

IQ Mermaid: Za darmo — nawet e-mail nie jest potrzebny.

Typowe narzędzie: Darmowy plan ograniczony do kilku diagramów, eksport lub współpraca za subskrypcją.

Gdzie są dane

IQ Mermaid: W Twojej przeglądarce albo na koncie, jeśli ma podążać za Tobą na każde urządzenie.

Typowe narzędzie: Konto na czyimś serwerze, z podpiętymi do niego twoimi diagramami.

Edytor mermaid — najczęstsze pytania

Na start wystarczy otworzyć stronę.

Czym jest mermaid?

Mermaid to składnia tekstowa do diagramów: opisujesz węzły i strzałki w kilku liniach, a mechanizm renderujący rysuje obraz. GitHub, GitLab, Notion i Obsidian renderują ją wewnątrz Markdown, więc blok mermaid pozostaje czytelny w pull requeście czy na stronie wiki.

Czy ten edytor mermaid jest naprawdę darmowy?

Tak. Wszystkie funkcje, w tym eksport do SVG i PNG, są darmowe, a edytora możesz używać, nie tworząc niczego. Opcjonalne darmowe konto dodaje więcej zapisanych schematów i synchronizację między urządzeniami — nie ma płatnego planu i nic nie jest blokowane.

Czy muszę znać składnię mermaid?

Nie. Zacznij od zakładki wizualnej: kliknij dwukrotnie na płótnie, by dodać blok, zaznacz go i narysuj strzałkę do innego. Kod mermaid generuje się sam, a ty możesz go przejrzeć, kiedy zechcesz nauczyć się składni.

Jakie typy diagramów są obsługiwane?

Zakładka kodu renderuje wszystko, co obsługuje mermaid — flowchart, sekwencja, klasy, stan, relacje encji, gantt, git graph, pie i więcej. Wizualne płótno edytuje konkretnie flowcharty, czyli to, czym jest większość diagramów.

Czy mogę eksportować do PNG lub SVG?

Tak. Skopiuj kod SVG do schowka, pobierz plik SVG albo pobierz PNG wyrenderowany w rozdzielczości 2x — na potrzeby slajdów i dokumentów. Możesz też zapisać źródło mermaid jako .mmd albo jako blok Markdown.

Gdzie przechowywany jest mój diagram?

Bez konta jedyny schemat zapisuje się w przeglądarce, więc jest tam, gdy wrócisz na tym samym urządzeniu. Po zalogowaniu zapisuje się na koncie i może podążać za Tobą na inne urządzenie. Wyeksportuj źródło, jeśli chcesz własną kopię.

Czy mogę wkleić istniejący diagram mermaid?

Tak. Wklej go w zakładce kodu; flowchart zostanie odczytany z powrotem na wizualne płótno z zachowanymi węzłami, kształtami, kolorami i podgrafami. Inne typy diagramów renderują się w podglądzie, ale pozostają dostępne tylko jako kod.

Czy działa offline?

Renderowanie odbywa się w całości w przeglądarce, więc po załadowaniu strony edytor działa również bez połączenia.

Otwórz edytor. Za darmo — bez rejestracji.

Puste płótno, zakładka kodu i każda opcja eksportu — za darmo, w przeglądarce, już teraz.