diff options
author | olOwOlo <26087907+olOwOlo@users.noreply.github.com> | 2018-03-12 21:44:54 +0800 |
---|---|---|
committer | olOwOlo <26087907+olOwOlo@users.noreply.github.com> | 2018-03-12 21:44:54 +0800 |
commit | 5bcf92d8fe6e0b3f350a5122df92ac51c4dbe18d (patch) | |
tree | abec48081bc766df5a2b11a32bea2035a177f2d9 /exampleSite/content/post | |
parent | 7043881ae2a712487c0557926d75384a9d35b6ac (diff) |
feat: generate sequence diagrams from code blocks (#35)
Close #35
Diffstat (limited to 'exampleSite/content/post')
-rw-r--r-- | exampleSite/content/post/js-sequence-diagrams.md | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/exampleSite/content/post/js-sequence-diagrams.md b/exampleSite/content/post/js-sequence-diagrams.md new file mode 100644 index 0000000..3ca3a1c --- /dev/null +++ b/exampleSite/content/post/js-sequence-diagrams.md @@ -0,0 +1,95 @@ +--- +title: "JS Sequence Diagrams" +date: 2015-03-04T21:57:45+08:00 +draft: false + +sequenceDiagrams: + enable: true + options: "{theme: 'hand'}" +--- + +## Usage + +```sequence +Andrew->China: Says Hello +Note right of China: China thinks\nabout it +China-->Andrew: How are you? +Andrew->>China: I am good thanks! +``` + +<!--more--> + + ```sequence + Andrew->China: Says Hello + Note right of China: China thinks\nabout it + China-->Andrew: How are you? + Andrew->>China: I am good thanks! + ``` + +## Configuration + +Configure for all home and regular pages: + +```toml +[params.sequenceDiagrams] + enable = true + options = "{theme: 'hand'}" +``` + +Configure for a single post in the front matter (**Params in front matter have higher precedence**): + +```yml +sequenceDiagrams: + enable: true + options: "{theme: 'hand'}" +``` + +### Options + +```js +options = { + // Change the styling of the diagram, typically one of 'simple', 'hand'. New themes can be registered with registerTheme(...). + theme: string, + + // CSS style to apply to the diagram's svg tag. (Only supported if using snap.svg) + css_class: string, +} +``` + +See more information from https://github.com/bramp/js-sequence-diagrams. + +## Examples + +```sequence +Title: Here is a title +A->B: Normal line +B-->C: Dashed line +C->>D: Open arrow +D-->>A: Dashed open arrow +``` + + ```sequence + Title: Here is a title + A->B: Normal line + B-->C: Dashed line + C->>D: Open arrow + D-->>A: Dashed open arrow + ``` + +--- + +```sequence +# 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 +``` + + ```sequence + # 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 + ``` |