Mermaid w Quartz

Mermaid pozwala dodawać diagramy bezpośrednio w Markdown przez blok kodu oznaczony jako mermaid.

Najprostszy diagram

Kod

```mermaid
flowchart LR
    A[Start] --> B[Edycja notatki]
    B --> C[Podgląd localhost]
    C --> D[Commit]
    D --> E[Push na GitHub]
```

Wynik

flowchart LR
    A[Start] --> B[Edycja notatki]
    B --> C[Podgląd localhost]
    C --> D[Commit]
    D --> E[Push na GitHub]

Diagram sekwencji

Kod

```mermaid
sequenceDiagram
    participant U as Użytkownik
    participant V as VS Code
    participant Q as Quartz
    participant G as GitHub
 
    U->>V: Edytuje notatkę
    V->>Q: Zapis pliku
    Q->>U: Podgląd localhost
    U->>G: Push zmian
```

Wynik

sequenceDiagram
    participant U as Użytkownik
    participant V as VS Code
    participant Q as Quartz
    participant G as GitHub

    U->>V: Edytuje notatkę
    V->>Q: Zapis pliku
    Q->>U: Podgląd localhost
    U->>G: Push zmian

Zasada

Kod Mermaid wpisuję zawsze między potrójne backticki i poprzedzam słowem mermaid. Jeśli chcę pokazać sam kod jako przykład, zamykam go w osobnym bloku z czterema backtickami, a niżej dodaję właściwy blok renderujący diagram. [web:675][web:673]

Najkrótszy wzór

Kod

```mermaid
flowchart TD
    A --> B
```

Wynik

flowchart TD
    A --> B