diff --git a/TimelineSvg.md b/TimelineSvg.md new file mode 100644 index 0000000..a770f29 --- /dev/null +++ b/TimelineSvg.md @@ -0,0 +1,83 @@ +# TimelineSvg + +**TimelineSvg** is a lightweight, browser-based system for automatically generating timeline diagrams in SVG format. +It visualizes project data, roadmaps, or other time-based information directly from CSV files — with no server, no installation, and fully offline operation. + +--- + +## How TimelineSvg Works + +### 1) Project file controls configuration and assets + +A `project.json` defines: + +* which CSV file to load +* how fields are mapped (title, date, lane/group, ID, etc.) +* which stylesheet to apply +* which SVG template with macros to use +* how many months the timeline should span + +This makes each project fully customizable and portable. + +--- + +### 2) CSV data is parsed into timeline items + +TimelineSvg reads the CSV and extracts: + +* **title** +* **date** +* **lane/group** (e.g., team, category, workstream) +* **ID** (used for internal/external view modes) + +Invalid or incomplete rows are ignored automatically. + +--- + +### 3) The timeline layout is computed automatically + +Based on the dataset, TimelineSvg determines: + +* the earliest month to display +* the number of months to render +* horizontal position relative to the date +* vertical position based on lane/group + +This produces a clean, multi-lane time axis. + +--- + +### 4) Rendering through SVG templates with macros + +Templates define the visual appearance using placeholders: + +* `{{MONTHS}}` → month grid + labels +* `{{LANES}}` → lane backgrounds, labels, and timeline items + +TimelineSvg replaces these macros with generated SVG fragments, allowing full freedom in visual design — including branding, custom layouts, or graphical elements. + +--- + +### 5) Interactive in the browser with SVG export + +Through a simple HTML interface, users can: + +* load a project +* replace CSV, CSS, or template files +* switch between internal/external views +* download the rendered timeline as a standalone SVG + +The exported view always hides internal IDs. + +--- + +## What makes TimelineSvg unique + +* **Entirely offline** in any modern browser +* **No backend** or build system required +* **Fully customizable** visuals via CSS + SVG templates +* **Local data privacy** (all data stays on the device) +* **Flexible data input** with user-defined mappings +* **Ideal for** roadmaps, portfolios, release plans, organizational timelines, and multi-lane schedules + +xxx \ No newline at end of file