简单的美人鱼图失败

Question

我尝试运行 example from the mermaid site (a working copy 开启 codepen.io):

<script src="https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

<div class="mermaid">

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

</div>

输出为：

同时，一个sequence diagram works great.

基础例子哪里有问题？

更新

问题在于 Chrome 48 兼容性。使用最新的 js 文件修复：

<script src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.css">

Answer 1

在 Safari 中看起来不错：

我唯一缺少的是线条颜色，但添加这个 css 修复了：

path {
  stroke: black;
}

简单的美人鱼图失败

Simple mermaid graph fails

html

javascript

mermaid

更新