标记（Markdown）+美人鱼（流程图和图表）答案

【问题标题】：Marked ( Markdown ) + Mermaid ( Flow Chart & Diagrams )标记（Markdown）+美人鱼（流程图和图表）
【发布时间】：2015-04-21 23:24:46
【问题描述】：

努力获得美人鱼 - https://github.com/knsv/mermaid 跟...共事已标记 - https://github.com/chjj/marked

据我所知，我应该能够在 markdown 中编写以下内容

```
  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>

【问题讨论】：

标签： javascript markdown flowchart mermaid javascript-marked

【解决方案1】：

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

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

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

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

我希望这会有所帮助。

/克努特

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

对我来说，Mermaid 图表在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 或折扣

Marked 2 论坛上的相关帖子：

【讨论】：