'Change font of text on links in graph Mermaid

I want to change the font (color, size...) of the text on the link (Change_font), but I am not able to figure out. Can someone help?

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>

<div class="mermaid">
  graph TD;
  A[Hello]--Change_font-->B[of_text]
</div>
cssgraphmermaid


Solution 1:[1]

Styling links

linkStyle 0 stroke-width:2px,fill:green,stroke:green;

full API documentation link https://unpkg.com/[email protected]/dist/www/flowchart.html#styling-and-classes

Solution 2:[2]

You can style the text on the line with linkStyle, also update the original code from graph to flowchart.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>

<div class="mermaid">
flowchart TB
    %% Colors %%
    classDef blue fill:#2374f7,stroke:#000,stroke-width:2px,color:#fff
    classDef green fill:#16b552,stroke:#000,stroke-width:2px,color:#fff

    A[Hello]:::blue ---> |Change_font| B[of_text]:::green

    %% Link Color %%
    linkStyle 0 stroke:blue,stroke-width:2px,color:red;
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Penny Liu
Solution 2

Related Questions