feat(sequence): implement neo look and themes

[omkarht]

📑 Summary

This PR implements Neo look support for Sequence Diagrams, building on the foundation established in the base Neo look PR. It enhances sequence diagram rendering with modern styling including drop shadows, rounded corners, configurable stroke widths, and multi-color actor support for Redux color themes.

Resolves #

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 Tasks

1. Neo Look Integration for Sequence Diagrams

• Applied Neo look styling to all sequence diagram participant types (participant, collections, queue, actor, boundary, control, database, entity)
• Added drop shadow filters for depth and modern appearance
• Configurable stroke widths via theme variables

2. Multi-Color Actor Support

• Implemented redux theme with drop shadow support. (redux, redux-dark)
• Implemented color array system for Redux color themes (redux-color, redux-dark-color)
• Each actor/participant automatically gets a unique color from the theme's bkgColorArray and borderColorArray.
• Colors cycle through the array based on actor index for visual distinction.

3. Enhanced Styling System

• Modified styles.js to accept dynamic drop shadow values from theme variables
• Added data-look="neo" attributes to elements for targeted CSS styling
• Applied filters to actors, notes, label boxes, and rectangles
• Added configurable font weight for notes via noteFontWeight theme variable

4. Data Attributes for Element Tracking

• Added data-et (element type), data-type, and data-id attributes to sequence diagram elements
• Enables better element identification for testing, debugging, and custom styling
• Life lines, participants, and other elements now have semantic data attributes

---

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: 2e6691e

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

This PR includes changesets to release 1 package

Name	Type
mermaid	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

[codecov]

Codecov Report

❌ Patch coverage is 0% with 360 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.57%. Comparing base (07bda94) to head (2e6691e).

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00%	288 Missing ⚠️
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.00%	53 Missing ⚠️
packages/mermaid/src/diagrams/sequence/styles.js	0.00%	19 Missing ⚠️

Additional details and impacted files

@@                       Coverage Diff                       @@
##           feature/neo-look-implemented   #7384      +/-   ##
===============================================================
- Coverage                          3.59%   3.57%   -0.02%     
===============================================================
  Files                               481     480       -1     
  Lines                             49929   50165     +236     
  Branches                            740     740              
===============================================================
  Hits                               1793    1793              
- Misses                            48136   48372     +236     

Flag	Coverage Δ
unit	3.57% <0.00%> (-0.02%)	⬇️

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

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/sequence/styles.js	0.00% <0.00%> (ø)
.../mermaid/src/diagrams/sequence/sequenceRenderer.ts	0.05% <0.00%> (-0.01%)	⬇️
packages/mermaid/src/diagrams/sequence/svgDraw.js	0.00% <0.00%> (ø)

... and 1 file with indirect coverage changes

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

[argos-ci]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	140 changed, 20 added	Feb 17, 2026, 10:10 AM