Search code examples
mermaid

Styling links between states in Mermaid

How can I style links between nodes for state diagrams in Mermaid? For example in the below state diagram how can I make the links with 5V with red color and thicker?

stateDiagram
  direction LR
  RaspPi --> Relay :GPIO
  Power5V --> Relay: 5V
  Relay --> Load: 5V
Solution

  • You can include CSS rules in a preamble to the mermaid diagram and exploit the fact that the lines have identifers edgeN where N starts with 0 and increases by 1 for every line.

    <script type="module" src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"></script>
<pre class="mermaid">
---
config:
  themeCSS: |
    #edge1, #edge2 { stroke: red; stroke-width: 2px; }
---
stateDiagram
  direction LR
  RaspPi --> Relay :GPIO
  Power5V --> Relay: 5V
  Relay --> Load: 5V
</pre>

    Coloring individual arrowheads is not possible with this approach, however, because all lines share the same arrowhead definition.