Mermaid Radar Charts

Radar charts (spider charts) compare multiple variables across different categories. Perfect for skill assessments, performance reviews, and multi-dimensional comparisons.

Use Case

Use radar charts when you need to:

• Compare multiple dimensions
• Show skill profiles
• Visualize performance metrics
• Display multi-attribute comparisons
• Assess capabilities

Code (Mermaid radar-beta)

 1```mermaid
 2radar-beta
 3  title Grades
 4
 5  axis m["Math"], s["Science"], e["English"]
 6  axis h["History"], g["Geography"], a["Art"]
 7
 8  curve a["Alice"]{85, 90, 80, 70, 75, 90}
 9  curve b["Bob"]{70, 75, 85, 80, 90, 85}
10
11  max 100
12  min 0
13```

Result:

Explanation

• radar-beta - Start radar chart (beta diagram type)
• axis id["Label"] - Define axes with identifiers and labels
• curve id["Label"]{v1, v2, ...} - Define data series with values for each axis
• max / min - Set numeric range for the chart

Alternative: Using Chart.js for Radar

If your Mermaid version does not yet support radar/radar-beta, you can fall back to Chart.js:

Notes

• radar / radar-beta are relatively new in Mermaid; make sure you run a recent version
• Axis order must match the value order inside each curve
• Use max/min to keep values in a sensible range

Gotchas/Warnings

• ⚠️ Version: Older Mermaid versions will not recognize radar/radar-beta
• ⚠️ Values: Each curve must provide one value per axis
• ⚠️ Axes: Axis identifiers must be unique

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js