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

Question

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

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

Did the mermaid graph ever work? Github doesn't offer much support for rendering mermaid graphs. Are you using plain md? Did you consider exporting and using it as a SVG? — DariusP, Aug 13 '21 at 15:33
Q1 2022: [This is coming soon](https://stackoverflow.com/a/70689446/6309) — VonC, Jan 12 '22 at 22:56

score 1 · Answer 1 · answered Nov 14 '21 at 11:24

Currently, I struggle on a similar problem.

With GitHub, do you mean GitHub pages?
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: 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: 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.

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

1 Answers1

Linked