尝试在 Github .md 文件上渲染图表时出现 Mermaid 语法错误

我已经关注了这个美人鱼教程 https://mermaid-js.github.io/mermaid/#/sequenceDiagram但是当我尝试将其放入 Github 上的 .md 文件时，会出现错误：

这完美地适用于现场编辑。 https://mermaid-js.github.io/mermaid-live-editor/edit/#eyJjb2RlIjoiICAgIHNlcXVlbmNlRGlhZ3JhbVxuICAgICAgICBhdXRvbnVtYmVyXG4gICAgICAgIEFsaWNlLT4-Sm9objogSGVsbG8gSm9obiwgaG93IGFyZSB5b3U_XG4gICAgICAgIGxvb3AgSGVhbHRoY2hlY2tcbiAgICAgICAgICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuICAgICAgICBlbmRcbiAgICAgICAgTm90ZSByaWdodCBvZiBKb2huOiBSYXRpb25hbCB0aG91Z2h0cyFcbiAgICAgICAgSm9obi0tPj5BbGljZTogR3JlYXQhXG4gICAgICAgIEpvaG4tPj5Cb2I6IEhvdyBhYm91dCB5b3U_XG4gICAgICAgIEJvYi0tPj5Kb2huOiBKb2xseSBnb29kISIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9

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!
    ```

有人可以帮助我找到我的错误，尝试将其写在 Github 上

目前，我正在解决类似的问题。

1. 使用 GitHub，您的意思是GitHub 页面 https://docs.github.com/en/pages?
2. 你能找到解决办法吗？

就我个人而言，我与 Jekyll 有一个设置。这是我的question https://stackoverflow.com/questions/69956232/mermaid-not-rendered-in-jekyll-page关于如何为 jekyll 正确设置 mermaid。

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 https://jojozhuang.github.io/tutorial/jekyll-diagram-with-mermaid/.

And if I use the jekyll spaceship-plugin https://github.com/jeffreytse/jekyll-spaceship, ist renders to: I guess, that this what it should like. Am I right?

因此，到目前为止，对我来说 mermaid 是基于 spaceship 插件工作的，而不是通过“本地”引用 mermaid JavaScript 来工作。我不知道 spaceship 是否可以与 GitHub 页面一起使用，但是，绝对在 GitHub 页面（基于 Jekyll）内，您还可以添加插件。看文档 https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll了解更多详情。