SebastianJS

timeline

2 samples from the mermaid demo corpus, rendered both ways. The three SebastianJS forms come off one layout, so the measurements below hold for all of them.

12
SebastianJS pane shows

Example 1

match
0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source 
timeline
title My day
section Go to work
  1930 : first step : second step
       : third step
  1940 : fourth step : fifth step

Example 2

match
0.00% width difference
SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry
SebastianJS SVG renderingSebastianJS SVG, text traced renderingSebastianJS PNG rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source 
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)