Tworzenie diagramów Mermaid

Kto może to zrobić: Wszyscy użytkownicy
Które 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. Mermaid pozostaje źródłem prawdy, więc możesz przenosić diagramy między Miro, swoją bazą kodu i narzędziami AI bez utraty struktury.

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

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

• Zgodne z resztą przepływu pracy Mermaid. Używaj tej samej składni Mermaid, której już używasz w dokumentach, PR-ach i czatach AI. Z Miro MCP agenci mogą tworzyć, odczytywać, aktualizować i edytować diagramy Mermaid na tablicach.
• Renderowane jako kształty Miro. Kod Mermaid zamienia się w Diagram zbudowany z edytowalnych kształtów i łączników Miro, rozmieszczony automatycznie przez Miro – nie jest to statyczny obraz.
• Edycja dwukierunkowa. Zmieniaj diagram wizualnie na tablicy, a kod Mermaid się zaktualizuje. Edytuj kod, a diagram zostanie przerysowany.
• Stworzony do współpracy. Ponieważ diagramy są natywną zawartością Miro, zespół może komentować, współedytować i wspólnie iterować na tej samej tablicy w czasie rzeczywistym.

Utwórz diagram Mermaid

Możesz dodać diagramy Mermaid na trzy sposoby.

Wklej kod Mermaid na tablicę

1. Skopiuj kod Mermaid z edytora, dokumentów lub czatu z AI.
2. Wklej go na tablicę w Miro.
   Miro przekształci kod w diagram złożony z edytowalnych kształtów Miro.

Utwórz diagram za pomocą Miro MCP

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

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

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

Uwaga: W abonamencie 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 swój kod Mermaid do panelu kodu lub wybierz szablon Mermaid.
   Diagram zostanie zamieniony na kształty Miro.
4. Kontynuuj edycję w trybie skupienia lub na planszy.

Aby uzyskać więcej informacji o formacie diagramu, trybie skupienia, warstwach i szablonach, zobacz diagramy Miro.

Edytuj diagram Mermaid

Możesz edytować diagram wizualnie na tablicy, w kodzie źródłowym Mermaid lub korzystając z AI. Zmiany pozostają zsynchronizowane.

Edytuj wizualnie

1. Otwórz diagram w trybie skupienia.
2. Wybierz kształt, linię lub etykietę tekstową, aby edytować ją bezpośrednio na diagramie. Otworzy się pasek narzędzi z kontrolkami dla wybranego elementu – na przykład zmień typ kształtu, edytuj tekst, dopasuj rozmiar czcionki, zastosuj pogrubienie lub ustaw kolor tekstu, obramowania i wypełnienia.
   
3. Ustaw kierunek układu. Kliknij kontrolkę kierunku na pasku narzędzi Diagramu i wybierz od góry do dołu, od dołu do góry, od lewej do prawej, lub od prawej do lewej.
   
4. Dopasuj odstępy. Otwórz kontrolkę układu i wybierz Wąski dla bardziej zwartego układu, Standardowy dla zrównoważonych odstępów albo Szeroki dla luźniejszego układu, który łatwiej przeskanować.
   
5. Otwórz panel z kodem, aby potwierdzić, że składnia Mermaid została zaktualizowana odpowiednio.

Edytuj kod

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

Kliknij ikonę ustawień (koło zębate) w panelu z kodem, aby dostosować sposób wyświetlania kodu w edytorze:

• Numery linii: Pokaż lub ukryj numery linii w edytorze.
• Zawijanie tekstu: Zawijaj długie linie tak, aby dopasować je do szerokości panelu zamiast przewijać poziomo.

Edytuj z pomocą AI

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

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 swobodnie przesuwać kształty, przełącz diagram na swobodną edycję. Możesz to zrobić z panelu kształtów, z panelu układu lub próbując przesunąć kształt na diagramie.

1. Spróbuj przesunąć kształt albo wybierz Przełącz na swobodną edycję w panelu kształtów lub w 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 potem przełącz: Zachowaj obecną wersję Mermaid i konwertuj kopię na swobodną edycję.

Ostrzeżenie: Po przełączeniu diagramu na swobodną edycję nie będzie już zsynchronizowany z kodem Mermaid i nie będzie go można edytować za pomocą MCP.

Obsługiwane typy diagramów

Schematy blokowe są wyświetlane jako natywne kształty Miro. Dodatkowe typy diagramów Mermaid są dodawane stopniowo:

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

Pełną listę typów diagramów Mermaid oraz składnię znajdziesz w oficjalnej dokumentacji Mermaid.

Udostępnij i eksportuj

• Odczytaj przy pomocy Miro MCP. Poproś podłączonego agenta, aby odczytał diagram z adresu URL tablicy, dzięki czemu udokumentujesz go w bazie kodu, PR lub innych narzędziach. Źródło Mermaid pozostaje dostępne do synchronizacji w obie strony.
• Udostępnij link. Skopiuj adres URL tablicy albo z 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. Z menu diagramu Więcej (⋯) wybierz Eksportuj jako PDF lub Eksportuj jako obraz (JPG, SVG albo PDF). Możesz też skopiować diagram jako obraz z tablicy.

Znane ograniczenia

Miej na uwadze te aktualne 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 natywnego automatycznego układu Miro. Nie można swobodnie przesuwać kształtów na diagramie Mermaid.

Na bieżąco rozpatrujemy prośby o funkcje, więc jeśli któreś z tych ograniczeń stanowi dla ciebie przeszkodę, skontaktuj się z nami przez społeczność lub swojego administratora.

Dodatkowe informacje

• Zobacz składnię Mermaid, obsługiwane typy diagramów i przykłady w oficjalnej dokumentacji Mermaid.
• Funkcje formatu Diagram, takie jak warstwy, kontenery i tryb skupienia, znajdziesz w diagramach Miro.
• W sprawie łączenia narzędzi AI z Miro zobacz przegląd serwera Miro MCP.