2

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>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Beast_Levi
  • 66
  • 1
  • 5

2 Answers2

1

Styling links

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

full API documentation link https://unpkg.com/mermaid@7.0.3/dist/www/flowchart.html#styling-and-classes

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Ramesh Mandri
  • 53
  • 9
1

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>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
  • 1
    How to change the background color of Change_font (which is a link text)? Following line is not working: linkStyle 0 fill:#2374f7,stroke:blue,stroke-width:2px,color:red; – Sunil Singh Nov 17 '22 at 01:42
  • @SunilSingh I only manage to do it changing the theme secondaryColor according to this link: https://mermaid.js.org/config/theming.html#customizing-themes-with-themevariables – Carlos Jan 17 '23 at 14:01