10 Mermaid Timeline Examples with Step-by-Step Code (2026)
10 real mermaid timeline examples with step-by-step code. Copy-paste ready diagrams for projects, research, sprints, and more.
# 10 Mermaid Timeline Examples with Step-by-Step Code (2026)
The best way to learn Mermaid timelines is to see real ones — not toy examples, but actual diagrams you'd use in a project. Here are 10 working examples, each with the code and a breakdown of what's happening.
Copy any of these, paste into mermaideditor.lol, and you'll see it render immediately.
Example 1: Software Sprint Timeline
Great for engineering teams doing 2-week sprints. Shows what gets done each sprint without the overhead of a full Gantt chart.
timeline
title Backend API Project — Sprint Timeline
section Sprint 1 (May 1-14)
Auth service design
DB schema review
Auth endpoints live : May 14
section Sprint 2 (May 15-28)
User profile API
File upload service
Integration tests pass : May 28
section Sprint 3 (Jun 1-14)
Admin dashboard API
Rate limiting
Performance benchmarks : Jun 14
section Sprint 4 (Jun 15-30)
Security audit
Load testing
v1.0 shipped : Jun 30Step-by-step breakdown: Four sprints, each 2 weeks. Each section has 2-3 parallel tasks and one milestone (the deliverable). The last event in each section gets the date label — this becomes the anchor point readers scan for.
---
Example 2: Product Roadmap
A high-level roadmap you'd show to stakeholders or put in a pitch deck.
timeline
title MobileApp Roadmap 2026
section Q1 2026
MVP features defined
iOS prototype built
Android prototype built : Q1
section Q2 2026
Beta launch (iOS)
Beta launch (Android)
1,000 beta users : Q2
section Q3 2026
Public launch
App Store featured
10,000 downloads : Q3
section Q4 2026
Premium tier launch
Enterprise plan
Profitability : Q4Step-by-step breakdown: Quarterly sections, each with 3 events. The last event is always a measurable goal (users, downloads, revenue). This gives stakeholders a story arc, not just a list of tasks.
---
Example 3: Research Project Plan
Academic researchers love this format. See more in our dedicated post on building a research plan with Mermaid timeline.
timeline
title PhD Research Plan — 3 Year Study
section Year 1
Literature review complete
Research questions defined
Ethics approval received : 2024
section Year 2
Data collection phase 1
Qualitative interviews (n=30)
Preliminary analysis done : 2025
section Year 3
Full data analysis
Paper submitted to journal
Thesis defense : 2026Step-by-step breakdown: Three yearly sections map the arc of a 3-year PhD program. Each section has the key deliverables that supervisors and committees care about. Clean enough to put in a research proposal.
---
Example 4: Company History
Perfect for About pages, investor decks, and onboarding docs.
timeline
title Acme Corp — Company History
section 2018
Founded in garage
First product shipped : 2018
section 2019
Seed round ($500K)
First 10 employees : 2019
section 2021
Series A ($5M)
Opened London office : 2021
section 2023
Series B ($20M)
100 employees milestone : 2023
section 2026
IPO filed
Global expansion : 2026Step-by-step breakdown: A company's milestones from founding to IPO. Two events per section keeps it readable. Funding rounds and headcount milestones are the kinds of facts that make company histories scannable.
---
Example 5: Content Marketing Calendar
Editorial teams use this to visualize what's publishing when across channels.
timeline
title Content Calendar — May 2026
section Week 1 (May 1-7)
Blog: SEO fundamentals
Newsletter: subscriber growth tips
Launch: video series ep.1 : May 7
section Week 2 (May 8-14)
Blog: case study
Podcast: guest interview
Webinar: live Q&A : May 14
section Week 3 (May 15-21)
Blog: product update
Social: UGC campaign
Email: re-engagement : May 21
section Week 4 (May 22-31)
Blog: monthly roundup
Newsletter: May wrap-up
Retrospective: metrics review : May 31Step-by-step breakdown: Weekly sections, each with content across three channels (blog, email, video/social). The last item is either a publish event or a review. Easy to update as the month progresses.
---
Example 6: Onboarding Journey
Map the steps a new user goes through, from sign-up to power user.
timeline
title New User Onboarding Flow
section Day 0
Account created
Welcome email sent
Profile setup prompt : Day 0
section Day 1
First feature tour
Sample project created
Invite team prompt : Day 1
section Day 3
Usage tip email
Template suggestions
Support check-in : Day 3
section Day 7
Power user guide sent
Upgrade prompt shown
NPS survey triggered : Day 7
section Day 30
Monthly summary email
Loyalty reward offered
Retention check : Day 30Step-by-step breakdown: Day-based sections show exactly when each touchpoint fires. Product managers use this to spot gaps in onboarding flows. The time labels (Day 0, Day 1, etc.) make the cadence obvious.
---
Example 7: Event Planning
For conferences, launches, or marketing events with multiple workstreams.
timeline
title Annual Dev Conference — Planning
section 6 Months Out
Venue booked
Speakers recruited
Sponsorship packages sent : Nov 2025
section 3 Months Out
Agenda published
Tickets on sale
Marketing campaign live : Feb 2026
section 1 Month Out
Catering confirmed
AV setup planned
Attendee emails sent : Apr 2026
section Event Week
Registration opens
Keynote rehearsal
Conference day 1 : May 2026Step-by-step breakdown: Lead-time sections (6 months, 3 months, 1 month, event week) make this reusable for any event. The approach — counting down instead of counting up — is how event planners actually think.
---
Example 8: Personal Career Timeline
Great for portfolios, LinkedIn "About" sections, or just tracking your own growth.
timeline
title Career Journey
section Early Career
Junior Dev at Startup : 2015
First team lead role : 2017
section Mid Career
Senior Engineer : 2019
First conference talk : 2020
Open source project (2K stars) : 2021
section Now
Principal Engineer : 2023
Started consulting practice : 2025
Author of dev book : 2026Step-by-step breakdown: Three loose phases (early, mid, now) instead of strict years. This gives a narrative arc rather than a flat list of jobs. The standout achievements (conference talk, GitHub stars, book) tell the story better than job titles alone.
---
Example 9: Security Incident Timeline
When a security incident happens, you need a clear timeline for the post-mortem report.
timeline
title Security Incident — May 5, 2026
section Detection
Anomalous login detected
Alert triggered in SIEM
On-call engineer notified : 02:14 AM
section Containment
Affected accounts locked
API keys rotated
External access blocked : 02:45 AM
section Investigation
Log analysis started
Attack vector identified
Scope confirmed (3 accounts) : 04:30 AM
section Recovery
Accounts restored
Security patches applied
All-clear declared : 09:00 AMStep-by-step breakdown: Time-stamped sections (02:14, 02:45, etc.) make incident timelines precise. Four phases — Detection, Containment, Investigation, Recovery — follow the standard incident response framework. This format goes directly into a post-mortem doc.
---
Example 10: Learning Path / Curriculum
For courses, bootcamps, or self-study plans.
timeline
title Full-Stack Developer Learning Path
section Foundations (Month 1)
HTML & CSS basics
JavaScript fundamentals
First static website : Month 1
section Frontend (Month 2-3)
React basics
State management
Built 3 portfolio projects : Month 3
section Backend (Month 4-5)
Node.js & Express
SQL & databases
REST API built : Month 5
section Full Stack (Month 6)
Deploy to cloud
Auth & security
Capstone project shipped : Month 6Step-by-step breakdown: A 6-month bootcamp curriculum in one diagram. Each section ends with a concrete deliverable (website, projects, API, capstone). Instructors can use this as the first slide of an orientation session.
---
Which Example Should You Start With?
- Engineering teams: Examples 1 (sprint) or 9 (incident) are immediately practical.
- Product managers: Examples 2 (roadmap) or 7 (event) give you stakeholder-ready visuals fast.
- Researchers/academics: Examples 3 (research plan) and 10 (learning path) map directly to your work.
- Content teams: Example 5 (content calendar) will replace your spreadsheet.
Want to dive deeper into the syntax? Read the complete Mermaid timeline instructions guide or the timeline syntax reference.
---
Try these live in our free Mermaid Editor → mermaideditor.lol
Paste any example above and watch it render in real-time. No setup, no account needed.
---
*Related: Mermaid Cheat Sheet · Diagram Templates · Home*