頁面時序圖工具

這段時間由于項目中需要用到時序圖，自己也研究了一下，主要接觸了兩個前台的時序圖js庫：

1.jumly

2.mermaid

下面我來大緻說一下我的使用感受把；

一.JUMLY是一個用來做時序圖的js庫；

   網址：http://jumly.tmtk.net/

學習時需要注意的點：

1.對漢字的支援不太好，建議使用英文；

2.注意縮進，@message前有沒有縮進，有幾個縮進出的效果完全不一樣；

[email protected] message箭頭暫時無法設定長度，顯得不太好看 4.兩個實體間的距離也沒發設定；

效果如下圖

源碼如下：

需要引的包：

<

script

src

=

'//code.jquery.com/jquery-2.1.3.min.js'

></

script

>

<

script

src

=

'//coffeescript.org/extras/coffee-script.js'

></

script

>

<

script

src

=

'//jumly.tmtk.net/public/jumly.min.js'

></

script

>

          <script type='text/jumly+sequence'>

@found "MSC實體層", ->

  @fragment "Connect":->

  @message "1:Setup", "RBC實體層/STU-CC", ->

     @reply "2:Setup Ackownledge"

    @message "3：Connect", "RBC實體層/STU-CC", ->

     @reply "4:ConnectAck"

  @fragment "Disconnect":->

  @message "5:Disconnect", "RBC實體層/STU-CC", ->

     @reply "6:Release Cpmplete"

    @message "7:Release Cpmplete", "RBC實體層/STU-CC", ->

</script>

 二.mermaid時序圖工具

  偶然間網上查到的這個工具，網址是： https://knsv.github.io/mermaid/#gant-diagrams   中文很少有使用的資料，但我最後還是在項目中使用了這個工具，主要還是文法要求不嚴格，時序圖樣式易于調整； 先來看看效果把

我感覺樣式也挺好看的，還可以再優化，來看看代碼： 引包：                <script type="text/javascript" src="/jquery/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="/jquery/jumly/mermaid.js"></script>

   //初始化加載   時序圖的内容

    var config = {

        startOnLoad:true,

        arrowMarkerAbsolute:true

   };

   mermaid.initialize(config);

  <div  class="mermaid"  style="height:150px;">

       sequenceDiagram;

participant MSC;

        participant Pri口;

                                               participant STU/CC;

                                               MSC-->>STU/CC:SETUP;

                                               STU/CC-->>MSC:SETUP ACKNOWLEDGE;

     </div>

這樣就ok了，其中的樣式還可以自己再慢慢調，可以直接在js或是自己寫樣式 就可以；

好了，兩個時序圖工具就寫到這裡吧！ 注意：以上時序圖的資料都是随便寫的！