Kto może to zrobić: Wszyscy użytkownicy
Wersje: Free, Starter, Business, Enterprise, Education
Na jakich platformach: Przeglądarka, aplikacja desktopowa
Twórz diagramy z kodu Mermaid i edytuj je tak, jak edytujesz 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.
UWAGA: Ustrukturyzowane diagramy Mermaid są we wersji beta. Obsługiwane typy diagramów i właściwości edycji są stopniowo ulepszane, a niektóre funkcje opisane poniżej są nadal wdrażane.
UWAGA: Jeśli szukasz informacji o starszej aplikacji Mermaid, zapoznaj się z Diagramy Mermaid dla Miro (starsza wersja).
Dlaczego warto używać diagramów Mermaid w Miro
- Przenośne w ramach Twojego przepływu pracy Mermaid. Używaj tej samej składni Mermaid, którą już zapisujesz w dokumentach, PR-ach i czatach AI. Dzięki Miro MCP asystenci 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, automatycznie rozmieszczony przez Miro — to nie jest statyczny obraz.
- Dwukierunkowa edycja. Wprowadź zmiany w diagramie bezpośrednio na tablicy — kod Mermaid zostanie zaktualizowany. Edytuj kod, a diagram zaktualizuje się.
- 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 nad nimi pracować na tej samej tablicy w czasie rzeczywistym.
Tworzenie diagramu Mermaid
Możesz dodać diagramy Mermaid na trzy sposoby.
Wklejanie kodu Mermaid na tablicę
- Skopiuj kod Mermaid z edytora, dokumentów lub czatu AI.
- Wklej go na tablicę Miro.
Miro renderuje kod jako Diagram utworzony z natywnych kształtów i łączników Miro.
Utwórz diagram za pomocą Miro MCP
Użyj narzędzia AI zgodnego z MCP (na przykład Cursor lub Claude Code) podłączonego do Miro MCP Server, aby wygenerować diagram Mermaid na tablicy.
- Połącz swoje narzędzie AI z Miro MCP. Instrukcje konfiguracji znajdziesz w Miro MCP.
- Poproś asystenta o utworzenie diagramu Mermaid na konkretnej tablicy. Dołącz w prompt adres URL tablicy, jeśli chcesz, aby diagram znalazł się na istniejącej tablicy.
- Otwórz tablicę w Miro, aby przejrzeć, edytować i współpracować nad wygenerowanym diagramem.
Asystenci mogą także odczytywać kod Mermaid z tablicy i bezpośrednio aktualizować diagramy, dzięki czemu możesz dalej iterować między swoją bazą kodu a Miro. Gdy asystent edytuje diagram, może dodać legendę zaznaczającą, co zostało dodane, usunięte lub zmienione.
UWAGA: W abonamentach Enterprise administrator firmy musi włączyć Miro MCP, zanim użytkownicy będą mogli się połączyć. Zobacz przewodnik administratora serwera Miro MCP.
Rozpocznij od formatu Diagram
- Na tablicy Miro otwórz pasek tworzenia i wybierz Formaty > Diagram.
- Kliknij Zacznij od kodu.
- Wybierz szablon Mermaid albo wklej własny kod Mermaid w panelu kodu.
Diagram zostanie wyrenderowany jako kształty Miro. - Kontynuuj edycję w trybie skupienia lub na planszy.
Aby dowiedzieć się więcej o formacie Diagram, trybie skupienia, warstwach i szablonach, zobacz diagramy Miro.
Edycja diagramu Mermaid
Możesz edytować diagram za pomocą AI, wizualnie na tablicy lub w kodzie źródłowym Mermaid. Zmiany pozostają zsynchronizowane.
Edycja wizualna
- Otwórz diagram w trybie skupienia.
- Dodaj lub usuń kształty i łączniki tak jak w dowolnym diagramie Miro.
- Zmień układ: od góry do dołu, od lewej do prawej.
- Otwórz panel z kodem, aby potwierdzić, że składnia Mermaid została zaktualizowana i odpowiada diagramowi.
Edycja kodu
- Otwórz diagram w trybie skupienia.
- Otwórz panel kodu.
- Zaktualizuj składnię Mermaid.
Diagram jest renderowany na bieżąco podczas edycji.
Edytuj z pomocą AI
- Skopiuj link do widżetu z diagramem.
- Otwórz wybranego asystenta i upewnij się, że Miro MCP jest uwierzytelnione.
- Poproś asystenta o wprowadzenie zmian, wklejając link do widżetu z diagramem, który ma edytować.
Diagram jest renderowany na miejscu w miarę edycji przez asystenta.
UWAGA: Edycja wizualna i panel kodu 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, użyj jednego z punktów wejścia w panelu kształtów lub w panelu układu, aby przełączyć diagram w tryb swobodny.
OSTRZEŻENIE: Po przełączeniu diagramu na tryb swobodny przestaje on być zsynchronizowany z kodem Mermaid i nie można go już edytować za pomocą MCP.
Obsługiwane typy diagramów
Diagramy przepływu renderowane są jako natywne kształty Miro. Kolejne typy diagramów Mermaid są dodawane stopniowo:
- Diagramy przepływu: Renderują się jako natywne, edytowalne kształty Miro.
- Diagramy sekwencji, klas i relacji encji: Renderują się jako natywne kształty Miro; edycja wizualna wkrótce.
- Inne typy diagramów: Jeśli potrzebujesz typu diagramu, który nie został wymieniony powyżej, przekaż swoją opinię poprzez ten formularz. Możemy się z Tobą skontaktować 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ś podłączonego asystenta, aby odczytał diagram z adresu URL tablicy, dzięki czemu możesz udokumentować go w bazie kodu, w PR lub w innych narzędziach. Źródło Mermaid pozostaje dostępne, umożliwiając wymianę w obie strony.
- Udostępnij link. Skopiuj adres URL tablicy albo z menu Więcej (⋯) diagramu wybierz Kopiuj link do trybu skupienia, aby wysłać współpracowników bezpośrednio do diagramu. Zobacz także Udostępnianie tablic i zapraszanie współpracowników.
- Pobierz jako PDF lub obraz. W menu diagramu Więcej (⋯) wybierz Eksportuj jako PDF lub Eksportuj jako obraz (JPG, SVG lub PDF). Możesz też skopiować diagram jako obraz z tablicy.
Znane ograniczenia
Ponieważ ustrukturyzowane diagramy Mermaid są w wersji beta, pamiętaj o poniższych ograniczeniach:
- Edycja wizualna jest dostępna tylko dla schematów blokowych.
- Edycja wizualna i panel kodu są dostępne tylko w trybie skupienia.
- Edycja wizualna kształtów, tekstu i linii jest ograniczona do tego, co obsługuje składnia Mermaid.
- Diagramy korzystają z natywnego automatycznego rozmieszczania Miro. Aby swobodnie przesuwać kształty lub użyć układu, którego Mermaid nie obsługuje, przekonwertuj diagram na tryb swobodny.
- Przeciąganie i upuszczanie kształtów będzie dostępne wkrótce. Na razie dodawaj kształty przyciskiem + na kształcie lub przez kopiuj-wklej i duplikowanie.
Dodatkowe informacje
- Aby poznać składnię Mermaid, obsługiwane typy diagramów i przykłady, zobacz oficjalną dokumentację Mermaid.
- Aby zapoznać się z funkcjami formatu Diagram, takimi jak warstwy, kontenery i tryb skupienia, zobacz diagramy Miro.
- Aby połączyć narzędzia AI z Miro, zobacz przegląd Miro MCP Server.