Echtes, einsatzbereites Mermaid für jeden gängigen Diagrammtyp. Jedes rendert live unten — öffnen Sie ein beliebiges im Editor, um es anzupassen, oder kopieren Sie den Quelltext direkt in Ihre Dokumentation. Es wird nichts hochgeladen.
Kästchen für Schritte, Rauten für Entscheidungen, beschriftete Pfeile für Verzweigungen — das alltägliche Prozessdiagramm.
flowchart TD
Start([User visits app]) --> A{Logged in?}
A -->|Yes| Home[Show dashboard]
A -->|No| Login[Show login form]
Login --> B{Credentials valid?}
B -->|No| Err[Show error] --> Login
B -->|Yes| Token[Issue session token] --> HomeWer ruft was auf, in welcher Reihenfolge. Durchgezogene Pfeile sind Anfragen, gestrichelte Pfeile sind Antworten — ideal für API- und Auth-Abläufe.
sequenceDiagram
participant C as Client
participant API
participant DB as Database
C->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order_id
API-->>C: 201 CreatedModellieren Sie eine Datenbank mit Krähenfuß-Kardinalität. Lesen Sie „ein Benutzer schreibt viele Beiträge" direkt von der Seite ab.
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
POST }o--o{ TAG : "tagged with"Klassen, Felder, Methoden und Beziehungen. „<|--" ist Vererbung; Sichtbarkeitsmarker (+/-) zeigen die Schnittstelle.
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- CatDie Zustände, die ein Objekt einnehmen kann, und die Ereignisse, die es zwischen ihnen bewegen — Bestelllebenszyklen, Freigabeabläufe, Protokolle.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted: submit
Submitted --> UnderReview: assigned
UnderReview --> Approved: approve
UnderReview --> Rejected: reject
Rejected --> Draft: revise
Approved --> [*]Eine datierte Zeitleiste aus ein paar Zeilen Text. Geben Sie an, dass eine Aufgabe „after" einer anderen beginnt, und das Diagramm verkettet sie für Sie.
gantt
title Sprint 24
dateFormat YYYY-MM-DD
section Dev
Feature A :a, 2026-02-02, 5d
Feature B :b, after a, 4d
section QA
Test pass :after b, 3dReine Einrückung: Die am wenigsten eingerückte Zeile ist das Zentrum, jede tiefere Ebene ist ein Zweig. Brainstorming in reinem Text.
mindmap
root((Blog ideas))
Tutorials
Mermaid tips
Git workflows
Opinion
Tooling rants
Lists
Best CLIsJedes Beispiel hier ist reiner Mermaid-Text — dieselbe Syntax, die GitHub, GitLab und Obsidian nativ rendern. Öffnen Sie eines im Editor, benennen Sie die Knoten nach Ihren eigenen um und exportieren Sie als SVG oder PNG.
Siehe auch: Mermaid-Editor · In GitHub einbinden · Mermaid vs PlantUML
Ja. Kopieren, bearbeiten und verwenden Sie jedes Beispiel frei — es ist keine Anmeldung, kein Konto und keine Namensnennung erforderlich. Die Diagramme werden in Ihrem Browser gerendert, sodass nichts hochgeladen wird.
Klicken Sie bei einem beliebigen Beispiel auf „Im Editor öffnen". Es lädt den exakten Mermaid-Quelltext in den Live-Editor, wo Sie ihn ändern, sofort neu rendern lassen und als SVG oder PNG exportieren können.
Ja. Kopieren Sie den Quelltext und fügen Sie ihn in einen umschlossenen ```mermaid Codeblock in einer README, einem Issue oder einem Pull Request ein — GitHub und GitLab rendern Mermaid nativ, ohne dass ein Bild nötig ist.
Flussdiagramm, Sequenzdiagramm, ER (Datenbank), UML-Klassendiagramm, Zustandsdiagramm, Gantt und Mindmap. Es sind allesamt standardmäßige Mermaid-Diagrammtypen, und jeder verlinkt auf einen eigenen Generator mit weiteren Beispielen und einem Syntax-Spickzettel.
Ja — öffnen Sie ein beliebiges Beispiel im Editor und verwenden Sie dann die SVG- oder PNG-Exportschaltflächen. SVG bleibt in jeder Größe gestochen scharf; PNG ist praktisch für Folien und Dokumente.