How can I style a flowchart arrows with Mermaid?

Solution

You can customize link styling by setting linkStyle and adding the CSS styles there. For each linkStyle you need to configure the link number based on the order of appearance in the code (first link will can be configured with linkStyle 0, second link with linkStyle 1).

To configure all links you can use linkStyle default

Here is an example of a graph with custom text color, stroke color, font size and stroke width:

flowchart LR
  A--link text-->B
  B-->C
  B--link text-->D

  linkStyle 0,1 color:red,stroke:blue,font-size:0.5rem;
  linkStyle 2 color:blue,stroke:green,font-size:1.5rem,stroke-width:5px;