How to Draw Timeline Diagrams in Mermaid

2026-03-05 · MermZen Tutorial

Timeline diagrams visualize project progress, historical events, product development plans, and time-related information. They are ideal for project management, historical research, and product planning. Mermaid uses timeline keyword for timeline diagrams.

Declaring a Chart

Use timeline keyword:

timeline
    title Chart Title

在 MermZen 中试试 →

Phase Division

Divide timeline into phases, each containing multiple events:

timeline
    title Product Development Timeline
    2024-01 : Project Initiation
      - Requirements Analysis
      - Technology Selection
    2024-02 : Architecture Design
      - System Architecture
      - Database Design
    2024-03 : Frontend Development
      - Page Layout
      - Interactive Implementation
    2024-04 : Backend Development
      - API Development
      - Database Development

在 MermZen 中试试 →

Detailed Event Description

Add detailed event descriptions for each phase:

timeline
    title Project Milestones
    Phase 1 : Requirements Analysis & Planning
      - Complete user needs research
      - Determine project scope
      - Develop detailed plan
    Phase 2 : System Design & Architecture
      - Complete system architecture
      - Database design review
      - Confirm technical architecture
    Phase 3 : Development & Implementation
      - Frontend interface development
      - Backend API development
      - Database implementation
    Phase 4 : Testing & Deployment
      - Unit and integration testing
      - System integration testing
      - Performance testing

在 MermZen 中试试 →

Full Example: Product Development Planning

timeline
    title 2024 Product Development Plan
    Q1 : First Quarter
      - Complete user requirements research
      - Determine product feature scope
      - Develop detailed development plan
      - System architecture design
    Q2 : Second Quarter
      - Frontend interface development
      - Backend API development
      - Database design and implementation
      - Basic functionality testing
    Q3 : Third Quarter
      - Advanced features development
      - User experience optimization
      - System integration testing
      - Performance testing and optimization
    Q4 : Fourth Quarter
      - Product beta testing
      - Collect user feedback
      - Final feature improvements
      - Product official release

在 MermZen 中试试 →

Quick Reference

Syntax	Function
`timeline`	Declare timeline diagram
`title Title`	Set chart title
`Phase Name : Description`	Define timeline phase
`- Event`	Event within phase
`%% comment`	Line comment

Next Step

After mastering timeline diagrams, continue learning Mermaid Mindmaps for organizing ideas and information architecture design.

To try the above code in MermZen, click Open Editor and paste the code there.