Mermaid Timeline Diagrams

Timeline diagrams show events in chronological order. Perfect for documenting history, project milestones, and event sequences.

Use Case

Use timelines when you need to:

• Show chronological events
• Document project milestones
• Visualize history
• Track event sequences
• Display temporal relationships

Code

1```mermaid
2timeline
3    title Project Timeline
4    2024-01 : Planning
5    2024-02 : Development
6    2024-03 : Testing
7    2024-04 : Launch
8```

Result:

Examples

Example 1: Project Milestones

 1```mermaid
 2timeline
 3    title Research Project
 4    2024-01 : Literature Review
 5    2024-02 : Hypothesis Formation
 6    2024-03 : Experiment Design
 7    2024-04 : Data Collection
 8    2024-05 : Analysis
 9    2024-06 : Publication
10```

Result:

Example 2: Technology Evolution

 1```mermaid
 2timeline
 3    title Web Development Evolution
 4    1990s : HTML/CSS
 5    2000s : JavaScript Frameworks
 6    2010s : Single Page Apps
 7    2020s : Modern Frameworks
 8        : React
 9        : Vue
10        : Angular
11```

Result:

Notes

• title - Optional timeline title
• Format: Date/Time : Event
• Can nest events under time periods
• Use indentation for sub-events

Gotchas/Warnings

• ⚠️ Format: Must use Date : Event format
• ⚠️ Chronology: Events should be in chronological order
• ⚠️ Nesting: Use indentation for sub-events
• ⚠️ Dates: Can use various date formats

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js