Diagramy Mermaid

Twórz schematy blokowe, diagramy sekwencji, diagramy stanów i wiele więcej przy użyciu prostej składni tekstowej Mermaid.

Craft obsługuje diagramy Mermaid — sposób na tworzenie wizualnych diagramów poprzez pisanie prostej składni tekstowej. Wpisz kilka linii kodu, a Craft wyrenderuje ostry, czytelny diagram bezpośrednio w Twoim dokumencie.

Diagramy aktualizują się na żywo podczas pisania, działają na wszystkich platformach i są wyświetlane na udostępnionych oraz opublikowanych stronach.

​

Wstawianie diagramu Mermaid

Dodaj diagram Mermaid jedną z następujących metod:

• Wpisz /mermaid i wybierz Diagram Mermaid
• Wybierz Diagram Mermaid z panelu Wstaw na pasku bocznym (w sekcji Bloki rozszerzone)
• Wklej markdown zawierający ogrodzenie kodu ```mermaid — Craft przekonwertuje go automatycznie

​

Edytowanie

Po otwarciu bloku Mermaid wyświetla się widok podzielony — wyrenderowany diagram u góry, a kod poniżej. Podgląd aktualizuje się na żywo podczas pisania.

macOS

Kliknij blok Mermaid, aby otworzyć go w widoku podzielonym. Podgląd diagramu pojawia się u góry, a edytor kodu poniżej. Kliknij dwukrotnie podgląd, aby powiększyć.

iOS / iPad

Dotknij bloku, aby otworzyć edytor kodu z podglądem na żywo u góry. Na iPhonie ukryj klawiaturę, aby zobaczyć diagram. Dotknij dwukrotnie podglądu, aby powiększyć.

Web / Windows

Kliknij blok, aby go edytować. Użyj menu trybu widoku w menu kontekstowym bloku, aby przełączać się między trybem Edycji, Podglądu i Widoku podzielonego.

Nie musisz znać składni Mermaid na pamięć — Asystent AI Craft może generować diagramy za Ciebie. Wystarczy opisać, czego potrzebujesz, a on napisze kod.

​

Obsługiwane typy diagramów

​

Schematy blokowe

Przedstawiaj procesy, decyzje i przepływy pracy. Użyj graph TD dla układu z góry na dół lub graph LR dla układu od lewej do prawej.

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E

​

Diagramy sekwencji

Pokazuj interakcje między ludźmi lub systemami w czasie.

sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed

​

Diagramy stanów

Wizualizuj przejścia między stanami — idealne do śledzenia zamówień, przepływów pracy lub procesów.

stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]

​

Diagramy klas

Pokazuj strukturę systemu — jakie elementy istnieją, ich właściwości i relacje między nimi.

classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains

​

Diagramy ER

Modeluj relacje między danymi — świetne do projektowania baz danych i planowania.

erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has

​

Wykresy

Twórz wykresy słupkowe, liniowe lub ich kombinacje.

xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]

​

Zmiana motywu

Diagramy Mermaid dostosowują się do motywu edytora kodu. Aby zmienić wygląd, dotknij ikony pędzla na pasku narzędzi i wybierz motyw — dostępne opcje to m.in. Tokyo Night, Dracula, Nord, GitHub i inne.

Diagram zaktualizuje się natychmiast. Diagramy uwzględniają również jasny lub ciemny tryb Twojego dokumentu.

​

Udostępnianie i publikowanie

Diagramy Mermaid są wyświetlane na udostępnionych i opublikowanych stronach — każda osoba przeglądająca link widzi wyrenderowany diagram, a nie kod. Nie jest wymagana żadna dodatkowa konfiguracja.

​

Import i eksport

• Import z Markdown: Wklej lub zaimportuj markdown z ogrodzeniami kodu ```mermaid, a Craft automatycznie utworzy bloki Mermaid.
• Eksport do Markdown: Bloki Mermaid są eksportowane jako standardowe ogrodzenia kodu ```mermaid, kompatybilne z innymi narzędziami.

​

Wskazówki

Co zrobić, gdy diagram wyświetla komunikat „Invalid Mermaid diagram'?

Zwykle oznacza to błąd składni w kodzie. Sprawdź literówki lub brakujące strzałki. Jeśli kopiujesz składnię z innego narzędzia, pamiętaj, że Craft obsługuje schematy blokowe, diagramy sekwencji, diagramy stanów, diagramy klas, diagramy ER oraz wykresy XY — inne typy, takie jak wykresy kołowe, wykresy Gantta czy mapy myśli, nie są obecnie obsługiwane.

Czy Asystent AI może pomóc w tworzeniu diagramów Mermaid?

Tak. Opisz diagram, który chcesz utworzyć, a Asystent AI Craft wygeneruje dla Ciebie kod Mermaid. Możesz też poprosić go o modyfikację lub rozszerzenie istniejącego diagramu.

Czy mogę powiększyć duży diagram?

Na Macu i iPadzie kliknij dwukrotnie podgląd diagramu, aby go powiększyć. W przeglądarce użyj widoku pełnoekranowego dla większych diagramów.

Mermaid to otwarty standard stosowany w wielu narzędziach. Odwiedź stronę mermaid.js.org, aby poznać pełną składnię dla każdego typu diagramu.