Hansie query - mermaid not rendering

[hansieodendaal]

Hi there Jan-Erik (@badboy ), hope this message finds you well. We were quite excited to find this project of yours on GitHub, as we are also using mdbook and want to start using Mermaid with it.

My structure

root                      [dir]
  src                     [dir]
    my-markdown           [dir]
      my-file.md          [file]
    theme                 [dir]
      css                 [dir]
        (default files here)
      (default files here)
    SUMMARY.md            [file]
  book.toml               [file]
  mermaid.css             [file]
  mermaid.min.js          [file]
  mermaid-init.js         [file]

In root\src\theme\index.hbs I have also added support for both equation delimiter formats as follows:

  {{#if mathjax_support}}
  <!-- MathJax -->
  <script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
      }
    });
  </script>
  {{/if}}

My test markdown code

Testing MathJax equation format 1

$$ \eta = \sum r $$

Testing MathJax equation format 2

\[ \zeta = \sum f \]

Testing MathJax inline equation $ \beta \in [a_1..a_n] ​$ format 1

Testing MathJax inline equation \( \gamma \in [b_1..b_n] \) format 2

%% Example of sequence diagram
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Some questions and observations

(1) mdbook-mermaid run from root does not give any success or error messages, but buildsroot\book (2) Are the default mdbook subcommands supported? When I try to run mdbook-mermaid serve from root I get the message Couldn't open SUMMARY.md (4) If I open root\book\index.html in a browser (4.1) Equation format 1 is supported but not equation format 2 in both cases (4.2) Mermaid does not render (3) Do you have an example mdbook-mermaid project I can clone to test on my system? (5) Could you possibly conceive a test for my example markdown code?

Thank you in advance. Hansie.

[badboy]

Right now it's expected to be quiet if everything works fine. It doesn't support the subcommands at the moment. We use mdbook-mermaid as part of mdbook-dtmo, which does support all the subcommands. I should probably update mdbook-mermaid the same way.

I will look to include an example book. I'm not sure what exactly is not working for you. If you can create a minimal book I might be able to take a look and help.

[hansieodendaal]

Hi @badboy , I found that mdbook-mermaid behaves differently when only one file is included, or if the mermaid diagram is the 1st file referenced in SUMMARY.md. Mermaid will render, but as soon as any file in the TOC is selected mermaid rendering breaks. I created a test branch on our site to illustrate this: https://github.com/tari-labs/tari-university/tree/mermaid-test

Kind regards, Hansie.

[badboy]

Tested the latest checkout of mdbook-mermaid against your repository and the mermaid diagrams render:

[hansieodendaal]

@badboy thank you. Just select some documents in the TOC and see if 1, 1.1, 8, 8.1 still renders Was that static in a browser?

[hansieodendaal]

Any idea why the maths do not display?

[badboy]

Yes, all rendered pages work and those with graphs show the mermaid graph. I just ran mdbook-mermaid on the tari-university university, then served files inside tari-university/book locally and opened them in the browser.

I have no idea about the math part.

[hansieodendaal]

Hi @badboy , I tested your mdbook-dtmo project and found I have to add explicit references in the index.hbs file for the additional mermaid css and js files, as we use a specific theme. The relative path to those files gets lost together with the custom theme if the markdown files are not in the root, i.e. located in the sub-folders. So the workaround below seems to fix this.

        <!-- Custom theme stylesheets -->
        {{#each additional_css}}
        <link rel="stylesheet" href="{{ this }}">
        {{/each}}

        <!-- Mermaid -->
        <link rel="stylesheet" href="{{ path_to_root }}mermaid.css">

and

        <!-- Custom JS scripts -->
        {{#each additional_js}}
        <script type="text/javascript" src="{{ path_to_root }}{{this}}"></script>
        {{/each}}

        <!-- Mermaid -->
        <script src="{{ path_to_root }}mermaid.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="{{ path_to_root }}mermaid-init.js" type="text/javascript" charset="utf-8"></script>

FYI, my simple test branch where I also copied pieces of your firefox documents to test rendering with mermaid-dtmo: https://github.com/tari-labs/tari-university/tree/mermaid-test

The maths problem is still the same.

Regards, Hansie.