Merge pull request #6616 from mermaid-js/fix/timeline-vertical-lines-6610

fix(timeline): ensure consistent vertical line lengths with visible arrowheads

.changeset/timeline-vertical-lines-fix.md

@@ -0,0 +1,7 @@
+---
+'mermaid': patch
+---
+
+fix(timeline): ensure consistent vertical line lengths with visible arrowheads
+
+Fixed timeline diagrams where vertical dashed lines from tasks had inconsistent lengths. All vertical lines now extend to the same depth regardless of the number of events in each column, with sufficient padding to clearly display both the dashed line pattern and complete arrowheads.

cypress/integration/rendering/timeline.spec.ts

@@ -161,4 +161,68 @@ describe('Timeline diagram', () => {
       {}
     );
   });
+
+  it('11: should render timeline with many stacked events and proper timeline line length', () => {
+    imgSnapshotTest(
+      `timeline
+        title Medical Device Lifecycle
+        section Pre-Development
+          Quality Management System : Regulatory Compliance : Risk Management
+        section Development
+          Management Responsibility : Planning Activities : Human Resources
+          Resource Management : Management Reviews : Infrastructure
+        section Post-Development
+          Product Realization Activities : Planning Activities : Customer-related Processes
+          Post-Production Activities : Feedback : Complaints : Adverse Events
+                                    : Research and Development : Purchasing Activities
+                                    : Production Activities : Installation Activities
+                                    : Servicing Activities : Post-Market Surveillance
+      `,
+      {}
+    );
+  });
+
+  it('12: should render timeline with proper vertical line lengths for all columns', () => {
+    imgSnapshotTest(
+      `---
+config:
+    theme: base
+    themeVariables:
+        fontFamily: Fira Sans
+        fontSize: 17px
+        cScale0: '#b3cde0'
+        cScale1: '#f49090'
+        cScale2: '#85d5b8'
+---
+
+timeline
+    title Medical Device Lifecycle
+    section Planning
+        Quality Management System (4): Regulatory Compliance (4.1.1)
+            : Risk Management (4.1.2)
+        Management Resposibility (5): Planning Activities (5.4)
+            : Management Reviews (5.6)
+         Resource Management (6): Human Resources (6.2)
+            : Infrastructure (6.3)
+    section Realization
+        Research and Development (7.3): RnD Planning (7.3.2)
+            : Inputs (7.3.3)
+            : Outputs (7.3.4)
+            : Review (7.3.5)
+            : Verification (7.3.6)
+            : Validation (7.3.7)
+        Purchasing (7.4): Purchasing Process (7.4.1)
+            : Purchasing Information (7.4.2)
+        Production (7.5): Production Activities (7.5.1)
+            : Production Feedback (8.2.1)
+        Installation (7.5.3): Installation Activities (7.5.3)
+        Servicing (7.5.4): Servicing Activities (7.5.4)
+    section Post-Production
+        Post-Market Activities (8): Feedback (8.2.1)
+            : Complaints (8.2.2)
+            : Adverse Events (8.2.3)
+      `,
+      {}
+    );
+  });
 });

demos/timeline.html

@@ -23,6 +23,23 @@
           1940 : fourth step : fifth step
 				</pre>
 
+    <h2>Medical Device Lifecycle Timeline</h2>
+    <pre class="mermaid">
+        timeline
+        title Medical Device Lifecycle
+        section Planning
+          Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
+          Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
+        section Realization
+          Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
+          Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
+          Production (7.5) : Production Feedback (8.2.1)
+          Installation (7.5.3) : Installation Activities (7.5.3)
+          Servicing (7.5.4) : Servicing Activities (7.5.4)
+        section Post-Production
+          Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
+    </pre>
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

packages/mermaid/src/diagrams/timeline/timelineRenderer.ts

@@ -126,6 +126,10 @@ export const draw = function (text: string, id: string, version: string, diagObj
       };
       maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
     }
+    // Add spacing between events (10px per event except the last one)
+    if (task.events.length > 0) {
+      maxEventLineLengthTemp += (task.events.length - 1) * 10;
+    }
     maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp);
   }
 
@@ -285,16 +289,9 @@ export const drawTasks = function (
       lineWrapper
         .append('line')
         .attr('x1', masterX + 190 / 2)
-        .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
-        .attr('x2', masterX + 190 / 2) // Subtract stroke width so arrow point is retained
-        .attr(
-          'y2',
-          masterY +
-            maxTaskHeight +
-            (isWithoutSections ? maxTaskHeight : maxSectionHeight) +
-            maxEventLineLength +
-            120
-        )
+        .attr('y1', masterY + maxTaskHeight) // Start from bottom of task box
+        .attr('x2', masterX + 190 / 2) // Same x coordinate for vertical line
+        .attr('y2', masterY + maxTaskHeight + 100 + maxEventLineLength + 100) // End at consistent depth with ample padding for visible dashed lines and arrowheads
         .attr('stroke-width', 2)
         .attr('stroke', 'black')
         .attr('marker-end', 'url(#arrowhead)')