Twórz diagramy Mermaid

Kto może to zrobić: Wszyscy użytkownicy
Które plany: Free, Starter, Business, Enterprise, Education
Które platformy: Przeglądarka, aplikacja desktopowa

Twórz diagramy z kodu Mermaid i edytuj je tak jak kształty i linie w Miro. Kod Mermaid pozostaje źródłem prawdy, dzięki czemu możesz przenosić diagramy między Miro, swoją bazą kodu i narzędziami AI bez utraty struktury.

Jeśli szukasz informacji o starszej aplikacji Mermaid, zobacz Diagramy Mermaid dla Miro (legacy).

Dlaczego warto używać diagramów Mermaid w Miro

• Przenośne w obrębie twojego przepływu pracy Mermaid. Używaj tej samej składni Mermaid, której już używasz w dokumentach, PR-ach i czatach AI. Dzięki Miro MCP agenci mogą tworzyć, odczytywać, aktualizować i edytować diagramy Mermaid na twoich tablicach.
• Renderowane jako kształty Miro. Kod Mermaid zamienia się w Diagram zbudowany z edytowalnych kształtów i łączników Miro, rozmieszczany automatycznie przez Miro – nie jest to statyczny obraz. Miro obsługuje kształty z wersji Mermaid 10 i 11, więc diagramy wklejone z Mermaid Live, Mermaid AI lub innych narzędzi renderują się z oczekiwanymi typami kształtów.
• Edycja dwukierunkowa. Gdy zmienisz diagram na tablicy, kod Mermaid zostanie zaktualizowany. Gdy edytujesz kod, diagram zostanie ponownie wyrenderowany.
• Stworzone z myślą o współpracy. Ponieważ diagramy są natywną zawartością Miro, Twój zespół może komentować, współedytować i wspólnie pracować na tej samej tablicy w czasie rzeczywistym.

Utwórz diagram Mermaid

Możesz dodać diagramy Mermaid na kilka sposobów.

Wklej kod Mermaid na tablicę

1. Skopiuj kod Mermaid z edytora, dokumentów lub czatu z AI.
2. Wklej go na tablicę Miro.
   Miro renderuje kod jako Diagram utworzony z edytowalnych kształtów i łączników Miro.

Jeśli w kodzie wystąpi błąd składni, Miro wyświetli informację na planszy, żebyś otworzył tryb skupienia i naprawił go w panelu kodu. Po poprawieniu kodu diagram zostanie automatycznie wyrenderowany.

Przeciągnij plik Mermaid

1. Przeciągnij plik .mmd lub .mermaid z komputera na tablicę Miro.
   Miro wyrenderuje plik jako Diagram składający się z natywnych kształtów Miro.

Dla pełnej listy formatów, które można przesłać, zobacz Obsługiwane formaty plików.

Utwórz diagram za pomocą Miro MCP

Użyj narzędzia AI zgodnego z MCP (np. Cursor lub Claude Code) połączonego z Miro MCP Server, aby wygenerować na tablicy diagram Mermaid.

1. Połącz swoje narzędzie AI z Miro MCP.
2. Poproś agenta o utworzenie diagramu Mermaid na konkretnej tablicy. Dołącz adres URL tablicy do promptu, jeśli chcesz umieścić diagram na istniejącej tablicy.
3. Otwórz tablicę w Miro, aby przejrzeć, edytować i współpracować nad wyrenderowanym diagramem.

Agenci mogą też odczytywać Mermaid z tablicy i aktualizować diagramy na miejscu, dzięki czemu możesz kontynuować iteracje między bazą kodu a Miro. Gdy agent edytuje diagram, może dodać legendę pokazującą, co zostało dodane, usunięte lub zmienione.

W planach Enterprise administrator firmy musi włączyć Miro MCP, zanim użytkownicy będą mogli się połączyć. Zobacz przewodnik administratora serwera Miro MCP.

Zacznij od formatu diagramu

1. Na tablicy Miro otwórz pasek tworzenia i wybierz Formaty > Diagram.
2. Kliknij Stwórz za pomocą kodu.
3. Wklej własny kod Mermaid w panel kodu lub wybierz szablon Mermaid.
   Diagram zostanie wyrenderowany jako kształty Miro.
4. Kontynuuj edycję w trybie skupienia lub bezpośrednio na planszy.

