Obsługa Mermaid

Diagrammix3 obsługuje importowanie i eksportowanie diagramów przy użyciu składni Mermaid — popularnego tekstowego języka opisywania diagramów.

Czym jest Mermaid?

Mermaid to oparte na JavaScript narzędzie do tworzenia diagramów, które wykorzystuje składnię podobną do Markdown do definiowania diagramów. Jest powszechnie używany 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

Ze schowka

1. Skopiuj składnię Mermaid do schowka
2. W Diagrammix3 przejdź do File → Import → Mermaid from Clipboard
3. Diagram zostanie utworzony na obszarze roboczym

Z pliku

1. Przejdź do File → Import → Mermaid File...
2. Wybierz plik .mmd lub .mermaid
3. Diagram zostanie zaimportowany na obszar roboczy

Obsługiwane typy diagramó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ść
• Stany zagnieżdżone używają wcięć

Stany złożone:

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

Wynik: Diagram maszyny stanowej z prawidłowymi kształtami stanów i oznaczonymi przejściami.

Przykłady importu

Schemat blokowy

Dane wejściowe 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 z góry na dół z prostokątami, zaokrąglonymi prostokątami i rombami połączonymi oznaczonymi strzałkami.

Diagram sekwencji

Dane wejściowe 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 komunikatów.

Diagram klas

Dane wejściowe Mermaid:

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

Wynik: Diagram klas UML z relacjami dziedziczenia.

Eksport do Mermaid

Eksport bieżącego diagramu

1. Przejdź do File → Export → Mermaid...
2. Wybierz lokalizację zapisu
3. Diagram zostanie wyeksportowany jako plik .mmd

Kopiuj jako Mermaid

1. Zaznacz kształty, które chcesz wyeksportować (lub zaznacz wszystkie za pomocą Cmd+A)
2. Przejdź do Edit → Copy as Mermaid
3. Wklej składnię Mermaid tam, gdzie jej potrzebujesz

Edycja zaimportowanych diagramów

Po zaimportowaniu diagramy Mermaid stają się natywnymi obiektami Diagrammix. Możesz:

• Przesuwać i zmieniać rozmiar kształtów dowolnie
• Zmieniać style za pomocą Inspektora (kolory, czcionki, style linii)
• Dodawać nowe elementy za pomocą narzędzi Diagrammix
• Modyfikować połączenia przez przeciąganie punktów końcowych
• Stosować automatyczny układ do reorganizacji diagramu

Połączenie z oryginalnym źródłem Mermaid nie jest utrzymywane — zmiany są wprowadzane bezpośrednio w obiektach diagramu.

Ograniczenia

• Złożone style: Dyrektywy stylowania Mermaid mogą nie zostać w pełni przetłumaczone
• Podgrafy: Konwertowane na zgrupowane kształty
• Zaawansowane funkcje: Niektóre funkcje specyficzne dla Mermaid (jak obsługa kliknięć) są ignorowane
• Podróż w obie strony: Eksport zaimportowanego diagramu może nie wygenerować identycznej składni Mermaid

Wskazówki

1. Uporządkuj po imporcie: Użyj automatycznego układu do organizacji zaimportowanych diagramów
2. Sprawdź relacje: Zweryfikuj, czy typy relacji zostały prawidłowo zaimportowane
3. Stylizuj spójnie: Zastosuj style Diagrammix dla dopracowanego wyglądu
4. Zachowaj źródło: Zapisz oryginalne pliki Mermaid do kontroli wersji