Zum Hauptinhalt springen

Mermaid

👉 Docusaurus unterstützt 👉 Mermaid Diagramme in Markdown Dateien.

👉 Live Editor

Beispiele​

Beispiele von 👉 https://docs.mermaidchart.com

Graph​

```mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```
http://localhost:3000

Pie Chart​

```mermaid
pie title NETFLIX
    "Time spent looking for movie" : 90
    "Time spent watching it" : 10
```
http://localhost:3000

Sequence Diagram​

```mermaid
sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end
```
oder

```mermaid
sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Alice: private Farbe mischen
    Bob->>Bob: private Farbe mischen
    Alice->>Bob: Gemeinsame Farbe
    Alice->>Bob: privat + gemeinsam
    Bob->>Alice: privat + gemeinsam
    Bob->>Bob: erhalten + privat
    Alice->>Alice: erhalten + privat
```
http://localhost:3000

Git Graph​

```mermaid
gitGraph:
    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit
```
http://localhost:3000

### State Diagram

```mermaid
---
title: Simple sample
---
stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```
http://localhost:3000

Gantt Chart​


```mermaid
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```
http://localhost:3000
CC 4.0