HorizontalTimeline

Generate horizontal SVG timelines with rotated labels and dot markers.

1|Updated Apr 2, 2026

Search Tags:#timeline #svg #diagram #chronology #rotation #visualisation

Ready to run

npx skills add https://github.com/mec07/claude_skills --skill horizontaltimeline

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: HorizontalTimeline
Source: https://github.com/mec07/claude_skills/tree/main/stow/HorizontalTimeline
Command: npx skills add https://github.com/mec07/claude_skills --skill horizontaltimeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HorizontalTimeline provides a reliable method to generate horizontal SVG timelines, with phase-colored dots and rotated text, enabling clean, scalable chronological diagrams in HTML or SVG without manual layout.

Core Features & Use Cases

Generates horizontal SVG timelines with phase-colored dots, 290deg rotated text below the dots, connector lines, and gap breaks for time gaps.
Supports medical, project, and historical timelines, enabling clear visualization of sequences and milestones.
Works well for slide decks or embedded diagrams where consistent typography and spacing are required.

Quick Start

Provide a list of events and dates and HorizontalTimeline will render a horizontal SVG timeline with rotated labels and connectors.

Frequently Asked Questions about HorizontalTimeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a horizontal SVG timeline with rotated labels?▼

To generate a horizontal SVG timeline with rotated labels, provide a list of events and dates. The tool outputs a ready-to-embed SVG with 290-degree rotated text below phase-colored dot markers and connector lines.

Can I use SVG timelines in HTML slides and documents?▼

Yes, you can use SVG timelines in HTML slides and documents. The generated output is a ready-to-embed SVG suitable for consistent typography and spacing in slide decks or embedded diagrams without manual layout.

How do I visualize time gaps and long labels in a chronological diagram?▼

To visualize time gaps and long labels in a chronological diagram, the SVG layout uses connector lines for gaps and caps the text, representing overflow properly with ellipses to fit the connector layout cleanly.

What is the best way to create scalable project or medical milestones visualization?▼

The best way to create scalable project or medical milestones visualization is generating a horizontal SVG timeline. This ensures clean, scalable chronological diagrams with phase-colored dots and rotated text without manual layout adjustments.

Does the SVG timeline generator support phase-colored dot markers?▼

Yes, the SVG timeline generator supports phase-colored dot markers. It produces horizontal timelines with phase-colored dots, connector lines, and 290-degree rotated text below the dots to clearly visualize sequences and milestones.

Are there limitations to the text length in rotated SVG timeline labels?▼

Yes, a limitation is that text length in rotated SVG timeline labels is capped. To fit the connector layout properly, the tool automatically truncates long event labels and represents the gaps with ellipses.