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

2 files changed, 21 insertions, 0 deletions

diff --git a/src/js/even.js b/src/js/even.js
index 0d5813a..ca83a93 100644
--- a/src/js/even.js
+++ b/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}
diff --git a/src/js/main.js b/src/js/main.js
index 1764dfd..bae31d9 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -9,5 +9,7 @@ $(document).ready(function () {
   Even.fancybox()
 })
 
+Even.flowchart()
+
 hljs.initHighlighting()
 Even.highlight()