Basic release timeline
Start with timeline, add a title, then put each label before a colon and its event after it.
timeline
title Release milestones
January : Plan the release
February : Build the prototype
March : Launch the betaMermaid Timeline Editor
Build a Mermaid timeline from text. Edit the example below, preview your changes, or start with a worked example for your own milestones.
Browse timeline examples ↓Unsaved
Mermaid timeline examples
Copy a complete example or open it in the editor to change the labels and events. These examples use horizontal timelines supported by this editor.
Sections and multiple events
Use section to group phases. A line starting with a colon adds another event to the previous label; you can also separate events with colons on one line.
timeline
title Product launch
section Prepare
Week 1 : Interview customers
: Define the scope
Week 2 : Build prototype : Review feedback
section Launch
Week 3 : Open the beta
Week 4 : Public releaseText labels and source order
Labels can be words, years, or ranges. Mermaid keeps the order you write: this example shows a future goal before a look back. Reorder the lines yourself for chronological order.
timeline
title Planning notes
Next year : Expand the product
Last year : Validate the idea
Today : Review progressWhat is a Timeline Diagram?
A Mermaid timeline pairs text labels with events along an axis. Labels can be dates, periods, or words such as Before and After. Entries appear in source order: Mermaid does not parse or sort dates, and spacing does not represent elapsed time. Use it for milestones, roadmaps, or event sequences; use a Gantt chart when task durations and dependencies matter.
Common Use Cases
- •Project milestones - Show key dates and deliverables on a timeline
- •Company history - Visualize organizational milestones and achievements
- •Product roadmap - Plan and communicate feature release schedules
- •Historical events - Create visual history for education or documentation
- •Incident timeline - Document event sequences for post-mortems
Syntax Quick Reference
| Element | Syntax | Description |
|---|---|---|
| Start | timeline | Declare a timeline diagram |
| Title | title Timeline Title | Timeline heading |
| Event | 2024 : Event description | Text label followed by an event |
| Multiple events | : Second event | Additional event under the previous label |
| Section | section Period Name | Group events by period |
Export Options
Export your timeline as PNG, SVG, or PDF. Free exports include a watermark and limits may apply; check the export dialog for available settings.
PNG Export
High-resolution images for documents and presentations.
SVG Export
Scalable vectors for web and further editing.
PDF Export
Print-ready format for professional documentation.
Got Mermaid code from ChatGPT? Paste it here to render and export instantly.
Get the Free Mermaid Syntax Cheat Sheet
Free Mermaid Syntax Cheat Sheet
All 21 diagram types in one PDF reference.
Frequently Asked Questions
Ready to create your own timeline diagram?
Open the editor with this example pre-loaded and start customizing.