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

archetypes/default.md

@@ -21,6 +21,11 @@ contentCopyright: false
 reward: false
 mathjax: false
 mathjaxEnableSingleDollar: false
+
+flowchartDiagrams:
+  enable: false
+  options: ""
+
 ---
 
 <!--more-->

exampleSite/config.toml

@@ -101,6 +101,10 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
     clientId = ""           # Your client ID
     clientSecret = ""       # Your client secret
 
+  [params.flowchartDiagrams]# see https://blog.olowolo.com/example-site/post/js-sequence-diagrams/
+    enable = false
+    options = ""
+
   [params.busuanzi]         # count web traffic by busuanzi                             # 是否使用不蒜子统计站点访问量
     enable = false
     siteUV = true

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.

layouts/partials/scripts.html

@@ -8,6 +8,19 @@
   <script type="text/javascript" src="{{ "lib/jquery/jquery-3.2.1.min.js" | relURL }}"></script>
   <script type="text/javascript" src="{{ "lib/slideout/slideout-1.0.1.min.js" | relURL }}"></script>
   {{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
+{{- end -}}
+
+<!-- flowchart -->
+{{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}}
+<script>
+  {{- if .Params.flowchartDiagrams.options -}}
+  window.flowchartDiagramsOptions = {{ .Params.flowchartDiagrams.options | safeJS }};
+  {{- else if .Site.Params.flowchartDiagrams.options -}}
+  window.flowchartDiagramsOptions = {{ .Site.Params.flowchartDiagrams.options | safeJS }};
+  {{- end -}}
+</script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/raphael.min.js" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/release/flowchart.min.js" integrity="sha256-zNGWjubXoY6rb5MnmpBNefO0RgoVYfle9p0tvOQM+6k=" crossorigin="anonymous"></script>
 {{- end }}
 <script type="text/javascript" src="{{ "dist/even.min.js?v=3.0.1" | relURL }}"></script>
 

src/js/even.js

@@ -205,4 +205,23 @@ Even._linkToc = function () {
   }
 }
 
+Even.flowchart = function () {
+  if (!window.flowchart) return
+
+  const blocks = document.querySelectorAll('pre code.language-flowchart')
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
+    const rootElement = block.parentElement
+
+    const container = document.createElement('div')
+    const id = `js-flowchart-diagrams-${i}`
+    container.id = id
+    container.className = 'align-center'
+    rootElement.parentElement.replaceChild(container, rootElement)
+
+    const diagram = flowchart.parse(block.childNodes[0].nodeValue)
+    diagram.drawSVG(id, window.flowchartDiagramsOptions ? window.flowchartDiagramsOptions : {})
+  }
+}
+
 export {Even}

src/js/main.js

@@ -9,5 +9,7 @@ $(document).ready(function () {
   Even.fancybox()
 })
 
+Even.flowchart()
+
 hljs.initHighlighting()
 Even.highlight()