feat: Add radar diagram

[thomascizeron]

📑 Summary

Adds radar diagram

Resolves #2280

📏 Design Decisions

• Langium grammar with simple syntax
  • axis and curve keyword, each axis and curve can be labeled, multiple definition by line accepted
  • simple options embedded in grammar
  • min/max/ticks/showLegend
  • graticule keyword choose if the radar is rounded or polygonal
• Radar Chart
  • Used a catmull-rom spline for closed rounded curve
  • Some parameters can be changed from config
  • Style color based on theme cScale value

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: bb5a7a5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
mermaid	Minor
@mermaid-js/parser	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	bb5a7a5
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67d73cfb8dfdfa0008965598
😎 Deploy Preview	https://deploy-preview-6381--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/mermaid-js/mermaid@6381

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6381

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6381

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6381

commit: bb5a7a5

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	537 added, 531 removed	Mar 16, 2025, 9:13 PM

[codecov]

Codecov Report

Attention: Patch coverage is 4.60251% with 456 lines in your changes missing coverage. Please review.

Project coverage is 3.86%. Comparing base (d602240) to head (bb5a7a5).
Report is 12 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/radar/renderer.ts	0.57%	174 Missing ⚠️
packages/mermaid/src/diagrams/radar/db.ts	0.00%	90 Missing ⚠️
packages/mermaid/src/diagrams/radar/styles.ts	2.04%	48 Missing ⚠️
packages/parser/src/language/radar/module.ts	5.00%	19 Missing ⚠️
packages/parser/tests/test-util.ts	0.00%	18 Missing ⚠️
packages/mermaid/src/diagrams/radar/parser.ts	5.55%	17 Missing ⚠️
packages/mermaid/src/themes/theme-base.js	0.00%	13 Missing ⚠️
packages/mermaid/src/themes/theme-dark.js	0.00%	13 Missing ⚠️
packages/mermaid/src/themes/theme-forest.js	0.00%	13 Missing ⚠️
packages/mermaid/src/themes/theme-neutral.js	0.00%	13 Missing ⚠️
... and 9 more

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #6381    +/-   ##
========================================
  Coverage     3.86%   3.86%            
========================================
  Files          402     412    +10     
  Lines        42682   43159   +477     
  Branches       644     664    +20     
========================================
+ Hits          1648    1670    +22     
- Misses       41034   41489   +455     

Flag	Coverage Δ
unit	3.86% <4.60%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/config.type.ts	100.00% <ø> (ø)
packages/mermaid/src/defaultConfig.ts	35.89% <100.00%> (+0.66%)	⬆️
packages/mermaid/src/diagrams/radar/types.ts	100.00% <100.00%> (ø)
packages/mermaid/src/themes/theme-default.js	95.07% <100.00%> (+0.17%)	⬆️
.build/jsonSchema.ts	0.00% <0.00%> (ø)
packages/mermaid/src/docs/.vitepress/config.ts	0.45% <0.00%> (-0.01%)	⬇️
packages/parser/src/language/index.ts	0.00% <0.00%> (ø)
packages/parser/src/language/radar/index.ts	0.00% <0.00%> (ø)
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00% <0.00%> (ø)
packages/parser/src/language/radar/tokenBuilder.ts	0.00% <0.00%> (ø)
... and 13 more

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[knsv]

Textbook PR. Solid effort that ticks all boxes! 💯

I am about to write a guide on how to add new diagrams. Will use your PR as input to that process.

The only thing I have to have different is more rendering tests.

Again, solid job!

[knsv]

Appreciate you adding the docs!

[knsv]

Great with theme support from the start!

[knsv]

Langium from the start 💯

[ashishjain0512]

@thomascizeron I think this will be a great addition to Mermaid Diagram. I am happy to see it support the existing themes. Great PR.

[mermaid-bot]

@thomascizeron, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.

[thomascizeron]

Thanks! Yeah I'm not really satisfied with testing but didn't really know how to do rendering tests, some tests appeared redundant between parser and mermaid.