Timeline Diagram

Mermaid Studio provides language support for Timeline diagrams inside IntelliJ IDEA and other JetBrains IDEs. Timeline diagrams display events in chronological order, which makes them useful for roadmaps, historical events, or project milestones.

Syntax Highlighting

Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.

Armada Dark

Islands Dark

Islands Light

IDE Support

Mermaid Studio provides basic support for timeline diagrams:

• Syntax highlighting for time periods and events
• Code completion for timeline keywords
• Code folding to collapse sections
• Formatting to clean up diagram structure

Direction

Timelines accept an optional direction after the timeline keyword. Only LR (left-to-right) and TD (top-down) are recognized by the Mermaid renderer, so Mermaid Studio’s lexer validates these values and flags anything else. Completion is provided by TimelineDirectionCompletionContributor.

Left-to-right:

timeline LR
  title Product Releases
  2022 : v0.1 Beta
  2023 : v1.0 : v1.1
  2024 : v2.0
  2025 : v3.0 : v3.1 : v3.2
  2026 : v4.0

Top-down:

timeline TD
  title Product Releases
  2022 : v0.1 Beta
  2023 : v1.0 : v1.1
  2024 : v2.0
  2025 : v3.0 : v3.1 : v3.2
  2026 : v4.0

Direction keywords are case-insensitive.

Learn More

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