mermaid
概述
作用: 用于解析渲染markdown中的mermaid语法
Github: https://github.com/mermaid-js/mermaid
npm: https://www.npmjs.com/package/mermaid
官方文档: https://mermaid-js.github.io/mermaid/#/
接口文档: https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi
使用
方式1 - 数据已经写死在HTML页面中 - initialize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="G:\VsCode\开源\jquery-3.6.1.min.js"></script>
<script src="G:\VsCode\开源\mermaid-9.1.7\dist\mermaid.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: 'true',
flowchart:{ htmlLabels: true },
"theme": "forest",
});
</script>
</head>
<body>
<div class="mermaid" id="mermaid1">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
<div class="mermaid" id="mermaid2">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</div>
</body>
</html>
方式2 - 动态渲染(例如从后端拿到数据在进行页面渲染)- render
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="G:\VsCode\开源\jquery-3.6.1.min.js"></script>
<script src="G:\VsCode\开源\mermaid-9.1.7\dist\mermaid.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: 'true',
flowchart: {
htmlLabels: true
},
"theme": "forest",
});
</script>
</head>
<body>
<div class="mermaid" id="mermaid1">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
<div class="mermaid" id="mermaid2">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
</div>
</body>
<script>
$(function () {
let mdMermaidContent = "```mermaid\n" +
" graph LR\n" +
" a[\"关键字\"] --> b[\"async:修饰函数 - 表明功能是异步请求服务器获取数据\"]\n" +
" a[\"关键字\"] --> c[\"await:用在函数里面 - 获取响应的Promise对象\"]\n" +
"```";
console.log("")
console.log("原始内容:");
console.log(mdMermaidContent)
let canMermaidContent = mdMermaidContent.replaceAll("```mermaid",'');
canMermaidContent = canMermaidContent.replaceAll("`",'');
console.log("")
console.log("去掉markdown部分语法:");
console.log(canMermaidContent)
//参数说明:渲染后生成svg的ID属性、待渲染的mermaid内容、渲染成功后的回调函数(入参是渲染生成后的DOM-HTML)
let renderHtmlContent = mermaid.render('mermaid-svg-new', canMermaidContent, function(svgContent) {
console.log("")
console.log('渲染生成的Dom:');
console.log( svgContent)
});
//渲染到页面上
$(renderHtmlContent)
.wrap("<div />")
.addClass("mermaid mermaid-dynamic")
.appendTo("body")
})
</script>
</html>
问题
为什么渲染不了
凡是没写死到页面的,都需要使用动态进行渲染mermaid语法内容,请参考上面的动态渲染代码