Skip to content

6617: Support Per-Link Curve Styling in Flowcharts #6744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 9 commits into from
Jul 23, 2025
Merged

6617: Support Per-Link Curve Styling in Flowcharts #6744

merged 9 commits into from
Jul 23, 2025

Conversation

SpecularAura
Copy link
Contributor

📑 Summary

This PR introduces support for per link curve styling in flowcharts by making use of edge id as explained in this comment

flowchart LR
  A e1@--> B

This could then easily be combined with attributes for the edge:
e1@{ curve: linear }

Resolves #6617

📏 Design Decisions

The ability to add per link curve styles is added in the same way animate works for flowcharts

📋 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:.

Examples:

graph TD
A e1@-->B e2@-->C
A e3@-->D e4@-->C
e1@{ curve: linear }
e2@{ curve: catmullRom }
e3@{ curve: stepBefore }
e4@{ curve: stepAfter }
image

@SpecularAura
Added per link styling
b3a1223 
Edited flowDB.ts which already had interpolate for styling links
individually. Added the ability to modify this parameter using the
newer @ syntax using the curve property.
@SpecularAura
Added tests for Per Link Curve Styling
d7a55b4
@SpecularAura
Added Changeset for Per Link Styling of edges
daf8d8d
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jul 12, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 000308c

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/examples Major

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

@github-actions github-actions bot added the Type: Enhancement New feature or request label Jul 12, 2025
@netlify Netlify
Copy link

netlify bot commented Jul 12, 2025 •
edited
Loading

✅ Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit 000308c
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/687ac05b23a09c000861910a
😎 Deploy Preview https://deploy-preview-6744--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jul 12, 2025 •
edited
Loading

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 000308c

@codecov Codecov
Copy link

codecov bot commented Jul 12, 2025 •
edited
Loading

Codecov Report

Attention: Patch coverage is 0% with 3 lines in your changes missing coverage. Please review.

Project coverage is 3.70%. Comparing base (fad6676) to head (000308c).
Report is 84 commits behind head on develop.

Files with missing lines Patch % Lines
packages/mermaid/src/diagrams/flowchart/flowDb.ts 0.00% 3 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           develop   #6744      +/-   ##
==========================================
- Coverage     3.85%   3.70%   -0.15%     
==========================================
  Files          455     454       -1     
  Lines        44772   44739      -33     
  Branches       707     707              
==========================================
- Hits          1725    1659      -66     
- Misses       43047   43080      +33
Flag Coverage Δ
unit 3.70% <0.00%> (-0.15%) ⬇️

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

Files with missing lines Coverage Δ
packages/mermaid/src/types.ts 100.00% <ø> (ø)
packages/mermaid/src/diagrams/flowchart/flowDb.ts 0.00% <0.00%> (ø)

... and 10 files 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 Argos CI
Copy link

argos-ci bot commented Jul 12, 2025 •
edited
Loading

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

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 1 added Jul 18, 2025, 9:53 PM

@shubhamparikh2704
Copy link
Member

Hi @SpecularAura , Thanks for contribution. Please add some visual tests as well in cypress/integration/rendering/flowchart-v2.spec.js file.

sidharthv96
sidharthv96 approved these changes Jul 15, 2025
View reviewed changes
Copy link
Member

@sidharthv96 sidharthv96 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great. Can merge after some visual tests and an example in documentation is added (so people can easily know the feature exists).

@SpecularAura
Copy link
Contributor Author

Thanks for the feedback @shubham-mermaid @sidharthv96 ! I'll add visual tests and update the documentation with an example. Will push the changes shortly.

@SpecularAura
Copy link
Contributor Author

@shubham-mermaid @sidharthv96 Could you have a look?

@shubhamparikh2704 shubhamparikh2704 added this pull request to the merge queue Jul 23, 2025
Merged via the queue into mermaid-js:develop with commit 020c6d6 Jul 23, 2025
22 checks passed
@mermaid-bot mermaid-bot
Copy link

mermaid-bot bot commented Jul 23, 2025

@SpecularAura, 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.

This was referenced Aug 19, 2025
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sidharthv96 sidharthv96 sidharthv96 approved these changes

@aloisklink aloisklink Awaiting requested review from aloisklink

Assignees
No one assigned
Labels
Type: Enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support Per-Link Curve Styling in Flowcharts
3 participants
@SpecularAura @shubhamparikh2704 @sidharthv96