1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <!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>
|