mermaid-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--

        官方文档：
        https://mermaid-js.github.io/mermaid/#/usage?id=enabling-click-event-and-tags-in-nodes

        在线可视化
        https://mermaid.live/edit#pako:eNpVkE1qw0AMha8itEohvoAXhcZOsgmk0Ow8WQiPnBmS-WEsU4Ltu3ccU2i1kt77nhAasQ2ascRbomjgUisPuT6ayiTbi6P-CkXxPh1ZwAXPzwl2m2OA3oQYrb-9rfxugaAaTwvGIMb6-7xa1St_9jxB3ZwoSojXv87lO0ywb-ynyev_OyZxTh2ajsqOipYSVJReCG7RcXJkdT59XBSFYtixwjK3mjsaHqJQ-TmjQ9QkvNdWQsJS0sBbpEHC19O3v_PK1JbyI9wqzj8k-lxH

        点击事件：
        https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction

        自定义节点样式：
        https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes
    -->


    <style>
        .mermaid {
            display: inline-block;
        }

        /*
            可以自定义节点样式!important 方式样式被默认的覆盖
            https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes
        */
        .cssClass:hover > rect {
            fill: #FF0000 !important;
            stroke: #FFFF00 !important;
            stroke-width: 4px !important;
        }
    </style>
</head>

<body>
<div class="mermaid">
    flowchart TD
    A(串口) --> 1(控制器1)
    A(串口) --> 2(控制器2)
    A(串口) --> 3(控制器3)
    A(串口) --> 4(控制器4)
    A(串口) --> 5(控制器5)

    class 1 cssClass
    click 1 call aaa() "这是一段鼠标悬浮的提示"
</div>
<div class="mermaid">
    flowchart TD
    A(串口) --> 1(控制器1)
    A(串口) --> 2(控制器2)
    A(串口) --> 3(控制器3)
    A(串口) --> 4(控制器4)
    A(串口) --> 5(控制器5)
</div>
<div class="mermaid">
    flowchart TD
    A(串口) --> 1(控制器1)
    A(串口) --> 2(控制器2)
    A(串口) --> 3(控制器3)
    A(串口) --> 4(控制器4)
    A(串口) --> 5(控制器5)
</div>
<div class="mermaid">
    flowchart TD
    A(串口) --> 1(控制器1)
    A(串口) --> 2(控制器2)
    A(串口) --> 3(控制器3)
    A(串口) --> 4(控制器4)
    A(串口) --> 5(控制器5)
</div>
<div class="mermaid">
    flowchart TD
    A(串口) --> 1(控制器1)
    A(串口) --> 2(控制器2)
    A(串口) --> 3(控制器3)
    A(串口) --> 4(控制器4)
    A(串口) --> 5(控制器5)
</div>


<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script>
    mermaid.initialize({
        startOnLoad: true,
        securityLevel: 'loose'
    });

    function aaa() {
        alert("自定义了一个点击事件");
    }
</script>
</body>
</html>