js-sequence-diagrams > 時序圖

時間 2019-11-08

標籤 sequence diagrams 時序欄目 JavaScript 简体版

原文原文鏈接

...html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>時序圖</title>
        <script src="js/webfont.js"></script>
        <script src="js/underscore.js"></script>
        <script src="js/snap.svg-min.js"></script>
        <script src="js/sequence-diagram-min.js"></script>
    </head>
    <body>
        <pre id="text">
Title: 標題
    participant 名稱     // 聲明
    Note left of 名稱:註釋的內容 (左)
    Note right of 名稱:註釋的內容 (右)
    Note over 名稱:註釋的內容 (中間)
    Note over 稱呼,名稱: 顯示的內容 (跨越 | 兩個)
    稱呼->名稱:顯示的內容 // 直線
    稱呼-->名稱:顯示的內容 // 虛線
    名稱->>稱呼:顯示的內容 // 大箭頭
    稱呼-->>名稱     // 聲明:顯示的內容 // 虛線加大箭頭，返回都最初
    名稱-->>名稱:顯示的內容   // 本身》本身

        </pre> 
        <!-- 語法 「」 https://github.com/bramp/js-sequence-diagrams/blob/master/src/grammar.jison -->
        <div id="diagram"></div>
    </body>
    <script>
        
        /*var t ="Title: This is a title"
            +"\nparticipant 鎮街收件意見"
            +"\nparticipant 鎮街初審意見"
            +"\nparticipant 鎮街複審意見"
            +"\nparticipant 中心初審意見"
            +"\nparticipant 中心複審意見"
            +"\nparticipant 區局終審意見"
            +"\nNote right of 鎮街收件意見: 鎮街收件意見...";*/
            
        //var d = Diagram.parse(t);
        var d = Diagram.parse(document.getElementById('text').innerText);
        //var diagram = Diagram.parse(document.getElementById('uml').innerText);
        var options = {
            //更改圖表的樣式，一般是'simple'，'hand'之一。可使用registerTheme（...）註冊新主題。
            theme: 'simple'
            //應用於圖表svg標記的CSS樣式。（僅在使用snap.svg時支持）
        };
        d.drawSVG('diagram', options);
        
    </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。