Timeline

Timeline diagrams visualize a sequence of events in chronological order. They're perfect for project planning, historical events, and process documentation.

Syntax

Basic Elements

• Title: Optional title for the timeline
• Section: Group events into sections
• Events: Individual timeline entries

Basic Example

Code:

timeline
    title History of Social Media
    2004 : Facebook launched
    2006 : Twitter launched
    2010 : Instagram launched
    2011 : Snapchat launched

Ctrl + Enter|

Advanced Example

Here's a more detailed timeline showing a software development lifecycle:

Code:

timeline
    title Software Development Lifecycle
    section Planning
        Requirements Analysis : 2 weeks
        System Design : 3 weeks
    section Development
        Frontend Development : 4 weeks
        Backend Development : 4 weeks
        Database Implementation : 2 weeks
    section Testing
        Unit Testing : 1 week
        Integration Testing : 2 weeks
        User Acceptance Testing : 1 week
    section Deployment
        Beta Release : 1 week
        Production Deployment : 1 week
        Post-deployment Monitoring : Ongoing

Ctrl + Enter|

Project Timeline

Code:

timeline
    title Project Milestones
    section Q1 2024
        Project Kickoff : January
        Requirements Gathering : February
        Initial Design : March
    section Q2 2024
        Development Phase 1 : April
        Testing : May
        User Training : June
    section Q3 2024
        Launch : July
        Feedback Collection : August
        Improvements : September

Ctrl + Enter|

Event Types

Simple Events

Code:

timeline
    title Simple Events
    2024 : New Year
    January : Month 1
    February : Month 2
    March : Month 3

Ctrl + Enter|

Sectioned Events

Code:

timeline
    title Product Development Phases
    section Research
        Market Analysis : 2 weeks
        Competitor Research : 1 week
        User Research : 2 weeks
    section Design
        Wireframes : 1 week
        Prototypes : 2 weeks
        User Testing : 1 week
    section Implementation
        Development : 4 weeks
        Testing : 2 weeks
        Launch : 1 week

Ctrl + Enter|

Styling

The timeline automatically:

• Arranges events chronologically
• Groups related events in sections
• Shows duration when specified
• Maintains consistent spacing
• Displays clear relationships

Tips

• Keep event descriptions concise
• Use meaningful section names
• Include important dates
• Group related events together
• Show clear progression
• Include durations when relevant
• Use consistent formatting
• Focus on key milestones
• Consider the timeline's scale