SebastianJS

quadrantchart

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 
%%{init: {"quadrantChart": {"quadrantPadding": 10}, "theme": "forest", "themeVariables": {"quadrant1TextFill": "blue"}} }%%
quadrantChart
  x-axis Urgent --> Not Urgent
  y-axis Not Important --> important
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete

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 
%%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600} } }%%
quadrantChart
  title Analytics and Business Intelligence Platforms
  x-axis "Completeness of Vision ❤" -->
  y-axis Ability to Execute
  quadrant-1 Leaders
  quadrant-2 Challengers
  quadrant-3 Niche
  quadrant-4 Visionaries
  Microsoft: [0.75, 0.75]
  Salesforce: [0.55, 0.60]
  IBM: [0.51, 0.40]
  Incorta: [0.20, 0.30]