Aby dowiedzieć się więcej o formacie Diagram, trybie skupienia, warstwach i szablonach, zobacz diagramy Miro.

Edytuj diagram Mermaid

Możesz edytować wizualnie na tablicy, w kodzie źródłowym Mermaid lub za pomocą AI (współpracownicy AI, przepływy lub Miro MCP). Zmiany pozostają zsynchronizowane.

Edycja wizualna

1. Otwórz diagram w trybie skupienia.
2. Wybierz kształt, linię lub etykietę tekstową i edytuj ją bezpośrednio na diagramie. Pojawi się pasek narzędzi z kontrolkami dla wybranego elementu. Możesz na przykład zmienić typ kształtu, edytować tekst, dostosować rozmiar czcionki, pogrubić tekst lub ustawić kolor tekstu, obramowania i wypełnienia.
   
3. Otwórz panel kodu, aby sprawdzić, czy składnia Mermaid została zaktualizowana.

Dodaj i połącz kształty

W trybie skupienia możesz rozbudować diagram bez edycji kodu Mermaid:

• Kliknij, aby dodać kształty. Otwórz panel kształtów i kliknij kształt, aby dodać go do diagramu. Panel zawiera kształty schematu blokowego Mermaid oraz standardowe kształty schematu blokowego Miro.
• Dodaj połączony kształt. Zaznacz kształt, a następnie kliknij przycisk +, aby dodać nowy kształt połączony z nim.
• Połącz kształty. Zaznacz kształt, a następnie przeciągnij przycisk + na inny kształt, aby narysować między nimi linię. Możesz też ponownie podłączyć istniejącą linię, aby zmienić przepływ.

Dostosuj układ

Otwórz panel układu w trybie skupienia, aby zmienić sposób rozmieszczenia diagramu:

1. W sekcji Kierunek, kliknij strzałkę, aby ustawić przepływ diagramu: od lewej do prawej, z góry na dół, z dołu do góry lub od prawej do lewej.
   
2. W sekcji Odstępy, przeciągnij suwaki Poziomy i Pionowy, aby ustawić odstęp między kształtami.
   
3. W sekcji Kształty, wybierz sposób dopasowania rozmiaru kształtów:
   • Jednakowa szerokość: Wszystkie kształty mają jednakową szerokość, co zapewnia schludny, wyrównany układ.
   • Dopasuj do treści: Każdy kształt ma rozmiar dopasowany do tekstu – przydatne, gdy niektóre kształty zawierają znacznie więcej tekstu.
4. W sekcji Tekst, wybierz sposób rozmieszczenia etykiet:
   • Wiele wierszy: Długie etykiety zawijają się na kilka wierszy.
   • Pojedynczy wiersz: Każda etykieta pozostaje w jednym wierszu, przez co kształty są szersze.

Edytuj kod

1. Otwórz diagram w trybie skupienia.
2. Otwórz panel kodu.
   
3. Zaktualizuj składnię Mermaid.
   Diagram odświeża się podczas edycji.

Podczas edycji:

• Kształt i kod pozostają powiązane. Wybierz kształt na diagramie, aby podświetlić odpowiadający mu fragment kodu, lub wybierz kod, żeby przejść do odpowiadającego kształtu.
• Podświetlanie składni koloruje tokeny Mermaid w edytorze, dzięki czemu łatwiej przejrzeć strukturę.
• Możesz zmienić rozmiar panelu z kodem, żeby mieć więcej miejsca podczas edycji.

Kliknij ikonę ustawień (koło zębate) w panelu z kodem, aby dostosować sposób, w jaki edytor wyświetla kod:

• Numery linii: Pokaż lub ukryj numery linii w edytorze.
• Zawijanie tekstu: Zawijaj długie linie, aby mieściły się w szerokości panelu zamiast przewijać poziomo.

Edytuj z pomocą AI

Możesz iterować nad diagramami Mermaid za pomocą współpracowników AI, przepływów lub połączonego agenta przez Miro MCP. Agenci odczytują i edytują kod źródłowy Mermaid, więc mogą wprowadzać precyzyjne zmiany bez ponownego generowania całego diagramu.

Za pomocą współpracowników AI lub przepływów:

1. Zaznacz diagram na tablicy albo skopiuj link do widżetu diagramu.
2. Otwórz współpracownika AI lub uruchom przepływ.
3. Poproś o żądaną zmianę (na przykład „zmień wszystkie kontenery w tym diagramie na czerwone”).
   Zmiany pojawią się od razu na diagramie.

