Obsługa Mermaid

Diagrammix3 obsługuje importowanie i eksportowanie diagramów przy użyciu składni Mermaid, popularnego, opartego na tekście języka do tworzenia diagramów.

Czym jest Mermaid?

Mermaid to narzędzie do tworzenia diagramów oparte na JavaScript, które używa składni podobnej do Markdown do definiowania diagramów. Jest powszechnie stosowane w dokumentacji, wiki i plikach README.

Przykładowa składnia Mermaid:

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Importowanie diagramów Mermaid

Uwaga: Import i eksport Mermaid są funkcją PRO.

Wstaw Mermaid (z podglądem i walidacją)

Najszybszym sposobem na przeniesienie Mermaid na płótno jest panel Wstaw Mermaid, który wyświetla podgląd i weryfikuje diagram zanim cokolwiek zostanie umieszczone.

1. Przejdź do Edycja → Wstaw Mermaid
2. Wklej lub wpisz składnię Mermaid w edytorze
3. W miarę pisania Diagrammix waliduje składnię, a pasek stanu pokazuje albo problem, albo Valid · N nodes, M connectors. Możesz też w dowolnym momencie kliknąć Sprawdź
4. Kliknij Zastosuj, aby umieścić diagram, lub Anuluj, aby odrzucić. Zastosuj umieszcza tylko diagram, który jest poprawny

Wklejanie Mermaid ze schowka przechodzi przez tę samą walidację, więc niepoprawna składnia nigdy nie generuje uszkodzonego diagramu.

Uwaga: Mermaid importuje się przez wklejanie lub wpisywanie w panelu Wstaw Mermaid — nie ma osobnego polecenia „importuj plik”. Aby przenieść plik .mmd, otwórz go w dowolnym edytorze tekstu i wklej jego zawartość.

Obsługiwane typy diagramów

Diagrammix rozpoznaje szeroką gamę typów diagramów Mermaid, w tym:

Pozostałe typy Mermaid (oś czasu, user journey, quadrant, wykres XY, Sankey, graf Git i inne) są rozpoznawane i importowane, ale renderują się jako ogólny graf węzłów i łączników, a nie wyspecjalizowany układ. Użyj Sprawdź, aby przed zastosowaniem zweryfikować liczbę węzłów i łączników.

Składnia diagramu stanów

Diagramy stanów modelują stany, w jakich może znajdować się obiekt, oraz przejścia między stanami.

Podstawowy diagram stanów:

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

Stany i przejścia:

• [*] reprezentuje stany początkowe i końcowe
• --> tworzy strzałkę przejścia
• : etykieta dodaje etykiety przejść
• Zagnieżdżone stany używają wcięć

Stany złożone:

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

Wynik: diagram maszyny stanowej z właściwymi kształtami stanów i oznaczonymi przejściami.

Przykłady importu

Schemat blokowy

Wejście Mermaid:

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Wynik: schemat blokowy od góry do dołu z kształtami prostokąta, zaokrąglonego prostokąta i rombu, połączonymi oznaczonymi strzałkami.

Diagram sekwencji

Wejście Mermaid:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

Wynik: diagram sekwencji z dwoma uczestnikami i strzałkami wiadomości.

Diagram klas

Wejście Mermaid:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

Wynik: diagram klas UML z relacjami dziedziczenia.

Eksportowanie do Mermaid

Kopiuj Mermaid

Diagrammix eksportuje do Mermaid przez schowek — nie ma osobnego polecenia „eksportuj do pliku”.

1. Zaznacz kształty, które chcesz wyeksportować, lub nie zaznaczaj niczego, aby wyeksportować całe płótno
2. Przejdź do Edycja → Kopiuj Mermaid
3. Wklej składnię Mermaid tam, gdzie jej potrzebujesz (a następnie zapisz ją jako plik .mmd, jeśli chcesz)

Eksport dostosowuje się do tego, co znajduje się w zakresie: mapa myśli jest kopiowana jako składnia mindmap, a strona diagramu klas lub sekwencji UML jako classDiagram / sequenceDiagram; wszystko inne jest eksportowane jako flowchart.

Kontynuacja edycji w Mermaid (pełny obieg)

Zaimportowane diagramy Mermaid zachowują swoje źródło, więc możesz nadal pracować w notacji Mermaid, zamiast edytować kształty jeden po jednym.

1. Zaznacz zaimportowany diagram Mermaid
2. Kliknij przycisk </> (Edytuj źródło Mermaid) na diagramie
3. Otwiera się panel Edytuj źródło Mermaid z wstępnie wypełnionym oryginalnym tekstem Mermaid
4. Edytuj tekst i kliknij Renderuj ponownie, aby zaktualizować diagram w miejscu

Jeśli od czasu importu zmieniłeś diagram na płótnie, panel wymienia te zmiany w sekcji Edycje na płótnie, które nie zostaną zachowane, dzięki czemu możesz zdecydować przed ponownym renderowaniem.

Edytowanie jako natywne obiekty

Możesz również edytować zaimportowany diagram bezpośrednio jako natywne obiekty Diagrammix:

• Przenoś i zmieniaj rozmiar kształtów swobodnie
• Zmieniaj style za pomocą Inspektora (kolory, czcionki, style linii)
• Dodawaj nowe elementy za pomocą narzędzi Diagrammix
• Modyfikuj połączenia, przeciągając punkty końcowe
• Stosuj automatyczny układ, aby reorganizować diagram

Wskazówka: Zdecyduj z góry, jak chcesz utrzymywać diagram. Użyj edytora źródła </>, aby pozostać przy notacji Mermaid, albo edytuj kształty bezpośrednio dla jednorazowego dopracowania wizualnego. Intensywne ręczne edycje mogą odbiegać od tego, co dałoby ponowne wyrenderowanie źródła.

Ograniczenia

• Złożona stylizacja: dyrektywy stylizacji Mermaid mogą nie przetłumaczyć się w pełni
• Podgrafy: konwertowane na pogrupowane kształty
• Zaawansowane funkcje: niektóre funkcje specyficzne dla Mermaid (jak obsługa kliknięć) są ignorowane
• Pełny obieg: eksportowanie diagramu, który intensywnie edytowałeś ręcznie, może nie odtworzyć identycznej składni Mermaid — do pełnych obiegów preferuj edytor źródła </>

Wskazówki

1. Uporządkuj po imporcie: użyj automatycznego układu, aby uporządkować zaimportowane diagramy
2. Sprawdź relacje: zweryfikuj, czy typy relacji zaimportowały się poprawnie
3. Stylizuj spójnie: stosuj style Diagrammix dla dopracowanego wyglądu
4. Zachowaj źródło: zapisuj oryginalne pliki Mermaid do kontroli wersji