feature/2268: Add vertical timeline variation

.changeset/flat-garlics-do.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add option to change timeline direction

demos/timeline.html

@@ -23,6 +23,19 @@
           1940 : fourth step : fifth step
 				</pre>
 
+    <h2>Vertical Timeline</h2>
+    <pre class="mermaid">
+        timeline TD
+        title My day
+        section Wake up
+          0600 : step
+               : step
+        section Go to work
+          0800 : first step : second step
+               : third step very very very very very loooooong
+          1940 : fourth step : fifth step
+    </pre>
+
     <h2>Medical Device Lifecycle Timeline</h2>
     <pre class="mermaid">
         timeline

docs/syntax/timeline.md

@@ -185,6 +185,37 @@ timeline
           Bullet 4 : sub-point 4a : sub-point 4b
 ```
 
+### Direction
+
+Timeline can change its direction by the keyword after `timeline`.
+
+```mermaid-example
+timeline TD
+  title MermaidChart 2023 Timeline
+    section 2023 Q1 <br> Release Personal Tier
+      Bullet 1 : sub-point 1a : sub-point 1b
+      Bullet 2 : sub-point 2a : sub-point 2b
+    section 2023 Q2 <br> Release XYZ Tier
+      Bullet 3 : sub-point <br> 3a : sub-point 3b
+      Bullet 4 : sub-point 4a : sub-point 4b
+```
+
+```mermaid
+timeline TD
+  title MermaidChart 2023 Timeline
+    section 2023 Q1 <br> Release Personal Tier
+      Bullet 1 : sub-point 1a : sub-point 1b
+      Bullet 2 : sub-point 2a : sub-point 2b
+    section 2023 Q2 <br> Release XYZ Tier
+      Bullet 3 : sub-point <br> 3a : sub-point 3b
+      Bullet 4 : sub-point 4a : sub-point 4b
+```
+
+Possible directions are:
+
+- `LR`: Left to right (default)
+- `TD`: Top top down.
+
 ## Styling of time periods and events
 
 As explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.

packages/mermaid/src/diagrams/timeline/parser/timeline.jison

@@ -17,6 +17,8 @@
 \s+                     /* skip whitespace */
 \#[^\n]*                /* skip comments */
 
+"timeline"[ \t]+LR       return 'timeline_lr';
+"timeline"[ \t]+TD       return 'timeline_td';
 "timeline"               return 'timeline';
 "title"\s[^\n]+       return 'title';
 accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
@@ -45,7 +47,13 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 %% /* language grammar */
 
 start
-	: timeline document 'EOF' { return $2; }
+	: timeline_header document 'EOF' { return $2; }
+	;
+
+timeline_header
+	: timeline
+	| timeline_lr { yy.setDirection('LR'); }
+	| timeline_td { yy.setDirection('TD'); }
 	;
 
 document

packages/mermaid/src/diagrams/timeline/timeline-definition.ts

@@ -2,11 +2,25 @@
 import parser from './parser/timeline.jison';
 import * as db from './timelineDb.js';
 import renderer from './timelineRenderer.js';
+import verticalRenderer from './timelineRendererVertical.js';
 import styles from './styles.js';
 
+const rendererSelector = {
+  setConf: () => {
+    // no-op
+  },
+  draw: (text: string, id: string, version: string, diagObj: any) => {
+    const direction = diagObj?.db?.getDirection?.() ?? 'LR';
+    if (direction === 'TD') {
+      return verticalRenderer.draw(text, id, version, diagObj);
+    }
+    return renderer.draw(text, id, version, diagObj);
+  },
+};
+
 export const diagram = {
   db,
-  renderer,
+  renderer: rendererSelector,
   parser,
   styles,
 };

packages/mermaid/src/diagrams/timeline/timeline.spec.js

@@ -10,6 +10,30 @@ describe('when parsing a timeline ', function () {
     setLogLevel('trace');
   });
   describe('Timeline', function () {
+    it('should default to LR direction when none is provided', function () {
+      let str = `timeline
+    section abc-123`;
+
+      timeline.parse(str);
+      expect(timelineDB.getDirection()).to.equal('LR');
+    });
+
+    it('should parse TD direction', function () {
+      let str = `timeline TD
+    section abc-123`;
+
+      timeline.parse(str);
+      expect(timelineDB.getDirection()).to.equal('TD');
+    });
+
+    it('should parse LR direction', function () {
+      let str = `timeline LR
+    section abc-123`;
+
+      timeline.parse(str);
+      expect(timelineDB.getDirection()).to.equal('LR');
+    });
+
     it('should handle a simple section definition abc-123', function () {
       let str = `timeline
     section abc-123`;

packages/mermaid/src/diagrams/timeline/timelineDb.js

@@ -1,6 +1,7 @@
 import * as commonDb from '../common/commonDb.js';
 let currentSection = '';
 let currentTaskId = 0;
+let direction = 'LR';
 
 const sections = [];
 const tasks = [];
@@ -13,9 +14,18 @@ export const clear = function () {
   tasks.length = 0;
   currentSection = '';
   rawTasks.length = 0;
+  direction = 'LR';
   commonDb.clear();
 };
 
+export const setDirection = function (dir) {
+  direction = dir;
+};
+
+export const getDirection = function () {
+  return direction;
+};
+
 export const addSection = function (txt) {
   currentSection = txt;
   sections.push(txt);
@@ -93,6 +103,8 @@ const compileTasks = function () {
 export default {
   clear,
   getCommonDb,
+  getDirection,
+  setDirection,
   addSection,
   getSections,
   getTasks,