Mermaid timeline diagrams
A Mermaid timeline lays events out chronologically as plain text: each line is a time period followed by one or more events, and the renderer spaces them along a horizontal axis. It's the fastest way to turn a roadmap, schedule, or history into a diagram that diffs in Git and renders on GitHub.
A product roadmap grouped into quarterly sections.
Timelines are ideal when the order of things matters more than their exact dates — product roadmaps, onboarding plans, a daily routine, or the milestones of a project. In MermaidCreator you can type the syntax, edit it live, or describe the sequence and let AI draft the periods and events for you.
When to use a timeline
- Product roadmaps and release schedules
- Project milestones and 2-week plans
- Daily routines, schedules, and study plans
- Company or technology history narratives
The Mermaid code
Copy it anywhere Mermaid renders — or see the full syntax reference.
timeline
title Product roadmap 2026
section Q1
Research : User interviews : Competitor analysis
Design : Wireframes
section Q2
Build : Core editor : AI drafting
section Q3
Launch : Public beta : Pricing
section Q4
Grow : Integrations : Team plansFrequently asked questions
- How do I create a timeline in Mermaid?
- Start a code block with `timeline`, add an optional `title`, then write one period per line followed by its events: `2026 : LinkedIn : Facebook`. The text before the first colon is the time period and each colon-separated value after it is an event. Group related periods under `section <name>` headings to colour-band them.
- Can I group events into sections on a Mermaid timeline?
- Yes. Add a `section <name>` line and every period beneath it is grouped and shaded together — for example `section Q1` then your Q1 periods. Sections are how you turn a flat list of dates into a roadmap with phases.
- Can AI generate a timeline from a description?
- Yes. Describe the sequence to MermaidCreator's AI — for example 'a 6-month product roadmap from research to public launch' — and Claude drafts the periods, sections, and events as editable Mermaid you can refine in code or with follow-up prompts.