mermaid-js
Styling a Mermaid node in a Markdown file via CSS #4311
Replies: 1 comment 2 replies
-
|
it works on github and codesandbox mermaid
https://codesandbox.io/s/ancient-paper-my3c8t?file=/index.html Can you use devtools or something to check if the css is loaded and not applied or overridden? |
Beta Was this translation helpful? Give feedback.
-
|
Hello and thank you for your time, I think you have the same problem because if you change the color attribute it will not change the text color "Node A" color: rgb(0, 12, 230);Instead if you modify here it will change it locally : classDef green1 fill:#01ff70,stroke:#000,stroke-width:2px,color: #ff0000;
Am I clear ? <!DOCTYPE html>
<html>
<head>
<title>Mermaid js</title>
<meta charset="UTF-8" />
</head>
<body>
<pre class="mermaid">
graph
classDef green1 fill:#01ff70,stroke:#000,stroke-width:2px,color:#ff0000;
A[Node A]:::green2--> B[Node B];
</pre>
<style>
.green2 > rect {
fill: #01ff70 !important;
stroke: #000 !important;
stroke-width: 2px !important;
color: #ff0000;
}
</style>
<script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
OK I don't know if this selector ( |
Beta Was this translation helpful? Give feedback.
-
Hello,
I would like to customize globally my Mermaid diagram in a Markdown file.
I declare a style balise and put : green2 > rect that enable to change style of a node in Mermaid. The problem is that the caption "Node A" don't change its color.
However if i put this it works perfectly:
Here the css :
Thanks !
Beta Was this translation helpful? Give feedback.
All reactions