Organize milestones, historical events, project eras, and product roadmaps with interactive timeline blocks and instant SVG preview.
Ready.
Drag to reorder or press Alt+Up/Down
Paste valid Mermaid timeline syntax here. Visual edits normalize spacing and remove comments, so copy comment-rich code before switching back to the builder.
Valid code can be edited directly and parsed into the visual builder.
Live preview
Project Timeline
Preview ready when you are.
The diagram loads when this workspace enters view or you begin editing.
Syntax Pattern
Timelines arrange chronology from a diagram header down through periods and events. Use this reference when writing syntax by hand, checking line errors, or preparing diagrams for Markdown documentation.
Copy-paste example
Indent lines beneath a period with leading whitespace and a colon.
timeline
title Incident Review
Detection : Elevated error rate
: On-call engineer paged
Recovery : Faulty release rolled back
: Service health confirmedCopy-paste example
Use the section keyword to visually split long project timelines.
timeline
title Museum Exhibition
section Preparation
Research : Select artifacts : Secure loans
Conservation : Restore pieces : Photograph catalog
section Public Program
Opening week : Press preview : Member night
Closing week : Final tours : Return loansCopy-paste example
Add LR for horizontal flow or TD for vertical orientation.
timeline LR
title Migration Plan
Audit : Inventory workloads
Pilot : Move an internal service
Cutover : Move production trafficCopy-paste example
Use HTML entities like #58; when a colon is part of a time label.
timeline
title Operations Log
Sprint #35;4 #58; 10#58;00 UTC : Deploy at 10:00 : Verify issue #123Without the diagram keyword, Mermaid reports an error. Start the first non-comment line with timeline, timeline LR, or timeline TD.
A raw colon inside a period label can produce a parse error. Escape the period’s colon as #58;.
Error example
Open this example to see the persistent code error, then add the keyword.
title Release Plan
2026 : Public launchError example
Change 10:00 to 10#58;00 in the period label.
timeline
10:00 UTC : Public launchCopy-paste example
Organize milestones, historical events, project eras, and product roadmaps with interactive timeline blocks and instant SVG preview.
Copy-paste example
Use this when a short chronology needs no title or sections.
timeline
Morning : Team briefing
Afternoon : Decision recordedCopy-paste example
Keep several milestones under the same month by adding inline colon separators.
timeline
title Community Conference
April : Call for speakers : Venue confirmed
June : Schedule published : Registration opened
September : Conference day : Recordings releasedCopy-paste example
Comments stay in Mermaid code but visual edits normalize the source.
timeline
title Incident Review
Detection : Elevated error rate
: On-call engineer paged
Recovery : Faulty release rolled back
: Service health confirmedCopy-paste example
Use sections to group preparation work separately from public milestones.
timeline
title Gallery Exhibition
section Curate
Jan : Select artworks : Sign artist agreements
section Install
Feb : Build displays : Lighting calibration
section Public
Mar : VIP opening : Public admissionCopy-paste example
Use TD when a long roadmap reads better from top to bottom.
timeline TD
title Data Center Migration
section Prepare
Audit : Inventory workloads
Pilot : Move an internal service : Validate rollback
section Cutover
Weekend 1 : Migrate databases : Verify replicas
Weekend 2 : Move production traffic : Retire legacy hostsCopy-paste example
Document exact release months without turning the diagram into a project schedule.
timeline
title Atlas CLI Release Notes
2025 Oct : Version 0.8.0 : Offline cache introduced
2026 Feb : Version 0.9.0 : Plugin hooks added : Config validation improved
2026 Jun : Version 1.0.0 : Stable command API : Migration guide publishedCopy-paste example
Test how a renderer wraps descriptive milestones before publishing a dense diagram.
timeline
title Space Telescope Commissioning
Readiness review : Verify thermal vacuum results and close every flight software action item
Launch window : Complete vehicle integration and publish the mission operations handoff
First light : Calibrate the primary instruments and release the initial deep field observation to research teamsA Mermaid timeline visually displays chronological milestones, product release phases, or historical events grouped into time periods.
Yes. Switch the timeline direction toggle to generate vertical or horizontal layouts.
Separate events with colons or add continuation event cards under the same period section in the visual builder.