pandao
6 years ago
2 changed files with 114 additions and 69 deletions
@ -1,65 +1,110 @@ |
|||||
<!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> |
|
||||
|
<!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> |
||||
|
<br/> |
||||
|
<p>Web Sequence Diagrams Syntax Examples: <a href="https://www.websequencediagrams.com/" target="_blank">https://www.websequencediagrams.com/</a></p> |
||||
|
</header> |
||||
|
<div id="test-editormd"> |
||||
|
<textarea style="display:none;">#### Setting |
||||
|
|
||||
|
{ |
||||
|
sequenceDiagram : true |
||||
|
} |
||||
|
|
||||
|
#### Syntax |
||||
|
|
||||
|
```seq |
||||
|
......... |
||||
|
``` |
||||
|
|
||||
|
# or |
||||
|
|
||||
|
```sequence |
||||
|
......... |
||||
|
``` |
||||
|
|
||||
|
#### Examples |
||||
|
|
||||
|
```seq |
||||
|
A->B: Message |
||||
|
B->C: Message |
||||
|
C->A: Message |
||||
|
``` |
||||
|
|
||||
|
```seq |
||||
|
Title: Here is a title |
||||
|
A->B: Normal line |
||||
|
B-->C: Dashed line |
||||
|
C->>D: Open arrow |
||||
|
D-->>A: Dashed open arrow |
||||
|
``` |
||||
|
|
||||
|
```seq |
||||
|
D->A: text xxxx |
||||
|
A->B: text xxxx |
||||
|
B->A: Wow! |
||||
|
A->D: Hi~ |
||||
|
``` |
||||
|
|
||||
|
```seq |
||||
|
A->A: text |
||||
|
A-->B: text |
||||
|
note right of A: Note Text |
||||
|
``` |
||||
|
|
||||
|
```seq |
||||
|
# Example of a comment. |
||||
|
Note left of A: Note to the\n left of A |
||||
|
Note right of A: Note to the\n right of A |
||||
|
Note over A: Note over A |
||||
|
Note over A,B: Note over both A and B |
||||
|
``` |
||||
|
|
||||
|
```seq |
||||
|
participant C |
||||
|
participant B |
||||
|
participant A |
||||
|
Note right of A: By listing the participants\n you can change their order |
||||
|
``` |
||||
|
|
||||
|
```seq |
||||
|
A->+B: text |
||||
|
B-->A: text |
||||
|
Note right of A: Note A |
||||
|
note over A,B: Note over A-B |
||||
|
``` |
||||
|
|
||||
|
```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> |
||||
|
|||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue