Timeline Diagrams

Timeline diagrams display events in chronological order, useful for roadmaps, historical events, or project milestones.

Example

timeline
    title Product Roadmap
    2024 Q1 : Planning : Research
    2024 Q2 : Development : Alpha Release
    2024 Q3 : Beta Testing
    2024 Q4 : Launch

IDE Support

Mermaid Studio provides basic support for timeline diagrams:

• Syntax highlighting for time periods and events
• Live preview with timeline visualization
• Error detection for invalid syntax

Learn More

For complete syntax documentation including sections and styling options, see the Mermaid.js Timeline documentation.