Mermaid diagram

Timeline — free online editor

Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.

What is a Mermaid timeline?

Each entry is a `period : event` pair. Group entries into thematic sections (e.g. decades, quarters). Use multiple lines starting with `:` to add several events to the same period.

When to use it

▸Show product evolution in a marketing page
▸Map a personal or company history
▸Document tech-stack changes over time
▸Build a release notes summary

Syntax in one paragraph

Use `title …`, then `section Name`, then `2024 : Event A`. Add ` : Event B` on the next line (no year) to attach another event to the same period.

Example: History of web development

timeline
    title History of Web Development
    section 1990s
        1991 : HTML invented
        1995 : JavaScript created
             : PHP created
    section 2000s
        2006 : jQuery released
        2009 : Node.js created
    section 2010s
        2013 : React released
        2014 : Vue.js created
    section 2020s
        2021 : Next.js App Router
        2024 : AI-assisted coding mainstream

▶ Try this example in the editor

More Mermaid diagrams

Flowchart

A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.

Sequence Diagram

Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.

Class Diagram

Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.

ER Diagram

Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.

State Diagram

Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.

Gantt Chart

Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.

Pie Chart

Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.

Git Graph

Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.

Mindmap

Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.

Kanban Board

Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.

Full Mermaid editor →

All 11+ diagram templates, live preview, themes