1<!DOCTYPE html> 2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 3<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 4<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 6 <head> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 9 <title></title> 10 <link rel="stylesheet" href="../dist/sequence-diagram-min.css"> 11 <style type="text/css"> 12 .signal rect { 13 opacity: 0; 14 } 15 .signal text { 16 fill: #000000; 17 } 18 19 .note rect, 20 .note path { 21 fill: #ffff00; 22 } 23 .title rect, 24 .title path, 25 .actor rect, 26 .actor path { 27 fill: #ffffff 28 } 29 .signal text:hover { 30 fill: #aaaaaa 31 } 32 .note path { 33 stroke: #ff0000; 34 stroke-width: 100px; 35 } 36 </style> 37 </head> 38 <body> 39 <textarea id="language" rows="10" cols="50"> 40#Note left of A: Note to the\n left of A 41#Note right of A: Note to the\n right of A 42#Note over A: Note over A 43Note over A,B: Note over A,B 44 </textarea> 45 <button id="parse" type="button">Click Me!</button> 46 47 <div id="diagram"></div> 48 49 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>--> 50 <script src="../bower_components/jquery/dist/jquery.min.js"></script> 51 52 <script src="../bower_components/underscore/underscore-min.js"></script> 53 <!--script src="../bower_components/lodash/dist/lodash.min.js"></script--> 54 55 <!-- Snap.svg --> 56 <script src="../bower_components/snap.svg/dist/snap.svg.js"></script> 57 <script src="../bower_components/bower-webfontloader/webfont.js"></script> 58 59 <!-- or Raphael --> 60 <script src="../bower_components/raphael/raphael.min.js"></script> 61 62 <script src="../build/diagram-grammar.js"></script> 63 <script src="../src/theme.js"></script> 64 <script src="../src/theme-snap.js"></script> 65 <script src="../src/theme-raphael.js"></script> 66 <script src="../fonts/daniel/daniel_700.font.js"></script> 67 68 <script src="../src/sequence-diagram.js"></script> 69 <script src="../src/jquery-plugin.js"></script> 70 71 <!--script src="../dist/sequence-diagram.js"></script--> 72 <!--script src="../dist/sequence-diagram-min.js"></script--> 73 <script> 74 $(document).ready(function(){ 75 $('#parse').click(_.throttle( function() { 76 77 //try { 78 var diagram = Diagram.parse($('#language').val()); 79 console.log(diagram); 80 81 diagram.drawSVG('diagram', {theme: 'hand'}); 82 //} catch (e) { 83 // console.log(e); 84 //} 85 }, 100)); 86 }); 87 </script> 88 </body> 89</html> 90 91 92 93