Z Miro MCP:

1. Skopiuj link do widżetu diagramu.
2. Otwórz wybrane narzędzie AI, mając uwierzytelnione Miro MCP.
3. Poproś agenta o wprowadzenie zmian, wklejając link do widżetu diagramu, który ma edytować.
   Diagram ponownie się renderuje na miejscu w miarę edycji przez agenta.

Edycja wizualna i panel z kodem są dostępne tylko w trybie skupienia. Edycja w widoku podzielonym bezpośrednio na planszy nie jest obsługiwana.

Więcej możliwości edycji

Jeśli potrzebujesz więcej kształtów lub chcesz swobodnie przesuwać kształty, przełącz diagram na free-form. Możesz to rozpocząć z panelu kształtów, z panelu układu albo próbując przesunąć kształt na diagramie.

1. Spróbuj przesunąć kształt lub wybierz Przełącz na swobodną edycję z panelu kształtów lub panelu układu.
   Otworzy się okno modalne Przełącz na swobodną edycję.
2. Wybierz sposób przełączenia:
   • Przełącz i zastąp: Konwertuj ten diagram na swobodną edycję.
   • Utwórz kopię, a następnie przełącz: Zachowaj obecną wersję Mermaid i przekonwertuj kopię na swobodną edycję.

Po przełączeniu diagramu na swobodną edycję przestaje on być zsynchronizowany z kodem Mermaid i nie można go już edytować za pomocą MCP.

Obsługiwane typy diagramów

Ta tabela pokazuje, jak każdy typ diagramu Mermaid jest renderowany w Miro. Wizualna edycja w trybie skupienia jest obecnie dostępna dla schematów blokowych; kolejne typy będą dodawane stopniowo:

Jeśli potrzebujesz typu diagramu, który nie jest jeszcze edytowalny wizualnie, prześlij opinię w tym formularzu. Możemy skontaktować się z Tobą w celu przeprowadzenia wywiadu.

Pełna lista typów diagramów Mermaid i składni znajduje się w oficjalnej dokumentacji Mermaid.

Udostępnij i eksportuj

• Odczytaj za pomocą Miro MCP. Poproś połączonego agenta, aby odczytał diagram z adresu URL tablicy, dzięki czemu możesz udokumentować go w bazie kodu, PR lub innych narzędziach. Źródło w postaci Mermaid pozostaje dostępne do dwukierunkowych aktualizacji.
• Udostępnij link. Skopiuj adres URL tablicy albo w menu Więcej (⋯) diagramu wybierz Kopiuj link do trybu skupienia, aby wysłać współpracowników bezpośrednio do diagramu. Zobacz też Udostępnianie tablic i zapraszanie współpracowników.
• Pobierz jako PDF lub obraz. W menu Więcej (⋯) diagramu wybierz Eksportuj jako PDF lub Eksportuj jako obraz (JPG, SVG lub PDF). Możesz też skopiować diagram jako obraz z tablicy.

Znane ograniczenia

Pamiętaj o poniższych ograniczeniach:

• Wizualna edycja jest dostępna tylko dla schematów blokowych. Diagramy stanów, sekwencji, klas i ER są renderowane jako natywne kształty Miro, ale edycja wizualna dla tych typów pojawi się później.
• Wizualna edycja i panel kodu są dostępne tylko w trybie skupienia.
• Wizualna edycja kształtów, tekstu i linii jest ograniczona do tego, co obsługuje składnia Mermaid.
• Diagramy korzystają z natywnego automatycznego układu Miro. Nie możesz swobodnie przesuwać kształtów na diagramie Mermaid.

Prośby o funkcje rozpatrujemy na bieżąco. Jeśli któreś z tych ograniczeń utrudnia Ci pracę, skontaktuj się ze społecznością lub z administratorem.

Dodatkowe informacje

• Informacje o składni Mermaid, obsługiwanych typach diagramów i przykładach znajdziesz w oficjalnej dokumentacji Mermaid.
• O funkcjach formatu Diagram, takich jak warstwy, kontenery i tryb skupienia, przeczytasz w diagramach Miro.
• Informacje o łączeniu narzędzi AI z Miro znajdziesz w przeglądzie serwera Miro MCP.
• O współpracownikach AI i przepływach przeczytasz w przeglądzie współpracowników AI i przeglądzie przepływów.