Add jekyll-diagrams (alshedivat#333)

* Add mermaid support via jekyll-diagrams

* Add mermaid install to deploy workflow

.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: |

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'

_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
 # -----------------------------------------------------------------------------

_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 %}