标记( Markdown )+美人鱼(流程图和图表)
努力让美人鱼- https://github.com/knsv/mermaid与Marked - https://github.com/chjj/marked一起工作
根据我收集的信息，我应该能够用markdown编写以下代码
图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>回答 3
Stack Overflow用户
发布于 2015-02-23 04:37:28
为了让console.log编写美人鱼div，我对您的代码进行了测试。
您标记的实例化没有任何问题，渲染器也没有任何问题。然而..。控制台日志中的标记不正常。
通过在图形定义之前和之后添加新行，预期的div将打印到控制台：
\n图形TD;A-->B;A-->C;B-->D;C-->D;\n
我希望这能帮到你。
/Knut
Stack Overflow用户
发布于 2016-02-28 21:14:40
我也有这个问题。试一下这个字符串格式，它对我很有效：
‘图形TB\n'+'A --> B\n'+'A --> C\n'+'B --> D\n'+'C --> D\n'
Stack Overflow用户
发布于 2021-02-19 06:34:02
对我来说，Mermaid图表在Marked 2 (版本: 2.6.4)中呈现得很好。
示例markdown源码：
<script src="https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js"></script>
```mermaid图TD;A-->B;A-->C;B-->D;C-->D；
注意:似乎在每次编辑之后都需要调用美人鱼两次。所以在编辑之后，一旦标记为2更新了它的流预览，我需要点击“刷新”。
标记2设置：
unchecked
- Syntax高亮显示: unchecked
- Processor：
- MultiMarkdown or
Marked 2论坛上的相关帖子：
- Using mermaid in Marked 2
- Mermaid Diagrams in Documents
https://stackoverflow.com/questions/28626329
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号