How can I style a flowchart arrows with Mermaid?

I want to use flowchart/graph with mermaid and customize multiple arrows styles. How can I do that?

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:

```mermaid
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;
```

Alternative #1

I've been using Mermaid for documentation and sometimes you want to style links based on their meaning or type rather than just their order. You can use link classes for more semantic styling:

flowchart LR
  A--success-->B
  B--error-->C
  A--warning-->D

  linkStyle 0 stroke:#28a745,stroke-width:3px;
  linkStyle 1 stroke:#dc3545,stroke-width:3px;
  linkStyle 2 stroke:#ffc107,stroke-width:3px;

This approach makes your diagrams more readable and meaningful, especially for complex workflows.

Alternative #2

For complex diagrams with many links, you can use CSS classes to group similar link styles:

flowchart TD
  A-->B
  B-->C
  C-->D
  A-->D

  classDef linkStyle1 stroke:#007bff,stroke-width:2px,color:#007bff;
  classDef linkStyle2 stroke:#28a745,stroke-width:3px,color:#28a745;
  
  linkStyle 0,1 class linkStyle1;
  linkStyle 2,3 class linkStyle2;

This makes it easier to maintain consistent styling across large diagrams.

Alternative #3

If you're using Mermaid in web applications or documentation sites, you can also style links using external CSS by targeting the generated SVG elements:

/* Custom CSS for Mermaid links */
.mermaid .link {
  stroke: #007bff !important;
  stroke-width: 2px !important;
}

.mermaid .link.success {
  stroke: #28a745 !important;
}

.mermaid .link.error {
  stroke: #dc3545 !important;
}

Then in your Mermaid code:

flowchart LR
  A--success-->B
  B--error-->C

This gives you more control over styling and allows for dynamic theme changes.