关于mermaid syntax error in graph问题的解决方案

发表于 更新于 分类于 ， ， ， 阅读次数：

这个错误在最新版本已经修复！！

提出mermaid syntax error in graph这个bug已经有一段时间了，在next-hexo issues已经得到了解决方案

原文:

#211 Mermaid source code edited by Hexo plugin causing syntax error

引起问题的原因是我安装了hexo-neat, hexo-neat 在压缩post时会将文章中的换行符删除，而mermaid对空格和换行符敏感，所以导致了html语法解释器报错

解决方法

有两种方法避免
一种是禁用hexo-neat插件
另一种是用一种html的局部忽略语法将mermaid代码部分包裹在<!-- htmlmin:ignore -->中

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- htmlmin:ignore -->
<pre class="mermaid">
sequenceDiagram
Alice-&gt;&gt;John: Hello John, how are you?
loop Healthcheck
    John-&gt;&gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&gt;&gt;Alice: Great!
John-&gt;&gt;Bob: How about you?
Bob--&gt;&gt;John: Jolly good!
</pre>
<!-- htmlmin:ignore -->

实现:

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