<!DOCTYPE html>
< html lang = "zh" >
< head >
< meta charset = "utf-8" / >
< title > SequenceDiagram - Editor.md examples< / title >
< link rel = "stylesheet" href = "css/style.css" / >
< link rel = "stylesheet" href = "../css/editormd.min.css" / >
< link rel = "shortcut icon" href = "https://pandao.github.io/editor.md/favicon.ico" type = "image/x-icon" / >
< / head >
< body >
< div id = "layout" >
< header >
< h1 > SequenceDiagram 时序图/序列图< / h1 >
< p > Based on SequenceDiagram.js：< a href = "http://bramp.github.io/js-sequence-diagrams/" target = "_blank" > http://bramp.github.io/js-sequence-diagrams/< / a > < / p >
< / header >
< div id = "test-editormd" >
< textarea style = "display:none;" > #### Setting
{
sequenceDiagram : true
}
#### Syntax
```seq
.........
```
# or
```sequence
.........
```
#### Example
```seq
A->B: Message
B->C: Message
C->A: Message
```
```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```< / textarea >
< / div >
< / div >
< script src = "js/jquery.min.js" > < / script >
< script src = "../editormd.js" > < / script >
< script type = "text/javascript" >
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
sequenceDiagram : true
});
});
< / script >
< / body >
< / html >
