CODEWITHSUNDEEP
githubmermaideditor.md
Augusto
Augusto

Reputation: 4243

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

Upvotes: 3

Views: 12397

Answers (1)

Greenfly77
Greenfly77

Reputation: 195

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.

Upvotes: 1

Related Questions