Wie füge ich Commit-IDs und Tags zu einem Mermaid-Git-Graphen hinzu?

Verwenden Sie `commit id: "commit-message"`, um einem Commit eine Beschriftung hinzuzufügen, und `commit id: "v1.0" tag: "v1.0.0"`, um einen Versions-Tag anzuhängen. Tags werden als kleine Abzeichen auf dem Commit-Knoten gerendert, wodurch Release-Punkte sofort sichtbar werden. Commit-IDs können auch als Referenzen für Cherry-Pick-Operationen verwendet werden: `cherry-pick id: "commit-id"`.

Wie merget man Branches in einem Mermaid-Git-Graphen?

Nachdem Sie einen Branch erstellt und mit Commits gefüllt haben, checken Sie den Zielbranch aus und verwenden Sie `merge branchName`. Beispiel: `checkout main` dann `merge develop`. Sie können dem Merge-Commit `id` und `tag` hinzufügen: `merge feature/auth id: "Merge auth" tag: "v2.0"`. Mermaid rendert den Merge als Verbindungslinie zwischen den beiden Branch-Spuren.

Kann ich die Ausrichtung des Git-Graphen ändern?

Ja. Fügen Sie `LR` nach `gitGraph` für ein Left-to-Right-Layout hinzu: `gitGraph LR:`. Die Standardeinstellung ist Left-to-Right. Für Dokumentationen, die vertikal gelesen werden (wie ein README, das auf Mobilgeräten gerendert wird), können Sie mit `TB` (Top-to-Bottom) experimentieren, obwohl LR die konventionelle Richtung für die Visualisierung der Git-Historie ist.

Was ist der Unterschied zwischen gitGraph und einem Sequenzdiagramm zur Dokumentation von Git-Workflows?

gitGraph ist speziell dafür konzipiert, Branching, Merging und Commit-Historie anzuzeigen – es rendert die bekannten parallelen Branch-Spuren, die Entwickler von Tools wie GitKraken oder dem Netzwerkdiagramm von GitHub kennen. Ein Sequenzdiagramm hingegen zeigt Interaktionen zwischen Akteuren über die Zeit, vermittelt aber keine Branching-Struktur. Zur Dokumentation eines Git-Workflows oder Release-Prozesses ist gitGraph immer die richtige Wahl.

Mermaid Git Graph Viewer

Mermaid gitGraph-Diagramme im Browser rendern. Git-Branch-Strategien und Commit-Historien visualisieren. Exportieren als SVG oder PNG.

Mermaid-Code

Vorschau

Geben Sie Mermaid-Code ein, um Ihr Diagramm in der Vorschau anzuzeigen

Git-Graph-Diagramme visualisieren Branching-Strategien, Merge-Muster und Commit-Historien in der Softwareentwicklung. Sie sind für die Dokumentation von Engineering-Teams von unschätzbarem Wert – sei es zur Erklärung einer Gitflow-Strategie, zur Veranschaulichung eines Feature-Branch-Workflows oder zur Darstellung, wie ein Hotfix von der Produktion zurück zur Entwicklung propagiert wird. Die `gitGraph`-Syntax von Mermaid generiert diese Visualisierungen direkt aus Text, wodurch sie sich leicht in READMEs, Onboarding-Anleitungen und Runbooks einbetten lassen. KI-Assistenten erstellen häufig Mermaid-Git-Graphen, wenn Entwickler fragen: „Zeige mir, wie Gitflow funktioniert“, „Diagrammiere die Branch-Strategie für einen Trunk-Based-Development-Workflow“ oder „Veranschauliche, wie ein Hotfix in unserem Release-Prozess gemergt würde“. Das Einfügen der Ausgabe in Zolkit rendert die Branch-Visualisierung sofort und ermöglicht es den Engineering-Leads, die korrekte Darstellung des Workflows zu überprüfen, bevor er an das Team verteilt wird. Der Git-Graph-Viewer von Zolkit unterstützt alle `gitGraph`-Konstrukte: Commit-IDs und Tags, Branch-Erstellung und -Checkout, Merge-Commits, Cherry-Pick und die `type`-Eigenschaft zum Hervorheben von Commits als HIGHLIGHT, REVERSE oder NORMAL. Mehrere Branches werden in unterschiedlichen Farben gerendert, um eine sofortige visuelle Unterscheidung zu ermöglichen.

Kostenloser Online Mermaid Diagramm-Viewer und Exporter

Der Mermaid Diagramm-Viewer von Zolkit ermöglicht es Ihnen, beliebigen Mermaid-Code einzufügen und sofort ein gerendertes Diagramm anzuzeigen – keine Installation, keine Anmeldung, kein Hochladen auf Server. Alles läuft in Ihrem Browser, was ihn zur schnellsten Methode macht, um KI-generierte Diagramme von Claude, ChatGPT oder Gemini zu überprüfen. Unterstützt alle gängigen Mermaid-Diagrammtypen: Flussdiagramme, Sequenzdiagramme, Klassendiagramme, ER-Diagramme, Gantt-Diagramme, Zustandsdiagramme, Mindmaps, Git-Graphen, Tortendiagramme und Zeitachsen.

Sofortige Live-Vorschau

Diagramme werden automatisch während der Eingabe gerendert, mit einer Verzögerung von 300 ms, sodass es sich nie träge anfühlt.

100% privat

Das gesamte Rendering findet in Ihrem Browser mit mermaid.js statt. Ihr Code wird niemals an einen Server gesendet.

SVG & PNG Export

Laden Sie Ihr Diagramm als scharfes Vektor-SVG oder als hochauflösendes 2× PNG herunter, bereit für Dokumente und Präsentationen.

Alle Mermaid Diagrammtypen

Unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme, ER-Diagramme, Gantt-Diagramme, Mindmaps, Git-Graphen und mehr.

Bereit für KI-Diagramme

Gebaut für das KI-Zeitalter – Vorschau von Diagrammen, die von Claude, ChatGPT, Gemini oder jedem LLM generiert wurden.

Immer kostenlos

Kein Konto erforderlich, keine Nutzungslimits, keine Wasserzeichen. Zolkit's Mermaid-Viewer ist für immer komplett kostenlos.

So zeigen Sie ein Mermaid-Diagramm in der Vorschau an

1
Fügen Sie Ihren Mermaid-Code in den Editor auf der linken Seite ein – Sie können ihn von einem KI-Assistenten kopieren oder manuell schreiben.
2
Das Diagramm wird sofort im Vorschaufenster auf der rechten Seite gerendert. Bei einem Syntaxfehler erklärt eine Meldung das Problem.
3
Klicken Sie auf 'SVG exportieren' oder 'PNG exportieren', um Ihr Diagramm als Datei herunterzuladen, die für Dokumentationen, Präsentationen oder zum Teilen bereit ist.