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

Close #35

2 files changed, 20 insertions, 0 deletions

diff --git a/src/js/even.js b/src/js/even.js
index ca83a93..6b544a4 100644
--- a/src/js/even.js
+++ b/src/js/even.js
@@ -224,4 +224,23 @@ Even.flowchart = function () {
   }
 }
 
+Even.sequence = function () {
+  if (!window.Diagram) return
+
+  const blocks = document.querySelectorAll('pre code.language-sequence')
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
+    const rootElement = block.parentElement
+
+    const container = document.createElement('div')
+    const id = `js-sequence-diagrams-${i}`
+    container.id = id
+    container.className = 'align-center'
+    rootElement.parentElement.replaceChild(container, rootElement)
+
+    const diagram = Diagram.parse(block.childNodes[0].nodeValue)
+    diagram.drawSVG(id, window.sequenceDiagramsOptions ? window.sequenceDiagramsOptions : {theme: 'simple'})
+  }
+}
+
 export {Even}
diff --git a/src/js/main.js b/src/js/main.js
index bae31d9..289b8dc 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -10,6 +10,7 @@ $(document).ready(function () {
 })
 
 Even.flowchart()
+Even.sequence()
 
 hljs.initHighlighting()
 Even.highlight()