Tworzenie diagramów Mermaid (wersja beta)

Kto może to zrobić: Wszyscy użytkownicy
Dostępne w planach: 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, dzięki czemu możesz przenosić diagramy między Miro, swoją bazą kodu i narzędziami AI bez utraty struktury.

UWAGA: Diagramy Mermaid w formacie strukturalnym są w wersji beta. Obsługiwane typy diagramów i możliwości edycji są stopniowo udoskonalane, a niektóre funkcje opisane poniżej nadal są wdrażane.

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

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ż stosujesz w dokumentach, PR-ach i czatach z AI. Z 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 rozmieszczonych przez Miro — to nie statyczny obraz.
• Edycja dwukierunkowa. Zmień diagram wizualnie na tablicy, a kod Mermaid zostanie zaktualizowany. Edytuj kod, a 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ć nad tą samą tablicą 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 AI.
2. 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 zgodnego z MCP (np. Cursor lub Claude Code) podłączonego do Miro MCP Server, aby wygenerować diagram Mermaid na tablicy.

1. Połącz swoje narzędzie AI z Miro MCP.
2. Poproś asystenta o utworzenie diagramu Mermaid na określonej tablicy. Dołącz URL tablicy w prompt, gdy chcesz umieścić diagram na istniejącej tablicy.
3. Otwórz tablicę w Miro, aby przejrzeć, edytować i współpracować nad wygenerowanym diagramem.

Asystenci mogą też odczytywać kod Mermaid z tablicy i aktualizować diagramy bezpośrednio na miejscu, dzięki czemu możesz dalej iterować między swoją bazą kodu a Miro. Gdy asystent edytuje diagram, może dodać legendę, która oznacza, 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

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 do panelu z kodem lub wybierz szablon Mermaid.
   Diagram zostanie przedstawiony jako kształty Miro.
4. 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 wizualnie na tablicy, w kodzie źródłowym Mermaid lub za pomocą AI. Zmiany pozostają zsynchronizowane.

Edycja wizualna

1. Otwórz diagram w trybie skupienia.
2. Wybierz kształt, linię lub etykietę tekstową, aby edytować ją bezpośrednio na diagramie. Pasek narzędzi otworzy się z kontrolkami dla wybranego elementu — na przykład zmień typ kształtu, edytuj tekst, dostosuj 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 Z góry na dół, Z dołu do góry, Z lewej do prawej, lub Z prawej do lewej.
   
4. Dostosuj odstępy. Otwórz kontrolkę układu i wybierz Wąski dla bardziej zwartego układu, Standardowy dla zrównoważonych odstępów lub Szeroki dla bardziej przestronnego układu, który łatwiej przejrzeć.
   
5. Otwórz panel kodu, aby potwierdzić, że składnia Mermaid została zaktualizowana i odpowiada zmianom.

Edycja kodu

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

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

• Numery linii: Pokaż lub ukryj numery linii w edytorze.
• Zawijaj tekst: Zawijaj długie linie, aby dopasować je do szerokości panelu zamiast przewijania w poziomie.

Edytuj z pomocą AI

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

UWAGA: Edycja wizualna i panel kodu są dostępne tylko w trybie skupienia. Edycja w podzielonym widoku 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 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 lub wybierz Przełącz na swobodną edycję z panelu kształtów lub z 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 bieżącą wersję Mermaid i przekonwertuj kopię na swobodną edycję.

OSTRZEŻENIE: Po przełączeniu diagramu na swobodną edycję przestanie być on zsynchronizowany z kodem Mermaid i nie będzie już można go edytować za pomocą MCP.

Obsługiwane typy diagramów

Schematy blokowe są renderowane 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 swoją opinię w tym formularzu. Możemy się z Tobą skontaktować w sprawie wywiadu.

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

Udostępnij i eksportuj

• Odczytaj za pomocą Miro MCP. Poproś podłączonego asystenta o odczytanie diagramu z adresu URL tablicy, aby udokumentować 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 lub 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. 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

Ponieważ strukturalne 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 autoułożenia Miro. Aby swobodnie przesuwać kształty lub użyć układu, którego Mermaid nie obsługuje, skonwertuj diagram do trybu swobodnego.
• Przeciąganie i upuszczanie kształtów pojawi się wkrótce. Na razie dodawaj kształty przyciskiem + na kształcie albo za pomocą kopiowania/wklejania i duplikowania.

Dodatkowe informacje

• W sprawie składni Mermaid, obsługiwanych typów diagramów i przykładów zobacz oficjalną dokumentację Mermaid.
• Informacje o funkcjach formatu Diagram, takich jak warstwy, kontenery i tryb skupienia, znajdziesz w diagramach Miro.
• Aby połączyć narzędzia AI z Miro, zobacz przegląd Miro MCP Server.