标记（Markdown）+美人鱼（流程图和图表）
Posted
技术标签:
【中文标题】标记（Markdown）+美人鱼（流程图和图表）【英文标题】：Marked ( Markdown ) + Mermaid ( Flow Chart & Diagrams ) 【发布时间】：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>
【问题讨论】：
【参考方案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 论坛上的相关帖子：
Using mermaid in Marked 2 Mermaid Diagrams in Documents【讨论】：
以上是关于标记（Markdown）+美人鱼（流程图和图表）的主要内容，如果未能解决你的问题，请参考以下文章
如何让 GitHub Pages Markdown 支持美人鱼图？
再不用怕Markdown中的绘图了，GitHub官方支持Mermaid图表绘制工具