美人鱼 Mermaid.js

Enjoy-li

已于 2022-12-08 10:42:58 修改

阅读量2k

点赞数

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

于 2022-12-08 10:32:49 首次发布

本文链接：https://blog.csdn.net/weixin_45062275/article/details/128231949

版权

Markdown 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

mermaid

文章目录

mermaid

Mermaid允许您使用文本和代码创建图表和可视化

官网地址

在线练习 Mermaid Live Editor

1. 流程图 graph（flowchart）

请添加图片描述

1.1 一图打尽知识点

```mermaid
graph TB

    %% subgraph子图形,可指定方向direction
    subgraph markId [子图形]
        %% TB、LR 画图方向
        direction LR

        %% 元素外观和线条类型
        1[(1-柱形)]

        %% 特殊符号处理方式:1、描述文字整体加引号；2、用于转义字符的实体代码
        2["2-方形#quot;"]
        3[["3-门#9829;"]]
        4(4-圆角)
        5((5-圆形))
        6>6-tag]
        7{7-菱形}
        8{{8-六边形}}
        9[/9-平行四边形-正/]
        10[\10-平行四边形-反\]
        11[/11-梯形-正\]

        %% fa:fa-camera-retro，为fontawesome 字体图标 ，Mermaid现在仅与Font Awesome版本4和5兼容
        12[\12-梯形-倒 fa:fa-camera-retro/]
        1--> 2
        2--->|实线箭头|3
        3-.->4
        4-. 虚线箭头 .-> 5
        5 ==> 6
        6 == 加粗实线箭头 ==> 7

        %% `&` 表示 当前位置节点集合分别与上下节点相连
        8-->9 & 10-->11
        11-->12

        %% 内联样式 style nodeId CSSText
        style 12 fill:#f9f,stroke:#333,stroke-width:4px
        style 11 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

        %% Class样式,定义`classDef className CSSText`,
        %% 匹配 1、`class node1Id,node2Id Bclass;`；2、`node2Id:::className`
        %% 如果一个类被命名为default，那么它将被分配给没有特定类定义的所有类
        classDef default fill:pink;
        classDef Aclass,Cclass  fill:#f96;
        classDef Bclass fill:green;
        class 2,3 Bclass;
        12:::Bclass
    end

1.2 连线的样式和长度

长度	1	2	3
常规	—	----	-----
常规 & 箭头	–>	—>	---->
加粗	===	====	=====
加粗 & 箭头	==>	===>	====>
虚线	-.-	-…-	-…-
虚线 & 箭头	-.->	-…->	-…->

1.3 Interaction 交互 js

<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link" _blank
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link" _blank
  </pre>

  <script>
    // securityLevel='strict'||securityLevel='loose'
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

1.4 预先定义css样式中的

可以预先定义css样式中的类，这些类可以从图定义中应用，如下例所示：

<style>
  .className > rect {
    fill: red;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

源码

```mermaid
graph LR;
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A className

2. 时序图 sequenceDiagram

请添加图片描述

2.1 一图打尽知识点

```mermaid {align="center"  code_block=true}
sequenceDiagram

    %% 变量名client，描述clientDesc；另一种定义形式 `actor client`
    participant client as clientDesc #9829;

    %% `#9829;` 可以使用此处示例的语法转义字符
    participant server as clientDesc #9829;

    %% Actor Menus 链接link和鼠标事件，可多个
    %% 可以有包含指向外部页面的个性化链接的弹出菜单
    link client: 客户端 @ https://dashboard.contoso.com/alice
    link client: 客户端2 @ https://dashboard.contoso.com/alice
    link server: 服务端 @ https://dashboard.contoso.com/alice
    link server: 服务端2 @ https://dashboard.contoso.com/alice
    %%  Actor Menus高级语法 JSON
    links client: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}

    %% Note添加注释
    Note left of client: this is client
    Note right of server: this is server
    Note over client,server: 描述01

    %% autonumber序列号
    autonumber

    %%rect 背景高亮
    rect rgb(200, 150, 255)

    %% alt即alternative paths，类似if-else,匹配end结束
    alt 替代路径1

    %% 箭头后的`+&-`激活和停用活动
    client ->>+ server: 描述02
    else 替代路径2
    %% 箭头后的`+&-`激活和停用活动
    client ->> server: 描述03
    end

    %% opt即 optional ,匹配end结束
    opt 可选序列
        client->>server: 描述04
    end

    rect rgb(191, 223, 255)
    %% par即Parallel，并行发生的动作，可嵌套，匹配end结束
    par client to server
    server --)- client: 描述05
    and client to server
    server --) client: 描述06
    end
    end

    client -) server: 描述07
    end

    %% Loops  循环体，匹配end结束
    loop 持续连接中
    rect rgb(191, 223, 255)
    client --x server: 请求
    server -x client: 响应
    end
    end

    rect rgb(191, 223, 255)
    %% Critical Region关键区域，显示必须在有条件的情况下自动发生的操作，
    %% 可不要option项，匹配end结束
    critical 建立client和server
        client-->>server: connect
    option 连接超时
        client-->>client: 打印日志
    option 身份认证未通过
        server-->>client: server返回错误信息
    end
    end

    rect rgb(191, 223, 255)
    %% break指示流中序列的停止（通常用于模拟异常），匹配end结束
    break 连接超时
    client--xserver: connect
    end
    end