浏览器中引用mermaid.js

最新推荐文章于 2024-03-25 09:06:07 发布

forward_FN

最新推荐文章于 2024-03-25 09:06:07 发布

阅读量485

点赞数 1

分类专栏： MarkDown 文章标签： javascript 前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/ylike_m2/article/details/134359208

版权

MarkDown 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浏览器中引用mermaid

文章目录

浏览器中引用mermaid

1.引入mermaid.js

本文引用的为最新版本10.6.1
https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js
其他版本参考
https://www.jsdelivr.com/package/npm/mermaid

2.加载mermaid

window.οnlοad=mermaid.initialize();

<html>
    <head>
        <meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
        <title>useage of mermaid for browser</title>
        <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
        <script>
            window.onload=mermaid.initialize();
        </script>
        <link href="./static/css/mermaid-diagram.css" rel="stylesheet">
    </head>
</html>

注意：mermaid默认对class="meramid"有效，如果你的class是其他的，比如为class=“language-mermaid”, 需指定选择器。

<script>
    window.onload=function(){
        mermaid.initialize({ startOnLoad: false });
        await mermaid.run({
        	querySelector: '.language-mermaid',
        });
    };
</script>

还可以使用getElementById,querySelectorAll等选择器。

<script>
    mermaid.initialize({ startOnLoad: false });
    await mermaid.run({
      nodes: [document.getElementById('someId'), document.getElementById('anotherId')],
    });
    await mermaid.run({
      nodes: document.querySelectorAll('.yetAnotherClass'),
    });
</script>

3.render

通过mermaid.render方法对指定的元素进行渲染

<script type="module">
  mermaid.initialize({ startOnLoad: false });

  // Example of using the render function
  const drawDiagram = async function () {
    element = document.querySelector('#graphDiv');
    const graphDefinition = 'graph TB\na-->b';
    const { svg } = await mermaid.render('graphDiv', graphDefinition);
    element.innerHTML = svg;
  };

  await drawDiagram();
</script>

更多用法详见官网

4.initialize参数

我们上面使用的不带参数，mermaid提供了很多参数，常用参数如下：
更多参数详见https://mermaid.js.org/config/schema-docs/config.html

theme: 主题，目前支持default, forest, dark 和 neutral
flowchart: 流程图参数
gantt：甘特图参数

mermaid.initialize({ 
      "theme": 'forest',//default, forest, dark or neutral
      // themeCSS: '.node rect { fill: red; }',
      "logLevel": 3,
      "flowchart": {  curve: 'linear' },
      "gantt": {  axisFormat: '%m/%d/%Y' },
      "sequence": {  actorMargin: 50 },
      // sequenceDiagram: { actorMargin: 300 } // deprecated
    });

5.mermaid示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
    <script>
    	window.onload=mermaid.initialize({"theme": "forest"});
    </script>
</head>
<body>
    <div class="mermaid">
        sequenceDiagram 
        	A->> B: request!
        	B ->> A: response!
    </div>
</body>
</html>