Erweiterte Mermaid-Beispiele

← Zurück zu den Markdown-Beispielen

Nutze diese Vorlagen als Ausgangspunkt für eigene Diagramme.

Entscheidungsablauf

flowchart TD
    Start([Start]) --> Input[/Dateneingabe/]
    Input --> Process{Verarbeiten?}
    Process -->|Ja| Execute[Aufgabe ausführen]
    Process -->|Nein| Skip[Überspringen]
    Execute --> Check{Erfolgreich?}
    Check -->|Ja| Success[✅ Erfolg]
    Check -->|Nein| Retry{Erneut versuchen?}
    Retry -->|Ja| Execute
    Retry -->|Nein| Fail[❌ Fehler]
    Skip --> End([Ende])
    Success --> End
    Fail --> End

Zustandsdiagramm

stateDiagram-v2
    [*] --> Bereit
    Bereit --> Laden: Upload
    Laden --> Verarbeiten: Dateien geladen
    Verarbeiten --> Speichern: Geprüft
    Speichern --> Erfolg: Gespeichert
    Speichern --> Fehler: Fehlgeschlagen
    Erfolg --> Bereit: Abschließen
    Fehler --> Bereit: Wiederholen
    Fehler --> [*]: Abbrechen

Zeitleiste

timeline
    title Projektentwicklung
    section Phase 1
        Vorbereitung : Projekt konfigurieren
                     : Abhängigkeiten installieren
    section Phase 2
        IndexedDB : Datenbank implementieren
                  : Persistenz testen
    section Phase 3
        Komponenten : Komponenten erstellen
                    : Oberfläche integrieren
    section Phase 4
        Tests : Funktionstests
              : Offline-Tests
    section Phase 5
        Veröffentlichung : Produktions-Build
                         : Verteilung

Entitäts-Beziehungs-Diagramm

erDiagram
    FILE ||--o{ FOLDER : gehoert_zu
    FILE {
        int id PK
        string path
        string name
        text content
        datetime createdAt
        datetime updatedAt
    }
    FOLDER {
        int id PK
        string path
        string name
    }
    USER ||--o{ FILE : erstellt
    USER {
        int id PK
        string name
    }

Gantt-Diagramm

gantt
    title Projektzeitplan
    dateFormat YYYY-MM-DD
    section Planung
    Anforderungen definieren :a1, 2025-10-01, 3d
    Prototyp erstellen        :a2, after a1, 2d
    section Entwicklung
    Projekt vorbereiten       :b1, 2025-10-06, 1d
    IndexedDB implementieren  :b2, after b1, 2d
    Komponenten erstellen     :b3, after b2, 3d
    Oberfläche integrieren    :b4, after b3, 2d
    section Tests
    Unit-Tests                :c1, after b4, 2d
    Integrationstests         :c2, after c1, 2d
    section Veröffentlichung
    Produktions-Build         :d1, after c2, 1d
    Verteilung                :d2, after d1, 1d

Mindmap

mindmap
  root((Raziel.MD))
    Funktionen
      Upload
        Drag-and-drop
        Dateiauswahl
        Ordnerauswahl
      Lesen
        Markdown
        Mermaid-Diagramme
        Syntaxhervorhebung
      Speicherung
        IndexedDB
        Offline-Nutzung
        PWA
    Technologie
      Oberfläche
        Vue 3
        TypeScript
        TailwindCSS
      Bibliotheken
        Marked.js
        Mermaid.js
        Dexie.js
    Nutzung
      Dunkler Modus
      Suche
      Navigation
      Responsives Layout

Diagrammtypen

Mermaid bietet verschiedene Typen:

• ✅ Ablaufdiagramm
• ✅ Sequenzdiagramm
• ✅ Klassendiagramm
• ✅ Zustandsdiagramm
• ✅ Entitäts-Beziehungs-Diagramm
• ✅ Gantt-Diagramm
• ✅ Kreisdiagramm
• ✅ Git-Graph
• ✅ Zeitleiste
• ✅ Mindmap

Erstelle deine eigenen Diagramme.

Weiter entdecken

• Vollständiges Markdown-Beispiel
• Zurück zu den Markdown-Beispielen