Search code examples
javascriptmarkdownmermaiddocsify

how to change the color of arrows in marmaid.js

here is an example of my md file

%%{init: {'securityLevel': 'loose', 'theme': 'base', 'themeVariables': { 'darkMode': false, 'primaryColor': '#ffaacc', 'fontSize': '14px', 'lineColoe': '#0404ff', 'edgeLabelBackground':'#ffffaa'}}}%%
graph LR
    id0[皇马]o==>id2[对]o-->id3[奥尼尔]-->id4[不]-->id5[感]-->id6[兴趣]

the above file is applied in docsify server. and the corresponding js configuration in index.html is like this:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

and

var num = 0;
    mermaid.initialize({ startOnLoad: false });

    window.$docsify = {
      name: '',
      repo: '',
      el: '#app',
      maxLevel: 6,
      loadNavbar: true,
      loadSidebar: 'summary.md',
      themeable: {
        readyTransition: true, // default
        responsiveTables: true  // default
      },
      markdown: {
        renderer: {
          code: function (code, lang) {
            if (lang === "mermaid") {
              return (
                '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
              );
            } ;
return this.origin.code.apply(this, arguments);
          }
        }
      }

and I get the graph like this:

enter image description here and I am confused of the color tuning of the arrows. cause the color of arrows is gray and the color of lines is black.

I wanna change the color of arrows to pure black.

thanks for telling me how to change and config

Solution

  • You must use this sentence:

    linkStyle default stroke: black

    And this will modify all the links on your diagram. If you want to change a specifically link you can use:

    linkStyle 0 stroke: blue

    When 0 is the number of link on the chart that you want to change, in the order that you has wrote them.

    More info in: https://youtu.be/-XV1JBfhgWo?t=890