努力争取 美人鱼 - 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>
我测试了你的代码，以获得编写美人鱼 div 的 console.log。
您的标记实例化没有任何问题，您的渲染器也没有任何问题。但是...控制台日志中的 markdown 不太好。
通过在图形定义之前和之后添加新行，预期的 div 被打印到控制台。:
图TD；A-->B；A-->C；B-->D；C-->D；
我希望这有帮助。
/克努特
我也有这个问题。 尝试这个字符串格式，它对我有用：
'图TB '+'A --> B '+'A --> C '+'B --> D '+'C --> D '
对我来说，Mermaid图在Marked 2（版本：2.6.4）中渲染得很好。
降价示例来源：
<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
```mermaid
graph TD;A-->B;A-->C;B-->D;C-->D;
```
警告：似乎每次编辑后都需要调用 Mermaid 两次。因此，编辑后，一旦 Marked 2 更新了其流媒体预览，我需要点击“刷新”。
标记2个设置：
Marked 2 论坛上的相关帖子：
我在我的网站上使用了该功能 https://onlinequicktool.com/markdown-previewer/
从浏览器查看源代码