Wie füge ich mehrere Ereignisse für denselben Zeitraum in eine Mermaid-Timeline ein?

Platzieren Sie zusätzliche Ereignisse auf eingerückten Zeilen direkt unter dem Zeitlabel, beginnend mit `:`. Beispiel: `2023 : ChatGPT veröffentlicht GPT-4 \n : Anthropic startet Claude 2 \n : Google veröffentlicht Gemini`. Jede Zeile `: Ereignis` wird als separate Ereignisbox unter dem Zeitmarker `2023` gerendert. Dies ist nützlich für Jahre mit mehreren bedeutenden Meilensteinen.

Wie gruppiere ich Timeline-Ereignisse in Abschnitte?

Verwenden Sie `section Abschnittsname` vor einer Gruppe von Zeitperioden. Abschnitte trennen die Timeline visuell in beschriftete Phasen – zum Beispiel `section Entwicklungsphase`, gefolgt von Jahresangaben, dann `section Einführungsphase` für die nächste Gruppe. Abschnitte werden als farbige Hintergrundbänder dargestellt, die den Lesern helfen, lange Timelines mit unterschiedlichen Phasen zu navigieren.

Was ist der Unterschied zwischen einer Mermaid-Timeline und einem Gantt-Diagramm?

Eine Mermaid-Timeline ist für die Anzeige von Ereigniszeitpunkten optimiert – sie akzeptiert Textbeschriftungen und Daten ohne genaue Dauer- oder Abhängigkeitsinformationen. Ein Gantt-Diagramm eignet sich besser für die Planung – es zeigt Aufgaben mit genauen Startdaten, Dauern und Abhängigkeiten. Verwenden Sie eine Timeline für Retrospektiven, historische Darstellungen und Roadmap-Übersichten; verwenden Sie ein Gantt-Diagramm für Sprintplanung, Ressourcenzuweisung und Zeitplanung.

Ist der Mermaid-Timeline-Diagrammtyp auf GitHub und GitLab verfügbar?

GitHub hat das native Mermaid-Rendering 2022 hinzugefügt, und GitLab unterstützt es seit 2019. Der `timeline`-Diagrammtyp erfordert jedoch Mermaid v9.4 oder höher. Wenn Sie auf GitHub oder GitLab einen Parsing-Fehler für eine Timeline sehen, verwendet die Plattform möglicherweise eine ältere gebündelte Version von Mermaid. Zolkit verwendet immer die neueste Mermaid-Version, sodass Timeline-Diagramme hier unabhängig von der Plattformkompatibilität vollständig unterstützt werden.

Mermaid Timeline Diagramm-Viewer

Mermaid Timeline-Diagramme im Browser rendern. Visualisieren Sie historische Ereignisse, Produkt-Roadmaps und Meilensteine. Exportieren Sie als SVG oder PNG.

Mermaid-Code

Vorschau

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

Timeline-Diagramme visualisieren Ereignisse in chronologischer Reihenfolge und eignen sich daher ideal für Produkt-Roadmaps, historische Erzählungen, Geschichten über die Entwicklung von Technologien und Projekt-Retrospektiven. Der Mermaid-Diagrammtyp `timeline` – eingeführt in v9.4 – bietet ein klares, lesbares Format, um festzuhalten, was wann geschah, ohne die Komplexität eines vollständigen Gantt-Diagramms. KI-Assistenten verwenden Mermaid-Timelines, wenn sie gebeten werden, historische Entwicklungen zusammenzufassen („Zeige die Geschichte von JavaScript-Frameworks“), die Produktentwicklung darzustellen („Erstelle eine Zeitleiste unserer Produktmeilensteine von 2020 bis heute“) oder eine Release-Roadmap zu skizzieren („Erstelle eine Zeitleiste für unseren Produktplan Q1–Q4 2025“). Das Einfügen des generierten Codes in Zolkit rendert die Timeline sofort, sodass Sie überprüfen können, ob die Ereignisse korrekt, gut beschriftet und angemessen beabstandet sind, bevor Sie sie in eine Präsentation oder ein Dokument aufnehmen. Der Timeline-Viewer von Zolkit unterstützt mehrere Ereignisse pro Zeitperiode (dargestellt als gestapelte Boxen unter demselben Zeitlabel), Abschnitts-Gruppierung zur Organisation von Phasen und die volle Bandbreite des Mermaid-Timeline-Stylings. Das exportierte SVG- oder PNG-Format eignet sich für Pitch-Decks, Unternehmensgeschichtsseiten, Folien für technische All-Hands-Meetings und Jahresberichte.

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.