4

努力让美人鱼 - https://github.com/knsv/mermaid 与 Marked 合作 - https://github.com/chjj/marked

根据我收集到的信息，我应该能够在降价中写下以下内容

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

并让它渲染

<div class="mermaid">
   FLOWCHART / DIAGRAM IS DRAWN HERE
</div>

我错过了什么？

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script src="libs/jquery.min.js"></script>
      <script src="libs/marked.min.js"></script>
      <script src="libs/mermaid.full.js"></script>
    </head>
    <body>

    <div id="content"></div>

    <script>

      var renderer = new marked.Renderer();
      renderer.code = function (code, language) {
        if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
           return '<div class="mermaid">'+code+'</div>';
        }
      };

        $(document).ready(function(){

        $.get( "test.md", function( data ) {
          // console.log(data);
          $('#content').html(marked(data));
        });

      });

    console.log(marked('```graph TD;A-->B;A-->C;B-->D;C-->D;```', { renderer: renderer }));

    </script>
    </body>
    </html>
4

3 回答 3

2

我测试了您的代码，以使 console.log 写入美人鱼 div。

您的标记实例化没有问题，渲染器也没有问题。但是...控制台日志中的降价不正确。

通过在图形定义之前和之后添加新行，将预期的 div 打印到控制台。：

\n图 TD;A-->B;A-->C;B-->D;C-->D;\n

我希望这有帮助。

/克努特

于 2015-02-22T20:37:27.567 回答
0

对我来说，美人鱼图在Marked 2（版本：2.6.4）中渲染得很好。

示例降价来源：

<script src="https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js"></script>
```mermaid
graph TD;A-->B;A-->C;B-->D;C-->D;

```

警告：似乎美人鱼需要在每次编辑后调用两次。所以在编辑之后，一旦 Marked 2 更新了它的流预览，我需要点击“刷新”。

标记 2 个设置：

  • 未选中“生成印刷正确的引号和标点符号”
  • 语法高亮：未选中
  • 处理器：MultiMarkdown 或 Discount

Marked 2 论坛上的相关帖子：

于 2021-02-18T22:34:01.873 回答
0

我也有这个问题。试试这种字符串格式，它对我有用：

'图 TB\n'+'A --> B\n'+'A --> C\n'+'B --> D\n'+'C --> D\n'

于 2016-02-28T13:14:39.543 回答