[移动开发] mermaid

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> mermaid -> 正文阅读

[移动开发]mermaid

<!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>