docs(flowchart): add section on styling arrow text labels

[Rafaelkocharli]

📑 Summary

Add a new "Styling arrow text" subsection to the flowchart documentation, explaining how to change the color of edge label text using linkStyle.

Resolves #7763

📏 Design Decisions

The new section is placed directly after the existing "Styling links" subsection since it extends that topic. Three approaches are documented in order of increasing specificity:

1. linkStyle default color:red — applies to all arrow labels globally
2. linkStyle N color:blue — targets a specific link by its zero-based index
3. Edge ID + classDef (v11.10.0+) — class-based styling for individual edges, useful in complex diagrams

All examples use mermaid-example blocks so they render live in the docs.

📋 Tasks

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation.
• 🦋 changeset — not applicable (documentation-only change, no package behavior changed)

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	a345fb3
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a0f51f6f5a11a00080245d5
😎 Deploy Preview	https://deploy-preview-7770--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: a345fb3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

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

mermaid

npm i https://pkg.pr.new/mermaid@7770

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7770

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: a345fb3

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 3.26%. Comparing base (46e8044) to head (a345fb3).

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7770      +/-   ##
==========================================
- Coverage     3.26%   3.26%   -0.01%     
==========================================
  Files          599     600       +1     
  Lines        60839   60850      +11     
  Branches       917     917              
==========================================
  Hits          1986    1986              
- Misses       58853   58864      +11     

Flag	Coverage Δ
unit	3.26% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 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.

[pbrolin47]

Thanks @Rafaelkocharli for improving the documentation by this PR. A minor comment :

[sisyphos-bot]

---

What's working well

🎉 The new section is placed exactly where it belongs — directly after the existing "Styling links" subsection — so readers naturally discover it when they're already looking at
link styling.

🎉 The three subsections progress in exactly the right order (global → by index → by edge ID), making the feature easy to discover at whatever level of specificity someone
needs.

🎉 The source file (packages/mermaid/src/docs/syntax/flowchart.md) is the one being edited, not just the generated /docs folder. ✓

🎉 Resolves a well-structured documentation request (issue #7763) with clear, executable examples.

---

Minor observation

🟢 [nit] The third example's classDef includes stroke:#f00,stroke-width:2px in addition to color:red:

classDef redLabel color:red,stroke:#f00,stroke-width:2px

Since this subsection is specifically about styling arrow text, the stroke and stroke-width properties (which style the edge line, not the label) are extra noise. A reader who
only wants to change text color may be confused about what's needed. Consider simplifying to:

classDef redLabel color:red

The existing "Attaching an ID to edges" section already has a richer animation example if readers want to see more complete edge styling.

---

Security

No XSS or injection concerns. The three diagram examples use well-formed Mermaid syntax (linkStyle, classDef, class) with standard CSS color values. The classDef grammar
restricts property values to tokens that cannot include url(), expression(), or javascript:, and DOMPurify still runs on the final SVG output regardless.

---