> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Diagramy Mermaid

> Używaj Mermaida, aby tworzyć schematy blokowe, diagramy sekwencji, diagramy ER i inne diagramy tekstowe w Craft.

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.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=db14d9fa849df0904c0cc4c051e19905" alt="Schemat blokowy Mermaid wyrenderowany w dokumencie Craft" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png" />

## 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.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=894c6b5397d22b4673f1aecf7de6e11c" alt="Widok podzielony z podglądem diagramu u góry i edytorem kodu poniżej" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png" />

<Tabs>
  <Tab title="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ć.
  </Tab>

  <Tab title="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ć.
  </Tab>

  <Tab title="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.
  </Tab>
</Tabs>

<Tip>
  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.
</Tip>

## 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.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=f75ca4347237c5fe789fb65a48060ca2" alt="Diagram sekwencji przedstawiający przepływ dostawy jedzenia" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png" />

```
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.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=6700ddefd98c2df1c74175826f6d65e4" alt="Diagram stanu przedstawiający cykl życia zamówienia" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png" />

```
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.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-light.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=1d50b09075c75df863b7a97c39a86a9b" alt="Diagram Mermaid w jasnym motywie" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-light.png" />

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=fb81678ca8d061283a3e7afc87e4a69b" alt="Diagram Mermaid w ciemnym motywie" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png" />

## 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

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

<Info title="Poznaj składnię Mermaid">
  Mermaid to otwarty standard stosowany w wielu narzędziach. Odwiedź stronę [mermaid.js.org](https://mermaid.js.org/intro/), aby poznać pełną składnię dla każdego typu diagramu.
</Info>