Free tool
Timeline Maker for Project Plans, Histories and Roadmaps
Write a date, a dash and what happened, one event per line, and the timeline is drawn beside the box. Events can follow your typing order or be sorted by date, and spaced evenly or by the real time between them.
The timeline is drawn in your browser and your text is never uploaded. The events and your settings are kept on your own device for next time.
How to write the events
Each line is one event. Put the date first, then a separator, then the event, then an optional note. The separator can be a spaced dash, a colon with a space, a vertical bar or a tab. A note is whatever follows the second separator, and it prints in smaller grey text under the event.
| Line | Date | Event | Note |
|---|---|---|---|
2022-03 - First prototype | 2022-03 | First prototype | none |
2024-06 - Version 1.0 - Launched | 2024-06 | Version 1.0 | Launched |
May 2025: Mobile app | May 2025 | Mobile app | none |
A line with only one part is ignored, so you can leave rough notes in the box while you work.
Order and spacing
Two menus change how the events are placed, and they solve different problems.
- Order can keep the lines as you typed them or sort them by date. Sorting is handy when you add events as you remember them.
- Spacing can be even, with the same gap between every event, or by the real time between dates. Real spacing makes a long pause look long.
Dates are read from years, year and month, full dates, month names and a number followed by BC. If any date cannot be read, the tool falls back to even spacing and says so in the status line. A date it cannot read also sorts to the end when you sort by date.
Across the page or down the page
Across puts a horizontal line in the middle with events taking turns above and below it, which suits slides and wide pages. Events close together on the same side are pushed further from the line, and the status line tells you when that happened. The chart grows wider as you add events, so a long history becomes a long picture.
Down places a vertical line with dates at the left and text at the right, which reads well on a phone or in a document. In both layouts, the event text wraps, and long text is cut after three lines in the across view, so write short events and put detail in the note.
Tips for a timeline people will actually read
- Keep the number of events under about twelve. Past that, group them into phases.
- Use the same date format on every line, so sorting and spacing behave.
- Put the outcome in the event and the reason in the note.
- Choose one colour that matches your brand, and leave the rest of the picture neutral.
- For a project plan, show milestones and not every task.
- Read the picture once as a stranger would. If a date or a name needs explaining, move that explanation into the note.
- Check the colour against the white or dark background before you save, so the dates stay easy to read.
A move to a new platform is a good example of a timeline worth drawing, since several parties depend on the same dates. Our Webflow migration page describes the stages that usually go on one.
Opening and saving
Open a CSV file with Date, Event and Note columns and it becomes lines in the box, or drop a plain text file onto it. A header row is skipped when its first cell starts with date, year, when, time or day. The CSV button saves your events back out. PNG, SVG and PDF come from the buttons under the picture, and Copy picture puts it on the clipboard. Files over 5 MB are refused.
Frequently asked questions
What format should the dates be in?
Years such as 2024, a year and month such as 2024-06, full dates, month names and BC years all work. Use one style throughout.
How do I add a note to an event?
Add a second separator after the event, then the note. For example, 2024-06 - Version 1.0 - Launched on the web.
Can the timeline sort my events by date?
Yes. Set Order to By date. Lines whose date cannot be read go to the end.
What does spacing by real time do?
It places events along the line in proportion to the time between their dates. If any date cannot be read, the tool spaces them evenly and tells you.
Can I make a vertical timeline?
Yes. Set Layout to Down the page. Dates sit on the left of the line and text on the right.
Is the text saved online?
No. It stays in your browser, and only your own device remembers it.
More free tools
- flowchart maker: Draw flowcharts with joined shapes or build one from typed steps, then save it as PNG, SVG or PDF.
- mind map maker: Make a mind map with keyboard shortcuts, import or export outlines, and save it as PNG, SVG, PDF, Markdown or OPML.
- bar graph maker: Make bar, horizontal bar, stacked bar and line graphs from pasted data and save them as PNG, SVG or PDF.
- org chart maker: Make an org chart from an indented list or a CSV and save it as PNG, SVG or PDF.
- Unix timestamp converter: Convert Unix timestamps to dates and dates to timestamps in any time zone, one or in bulk.