如何使用mermaid中的classDiagram？

[miaozhuojun]

不管我怎样尝试，都不能显示类图

<div class="mermaid">
classDiagram
     Animal <|-- Duck : 备注
     Animal -- Fish
     Animal <-- Zebra
     Animal: +int age
     Animal: +String gender
     Animal: +isMammal(a~b~ c)
     Animal: +mate()
     class Duck {
         +String beakColor
         +swim()
         +quack()
     }
     class Fish {
         -int sizeInFeet
         -canEat()
     }
     class Zebra {
        <<interface>>
         +bool is_wild
         +run()
     }
</div>

该例子取自https://erasin.wang/mermaid/#graph

[mzlogin]

我大致看了下，主要原因是模板里引用的 mermaid 版本过老，那时候可能还不支持类图。

可以尝试修改下引用新版本的 mermaid，不过我简单试了下还没有成功，稍复杂一点的写法都遇到报 Syntax error in graph。

[mzlogin]

大致知道咋回事了，是因为模板启用了源代码压缩，这样这些图的源代码也会被压缩到同一行，mermaid 里解析语法时有的有换行校验之类的，就报错了。除了去掉源代码压缩，暂时还没想到什么好办法，有进展我会在此更新，你那边有找到解决方案也麻烦说一下～

[miaozhuojun]

能给个暂时的解决方案吗？比如怎么去掉代码压缩？

[mzlogin]

1. 删除 _layouts/default.html 文件前 4 行；
2. 修改 _includes/footer.html 文件第 51 行为 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>

我本地测试这样修改之后，渲染 mermaid 官方的类图示例可以正常显示了，但展示你给的这一段还有别的问题。

[miaozhuojun]

感谢~

[mzlogin]

那这个 Issue 我先关闭了哈～还有相关问题可以继续讨论。

最近我升级了一下 mermaid 版本，然后稍修改了下支持 ```mermaid 这种写法了，有需要可以关注下。