feat: generate flowchart diagrams from code blocks (#35)

1 files changed, 131 insertions, 0 deletions

diff --git a/exampleSite/content/post/js-flowchart-diagrams.md b/exampleSite/content/post/js-flowchart-diagrams.md
new file mode 100644
index 0000000..2111c52
--- /dev/null
+++ b/exampleSite/content/post/js-flowchart-diagrams.md
@@ -0,0 +1,131 @@
+---
+title: "JS Flowchart Diagrams"
+date: 2015-03-04T21:57:50+08:00
+draft: false
+
+flowchartDiagrams:
+  enable: true
+  options: "{
+              'x': 0,
+              'y': 0,
+              'line-width': 3,
+              'line-length': 50,
+              'text-margin': 10,
+              'font-size': 14,
+              'font-color': 'black',
+              'line-color': 'black',
+              'element-color': 'black',
+              'fill': 'white',
+              'yes-text': 'yes',
+              'no-text': 'no',
+              'arrow-end': 'block',
+              'scale': 1,
+              'i-am-a-comment-1': 'Do not use //!',
+              'i-am-a-comment-2': 'style symbol types',
+              'symbols': {
+                  'start': {
+                    'font-color': 'red',
+                    'element-color': 'green',
+                    'fill': 'yellow'
+                  },
+                  'end': {
+                      'class': 'end-element'
+                  }
+              },
+              'i-am-a-comment-3': 'even flowstate support ;-)',
+              'flowstate': {
+                'request': {'fill': 'blue'}
+              }
+            }"
+---
+
+## Usage
+
+```flowchart
+st=>start: Start|past:>http://www.google.com[blank]
+e=>end: End:>http://www.google.com
+op1=>operation: My Operation|past
+op2=>operation: Stuff|current
+sub1=>subroutine: My Subroutine|invalid
+cond=>condition: Yes
+or No?|approved:>http://www.google.com
+c2=>condition: Good idea|rejected
+io=>inputoutput: catch something...|request
+
+st->op1(right)->cond
+cond(yes, right)->c2
+cond(no)->sub1(left)->op1
+c2(yes)->io->e
+c2(no)->op2->e
+```
+
+<!--more-->
+
+    ```flowchart
+    st=>start: Start|past:>http://www.google.com[blank]
+    e=>end: End:>http://www.google.com
+    op1=>operation: My Operation|past
+    op2=>operation: Stuff|current
+    sub1=>subroutine: My Subroutine|invalid
+    cond=>condition: Yes
+    or No?|approved:>http://www.google.com
+    c2=>condition: Good idea|rejected
+    io=>inputoutput: catch something...|request
+    
+    st->op1(right)->cond
+    cond(yes, right)->c2
+    cond(no)->sub1(left)->op1
+    c2(yes)->io->e
+    c2(no)->op2->e
+    ```
+
+## Configuration
+
+Configure for all home and regular pages:
+
+```toml
+[params.flowchartDiagrams]
+  enable = true
+  options = ""
+```
+
+Configure for a single post in the front matter (**Params in front matter have higher precedence**):
+
+```yml
+flowchartDiagrams:
+  enable: true
+  options: "{
+              'x': 0,
+              'y': 0,
+              'line-width': 3,
+              'line-length': 50,
+              'text-margin': 10,
+              'font-size': 14,
+              'font-color': 'black',
+              'line-color': 'black',
+              'element-color': 'black',
+              'fill': 'white',
+              'yes-text': 'yes',
+              'no-text': 'no',
+              'arrow-end': 'block',
+              'scale': 1,
+              'i-am-a-comment-1': 'Do not use /​/!',
+              'i-am-a-comment-2': 'style symbol types',
+              'symbols': {
+                  'start': {
+                    'font-color': 'red',
+                    'element-color': 'green',
+                    'fill': 'yellow'
+                  },
+                  'end': {
+                      'class': 'end-element'
+                  }
+              },
+              'i-am-a-comment-3': 'even flowstate support ;-)',
+              'flowstate': {
+                'request': {'fill': 'blue'}
+              }
+            }"
+```
+
+See more information from https://github.com/adrai/flowchart.js.