Chương 6-Bài 8. Cấu trúc điều khiển sử dụng IF ELSE

Lưu đồ hoạt động

graph TB;
    A[Bắt đầu] --> |kết nối| B{Điều kiện còn <br />đúng không?}
    B --> |"Đúng (True &copy;)"| C[Thực thi các lệnh <br />trong khối IF]
    B:::style1 --> |"Sai (No)"| D[Thực thi các lệnh <br /> trong khối ELSE]
    C --> KT[Kết thúc]
    D --> KT

    style A fill:#f9f,stroke:#333,stroke-width:4px
    style D fill:#bbf,stroke:#f66,stroke-width:2px,color:#000,stroke-dasharray: 5 5
    classDef style1 fill:#0000ff,stroke:#333,stroke-width:4px;

 Sơ đồ thứ 2:

graph TD;
    Start["Bắt đầu"] --> A["Lấy giá trị số A<br />var a = 5;"]
    A --> |"Kiểm tra giá trị số A<br />A có chia hết cho 2 hay không?"| B{"A % 2 == 0 ?"}
    B --> |"TRUE<br/>Chia hết"| Yes["IF<br />In ra màn hình a là số chẵn"]
    B --> |"FALSE<br/>Không Chia hết"| No["ELSE<br/>In ra màn hình a là số lẻ"]
    Yes --> End["Kết thúc"]
    No --> End

    subgraph "kiểm tra"
        A
        B
        Yes
        No
    end

Code tương ứng:

<script type="text/javascript" src="{{ asset('vendors/mermaid/mermaid.min.js') }}"></script>

<script id="wp-mermaid">
    (function($) {
        $(function() {
            debugger;
            if (typeof mermaid !== "undefined") {
                // let block_count = $(".mermaid").length;
                let block_count = $(".MermaidJSRAW").length;
                let i = 0;

                if (block_count > 0) {
                    // $(".mermaid").each(function() {
                    //     let mermaid_content = $(this).html();
                    //     mermaid_content.replace(/<[^>]*>?/gm, "");
                    //     let mermaid_content_decode = $("<textarea/>")
                    //         .html(mermaid_content)
                    //         .text();
                    //     $(this).html(mermaid_content_decode);
                    //     i++;
                    // });

                    $(".MermaidJSRAW").each(function() {
                        debugger;
                        $(this).replaceWith(function(){
                            return $('<div class="mermaid" />').append($(this).contents());
                        }); 
                    });
                }

                if (block_count === i) {
                    debugger;
                    // mermaid.init();
                    mermaid.initialize({
                        theme: 'default',
                        // themeCSS: '.node rect { fill: red; }',
                        logLevel: 3,
                        securityLevel: 'loose',
                        flowchart: {
                            curve: 'basis'
                        },
                        gantt: {
                            axisFormat: '%m/%d/%Y'
                        },
                        sequence: {
                            actorMargin: 50
                        },
                        // sequenceDiagram: { actorMargin: 300 } // deprecated
                    });
                }
            }
        });
    })(jQuery);
</script>

/* --- Custom EnligherJS Start ---------*/
/* ol.EnlighterJS li, ul.EnlighterJS li {
    border: 3px solid red !important;
}

ol.atomicEnlighterJS li, ul.atomicEnlighterJS li {
    border: 3px solid red !important;
} */

.specialline {
    border-left: 3px solid red !important;
}
/* --- Custom EnligherJS End ---------*/

/*=========================================================================================
  File Name: customizer-left.scss
  Description: CSS used for demo purpose only. Remove this css from your project.
  ----------------------------------------------------------------------------------------
  Item name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
  Author: PIXINVENT
  Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

body.dark-layout .customizer-left {
    background-color: #262c49;
}

.customizer-left {
    width: 400px;
    left: -400px;
    padding: 0;
    background-color: #fff;
    z-index: 1051;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    transition: left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}

.customizer-left.open {
    left: 0;
}

.customizer-left .customizer-left-content {
    position: relative;
    height: 100%;
}

.customizer-left .customizer-left-close {
    position: absolute;
    right: 30px;
    top: 20px;
    padding: 7px;
    width: auto;
    z-index: 10;
    color: #626262;
}

.customizer-left .customizer-left-close i {
    font-size: 1.71rem;
}

.customizer-left .customizer-left-toggle {
    background: #7367f0;
    color: #fff;
    display: block;
    box-shadow: -3px 0px 8px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    position: absolute;
    top: 50%;
    width: 38px;
    height: 80px;
    right: -39px;
    text-align: center;
    /* line-height: 40px; */
    cursor: pointer;
}

.customizer-left .customizer-left-toggle:hover {
    color: #fff;
}

.customizer-left .color-box {
    height: 35px;
    width: 35px;
    margin: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.customizer-left .color-box.selected {
    box-shadow: 0 0 0 3px rgba(52, 144, 220, 0.5);
}

.course-curriculum-customizer-left {
    height: 100%;
    overflow: auto;
}

/*==========================================================================================*/

/* --- Custom Mermaid JS START ---- */
.mermaid {
    text-align: center !important;
}

.dark-layout .mermaid {
    background: #fff;
}
/* --- Custom Mermaid JS END ---- */

Lưu đồ Switch Case

stateDiagram
[*] --> SWITCH
SWITCH --> CASE_1
SWITCH --> CASE_2
SWITCH --> CASE_DEFAULT
CASE_1 --> a1
CASE_2 --> a2
CASE_DEFAULT --> a3
a1 --> [*]
a2 --> [*]
a3 --> [*]