Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mermaid syntax error on trying render a diagram on Github .md file

I've followed this MermaId tutorial but when I try put into my .md file on Github an error is raised:

enter image description here

This works perfectely on Live editor.

Code:

    ```mermaid
    sequenceDiagram
        autonumber
        Alice->>John: Hello John, how are you?
        loop Healthcheck
            John->>John: Fight against hypochondria
        end
        Note right of John: Rational thoughts!
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!
    ```

Someone can help me find my error on try write it on Github

like image 299
Augusto Avatar asked Nov 02 '25 21:11

Augusto


1 Answers

Currently, I struggle on a similar problem.

  1. With GitHub, do you mean GitHub pages?
  2. Could you find a solution to it?

Personally, I have a setup with Jekyll. Here is my question on how to setup mermaid correctly for jekyll.

Interestingly, I just posted your mermaid into my jekyll page and the result is: akward mermaid diagram If I put it into <div> tags with class mermaid. Setup I used was this.

And if I use the jekyll spaceship-plugin, ist renders to: nice mermaid diagram I guess, that this what it should like. Am I right?

Therefore, so far, for me mermaid works based on the spaceship plugin, but not by "natively" referencing the mermaid JavaScript. I do not know if spaceship will work with GitHub pages, however, definitely within GitHub pages (which is based on Jekyll), you may also add plugins. See documentation for further details.

like image 187
Greenfly77 Avatar answered Nov 05 '25 16:11

Greenfly77



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!