Change font of text on links in graph Mermaid

user_12340385 0
Viewed 1565

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>

mermaid graph css
2 Answers
user_74059980

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>

user_69048880
Related