skills.rest
mec07
mec07COMMUNITY
Explore all skills by this author →
GitHub

HorizontalTimeline

Generate horizontal SVG timelines with rotated labels and dot markers.

1|Updated Apr 2, 2026
Search Tags:#timeline#svg#diagram#chronology#rotation#visualisation
One-click install
npx skills add https://github.com/mec07/claude_skills --skill horizontaltimeline
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
hellonishhellonish
1

timeline_construct

Extract dated events from upstream sources and produce a cited chronological timeline.

Community
Advanced
ysoftmanysoftman
9

html-diagram

Render diagrams as self-contained HTML files with inline SVG and dark theme.

Community
Advanced
mindmorassmindmorass
2

graphviz-diagrams

Create Graphviz diagrams with DOT source and pre-rendered images.

Community
Advanced
EmasoftEmasoft

amvcp-iterm2-preview

Preview HTML pages or Mermaid diagrams in an iTerm2 split-pane.

Community
Advanced