From cd4b382799b87d70c59325f44c0f77f375525d92 Mon Sep 17 00:00:00 2001
From: Maruan <alshedivat@users.noreply.github.com>
Date: Sun, 3 Oct 2021 18:26:29 -0700
Subject: [PATCH] Add jekyll-diagrams (#333)

* Add mermaid support via jekyll-diagrams

* Add mermaid install to deploy workflow
---
 .github/workflows/deploy.yml  |  1 +
 Gemfile                       |  1 +
 _config.yml                   |  9 ++++++++
 _posts/2021-07-04-diagrams.md | 43 +++++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+)
 create mode 100644 _posts/2021-07-04-diagrams.md

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index effb9ad..2161a47 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -32,6 +32,7 @@ jobs:
         gem install bundler
         bundle config path vendor/bundle
         bundle install --jobs 4 --retry 3
+        npm install -g mermaid.cli
     - name: Setup deploy options
       id: setup
       run: |
diff --git a/Gemfile b/Gemfile
index 8fd4241..9634030 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 group :jekyll_plugins do
     gem 'jekyll'
+    gem 'jekyll-diagrams'
     gem 'jekyll-email-protect'
     gem 'jekyll-feed'
     gem 'jekyll-github-metadata'
diff --git a/_config.yml b/_config.yml
index 5db77ea..f206210 100644
--- a/_config.yml
+++ b/_config.yml
@@ -137,6 +137,7 @@ keep_files:
 # Plug-ins
 plugins:
   - jekyll/scholar
+  - jekyll-diagrams
   - jekyll-email-protect
   - jekyll-feed
   - jekyll-github-metadata
@@ -178,6 +179,14 @@ scholar:
 
   query: "@*"
 
+# -----------------------------------------------------------------------------
+# Jekyll Diagrams
+# -----------------------------------------------------------------------------
+
+jekyll-diagrams:
+    # configuration, see https://github.com/zhustec/jekyll-diagrams.
+    # feel free to comment out this section if not using jekyll diagrams.
+
 # -----------------------------------------------------------------------------
 # Optional Features
 # -----------------------------------------------------------------------------
diff --git a/_posts/2021-07-04-diagrams.md b/_posts/2021-07-04-diagrams.md
new file mode 100644
index 0000000..7957fce
--- /dev/null
+++ b/_posts/2021-07-04-diagrams.md
@@ -0,0 +1,43 @@
+---
+layout: post
+title: a post with diagrams
+date: 2021-07-04 17:39:00
+description: an example of a blog post with diagrams
+---
+
+This theme supports generating various diagrams from a text description using [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} plugin.
+Below, we generate a few examples of such diagrams using languages such as [mermaid](https://mermaid-js.github.io/mermaid/){:target="\_blank"}, [plantuml](https://plantuml.com/){:target="\_blank"}, [vega-lite](https://vega.github.io/vega-lite/){:target="\_blank"}, etc.
+
+**Note:** different diagram-generation packages require external dependencies to be installed on your machine.
+Also, be mindful of that because of diagram generation the fist time you build your Jekyll website after adding new diagrams will be SLOW.
+For any other details, please refer to [jekyll-diagrams](https://github.com/zhustec/jekyll-diagrams){:target="\_blank"} README.
+
+
+## Mermaid
+
+Install mermaid using `node.js` package manager `npm` by running the following command:
+```bash
+npm install -g mermaid.cli
+```
+
+The diagram below was generated by the following code:
+
+{% raw %}
+```
+{% mermaid %}
+sequenceDiagram
+    participant John
+    participant Alice
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+{% endmermaid %}
+```
+{% endraw %}
+
+{% mermaid %}
+sequenceDiagram
+    participant John
+    participant Alice
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+{% endmermaid %}