Kto może to zrobić: Wszyscy użytkownicy
Dostępne plany: 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: Strukturalne diagramy Mermaid są w wersji beta. Obsługiwane typy diagramów oraz możliwości edycji są stopniowo ulepszane, a niektóre opisane poniżej funkcje nadal są wdrażane.
UWAGA: Jeśli szukasz informacji o starszej aplikacji Mermaid, zobacz Diagramy Mermaid dla Miro (wersja starsza).
Dlaczego warto używać diagramów Mermaid w Miro
- Przenośne w ramach Twojego przepływu pracy z Mermaid. Używaj tej samej składni Mermaid, której już używasz w dokumentach, pull requestach (PR) i czatach AI. Dzięki Miro MCP asystenci mogą tworzyć, odczytywać, aktualizować i edytować diagramy Mermaid na Twoich tablicach.
- Wyświetlane 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.
- Edycja dwukierunkowa. Wprowadź zmiany wizualnie na tablicy, a kod Mermaid zaktualizuje się. Edytuj kod, a diagram zostanie przerysowany.
- Stworzono 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.
Tworzenie diagramu Mermaid
Możesz dodać diagram Mermaid na trzy sposoby.
Wklej kod Mermaid na tablicę
- Skopiuj kod Mermaid ze swojego edytora, dokumentów lub czatu AI.
- Wklej go na tablicę Miro.
Miro renderuje kod jako diagram z kształtów Miro.
Utwórz diagram za pomocą Miro MCP
Użyj narzędzia AI kompatybilnego z MCP (na przykład Cursor lub Claude Code) połączonego z 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 wybranej tablicy. Dołącz URL tablicy do promptu, jeśli chcesz umieścić diagram 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 aktualizować diagramy bezpośrednio na niej, dzięki czemu możesz dalej iterować między swoją bazą kodu a Miro. Kiedy asystent edytuje diagram, może dodać legendę wskazującą, co zostało dodane, usunięte lub zmienione.
UWAGA: W planach Enterprise administrator firmy musi włączyć Miro MCP, zanim użytkownicy będą mogli się połączyć. Zobacz przewodnik administratora Miro MCP Server.
Rozpocznij od formatu Diagram
- On a Miro board, open the pasek tworzenia and select Formaty > Diagram.
- Kliknij Rozpocznij 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.
Więcej informacji o formacie Diagram, trybie skupienia, warstwach i szablonach znajdziesz w diagramach Miro.
Edycja diagramu Mermaid
Możesz edytować diagram za pomocą AI, wizualnie na tablicy lub w źródle Mermaid. Zmiany pozostają zsynchronizowane.
Edytuj wizualnie
- Otwórz diagram w trybie skupienia.
- Dodaj lub usuń kształty i łączniki tak jak w każdym diagramie Miro.
- Zmień układ: od góry do dołu, od lewej do prawej.
- Otwórz panel kodu, aby potwierdzić, że składnia Mermaid została zaktualizowana.
Edytuj kod
- Otwórz diagram w trybie skupienia.
- Otwórz panel z kodem.
- Zaktualizuj składnię Mermaid.
Diagram jest ponownie renderowany podczas edycji.
Edytuj z pomocą AI
- Skopiuj link do widżetu diagramu.
- Otwórz wybranego asystenta, upewniając się, że Miro MCP jest uwierzytelnione.
- Poproś asystenta o wprowadzenie zmian, wklejając link do widżetu diagramu, który ma edytować.
Diagram jest ponownie renderowany w miejscu podczas 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.
Dodatkowe możliwości edycji
Jeśli potrzebujesz więcej kształtów lub chcesz je swobodnie przesuwać, użyj jednego z punktów wejścia w panelu kształtów lub w panelu układu, aby przełączyć diagram na tryb swobodny.
Ostrzeżenie: Po przełączeniu diagramu na tryb swobodny przestaje on być synchronizowany z kodem Mermaid i nie można go już edytować za pomocą MCP.
Obsługiwane typy diagramów
Diagramy przepływu wyświetlane są jako natywne kształty Miro. Kolejne typy diagramów Mermaid są dodawane stopniowo:
- Diagramy przepływu: Są renderowane jako natywne, edytowalne kształty Miro.
- Diagramy sekwencji, klas i relacji encji: Są renderowane jako natywne kształty Miro; edycja wizualna pojawi się wkrótce.
- Inne typy diagramów: Jeśli potrzebujesz typu diagramu, który nie został wymieniony powyżej, przekaż swoją opinię w tym formularzu. Możemy się skontaktować w sprawie rozmowy.
Pełną listę typów diagramów Mermaid i składnię znajdziesz w oficjalnej dokumentacji Mermaid.
Udostępnij i eksportuj
- Odczyt za pomocą Miro MCP. Poproś podłączonego asystenta, aby odczytał diagram z adresu URL tablicy, dzięki czemu będziesz mógł udokumentować go w bazie kodu, PR lub innych narzędziach. Źródło Mermaid pozostaje dostępne, umożliwiając dwukierunkowe aktualizacje.
- Udostępnij link. Skopiuj adres URL tablicy lub w menu diagramu Więcej (⋯) 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 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, miej na uwadze następujące ograniczenia:
- 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 wbudowanego automatycznego układu 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 albo za pomocą kopiuj-wklej i duplikowania.
Dodatkowe informacje
- Aby poznać składnię Mermaid, obsługiwane typy diagramów i przykłady, zobacz oficjalną dokumentację Mermaid.
- Aby dowiedzieć się o funkcjach formatu Diagram, takich jak warstwy, kontenery i tryb skupienia, zobacz diagramy Miro.
- Aby połączyć narzędzia AI z Miro, zobacz Przegląd Miro MCP Server.