Skip to content

Timeline

A timeline lays events out in chronological order — periods on the spine, events hanging off each period. kymo's editor reads the Mermaid timeline syntax.

This page works like a quickstart: as you scroll, the pane on the right shows the source and the preview for the section you're reading. Copy grabs the source; ▶ Open in editor loads it into editor.kymo.studio (pick mermaid in the diagram-type dropdown when starting from scratch).

Each line is period : event. A period takes any text (years, quarters, phases); stack more events under the same period with continuation lines that start with :, or inline as period : event1 : event2.

timeline
    title History of Social Media
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : YouTube
    2006 : Twitter

▶ Try it in the editor

Rendered social.mmd

Sections

section groups consecutive periods under a coloured band — eras, releases, project phases. Events in the same section share a colour family.

timeline
    title Timeline of Industrial Revolution
    section 17th-20th century
        Industry 1.0 : Machinery, Water power, Steam power
        Industry 2.0 : Electricity, Internal combustion engine, Mass production
    section 21st century
        Industry 4.0 : Internet, Robotics, AI

▶ Try it in the editor

Rendered sections.mmd

Status. Timeline previews on this page and in the editor use the Mermaid renderer; importing timelines into kymo's own pipeline (native SVG/PNG/PDF rendering) is on the roadmap.

See also

  • Gantt — when events have durations and dependencies.
  • User Journey — for steps scored by experience rather than dated.

Apache 2.0 Licensed