页面时序图工具

这段时间由于项目中需要用到时序图，自己也研究了一下，主要接触了两个前台的时序图js库：

1.jumly

2.mermaid

下面我来大致说一下我的使用感受把；

一.JUMLY是一个用来做时序图的js库；

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

学习时需要注意的点：

1.对汉字的支持不太好，建议使用英文；

2.注意缩进，@message前有没有缩进，有几个缩进出的效果完全不一样；

3.@ 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或是自己写样式 就可以；

好了，两个时序图工具就写到这里吧！

注意：以上时序图的数据都是随便写的！