页面时序图工具

这段时间由于项目中需要用到时序图，自己也研究了一下，主要接触了两个前台的时序图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 >

          

 二.mermaid时序图工具

  偶然间网上查到的这个工具，网址是： https://knsv.github.io/mermaid/#gant-diagrams

  中文很少有使用的资料，但我最后还是在项目中使用了这个工具，主要还是语法要求不严格，时序图样式易于调整；

先来看看效果把

我感觉样式也挺好看的，还可以再优化，来看看代码：

引包：

               

   //初始化加载   时序图的内容
    var config = {
        startOnLoad:true,
        arrowMarkerAbsolute:true
   };
   mermaid.initialize(config);

 

       sequenceDiagram;
participant MSC;
        participant Pri口;
                                               participant STU/CC;
                                               MSC-->>STU/CC:SETUP;
                                               STU/CC-->>MSC:SETUP ACKNOWLEDGE;
     

这样就ok了，其中的样式还可以自己再慢慢调，可以直接在js或是自己写样式 就可以；

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

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