MermanDraw
Open Editor

Mermaid exampleTimeline

Software Release History as a Mermaid Timeline

A release timeline condenses years of changelog into one picture. Product and engineering leads use it in all-hands decks and READMEs to show the cadence of major versions and when big platform shifts happened, without listing every patch release.

  • release timeline diagram
  • version history timeline
  • mermaid timeline example
  • changelog visualization
Software Release History as a Mermaid Timeline2024Q1v1.0 public launchREST APIQ3v1.5 team workspacesAudit log2025Q1v2.0 new editorPlugin systemQ3Mobile appsSSO and SCIM2026Q1v3.0 real-timecollaborationQ2Migration to manageddatabaseEU data regionRelease history
Open in editor → 16 linesrenders in GitHub, Notion, Obsidian

Mermaid code

timeline
    title Release history
    section 2024
        Q1 : v1.0 public launch
           : REST API
        Q3 : v1.5 team workspaces
           : Audit log
    section 2025
        Q1 : v2.0 new editor
           : Plugin system
        Q3 : Mobile apps
           : SSO and SCIM
    section 2026
        Q1 : v3.0 real-time collaboration
        Q2 : Migration to managed database
           : EU data region

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Timeline guide.

What this diagram shows

This timeline has three section blocks, one per year. Each period such as Q1 lists one or more events, and continuation lines that start with a colon add more events to the same period. Mermaid colors each section differently, so the year boundaries are visible without extra labels.

Compared with a Gantt chart, a timeline has no durations or dependencies; it only records that something happened in a period. That makes it the right choice for history and the wrong one for planning.

How to adapt it

  • Replace the quarters with release version numbers as the period labels if your readers think in versions rather than dates.
  • Use months or exact dates as periods for a project younger than a year, and drop the section lines.
  • Keep two events per period at most; longer lists make the columns tall and the timeline hard to scan.
  • Add a final section for the current year with a single planned entry to show what is coming next, and mark it (planned) in the text.

FAQ

Can I control the colors of the sections?

Partly. Mermaid assigns colors per section from the active theme palette. You can override them with theme variables such as cScale0, cScale1, and so on in an init directive, but there is no per-section color syntax.

What happens if an event text contains a colon?

The colon is the separator between period and event, so a second colon on the same line starts a new event. Write times as 14h30 or use a dash instead, or split the text across two indented continuation lines.