简单的美人鱼图失败

时间:2016-02-02 15:00:51

标签: javascript html mermaid

我尝试从美人鱼网站运行exampleworking 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>

输出结果为:

enter image description here

同时,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">

1 个答案:

答案 0 :(得分:1)

在Safari中看起来不错:

Screenshot of the resulting graph

我唯一缺少的是线条颜色,但添加此css修复了:

path {
  stroke: black;
}