momo
/
editor.md
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update js sequence diagrams version to v1.0.6, and add more examples.

develop
pandao 6 years ago
parent
f632b1cf53
commit
23c32da708
2 changed files with 114 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 175
      examples/sequence-diagram.html
  2. 8
      lib/sequence-diagram.min.js

175
examples/sequence-diagram.html
View File

@ -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>

8
lib/sequence-diagram.min.js
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save