...
<!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" +" participant 镇街收件意见" +" participant 镇街初审意见" +" participant 镇街复审意见" +" participant 中心初审意见" +" participant 中心复审意见" +" participant 区局终审意见" +" Note 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>