radar

6 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.

1 2 3 4 5 6

SebastianJS pane shows SVGSVG, text tracedPNG

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

mermaid-cliheadless Chrome

Mermaid source

radar-beta 
title My favorite ninjas
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
      
curve Ninja1["Naruto"]{
    Agility 2, Speed 2,
    Strength 3, Stam 5,
    Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
      
showLegend true
ticks 3
max 8
min 0
graticule circle

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

mermaid-cliheadless Chrome

Mermaid source

---
config:
  radar:
    axisScaleFactor: 0.25
    axisLabelFactor: 0.95
---
radar-beta 
  title DevOps Radar
  axis f["Feature Velocity"], s["Stability"]
  axis r["Resilience"], e["Efficiency"]
  axis c["Cost"], d["DevSecOps"]

  curve app1["App1"]{
    f 5, s 4.5, r 3.8, d 4.2, e 4.5, c 3.5
  }
  curve app2["App2"]{4, 3, 4, 3, 3, 4}, app3["App3"]{3, 2, 4, 3, 2, 3}
  curve app4["App4"]{2, 1, 3.2, 2.5, 1, 2}

  showLegend true
  ticks 3
  max 5
  graticule polygon

Example 3

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

mermaid-cliheadless Chrome

Mermaid source

%%{init: {'theme': 'forest'} }%%
radar-beta 
  title Forest theme
  axis Agility, Speed, Strength
  axis Stam["Stamina"] , Intel["Intelligence"]

  curve Ninja1["Naruto"]{
      Agility 2, Speed 2,
      Strength 3, Stam 5,
      Intel 0
  }
  curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
  curve Ninja3["Ninja"] {3, 2, 1, 5, 4}

Example 4

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

mermaid-cliheadless Chrome

Mermaid source

%%{init: {'theme': 'dark'} }%%
radar-beta 
  title Dark theme
  axis Agility, Speed, Strength
  axis Stam["Stamina"] , Intel["Intelligence"]

  curve Ninja1["Naruto"]{
      Agility 2, Speed 2,
      Strength 3, Stam 5,
      Intel 0
  }
  curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
  curve Ninja3["Ninja"] {3, 2, 1, 5, 4}

Example 5

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

mermaid-cliheadless Chrome

Mermaid source

%%{init: {'theme': 'base', 'themeVariables': {'cScale0': '#ff0000', 'cScale1': '#00ff00', 'cScale2': '#0000ff'}} }%%
radar-beta 
  title Custom colors
  axis Agility, Speed, Strength
  axis Stam["Stamina"] , Intel["Intelligence"]

  curve Ninja1["Naruto"]{
      Agility 2, Speed 2,
      Strength 3, Stam 5,
      Intel 0
  }
  curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
  curve Ninja3["Ninja"] {3, 2, 1, 5, 4}

Example 6

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

mermaid-cliheadless Chrome

Mermaid source

---
config:
  radar:
    axisScaleFactor: 0.25
    curveTension: 0.1
  theme: base
  themeVariables:
    cScale0: "#FF0000"
    cScale1: "#00FF00"
    cScale2: "#0000FF"
    radar:
      curveOpacity: 0
---
radar-beta
  title Custom colors, axisScaleFactor, curveTension, opacity
  axis A, B, C, D, E
  curve c1{1,2,3,4,5}
  curve c2{5,4,3,2,1}
  curve c3{3,3,3,3,3}