This theme supports generating various diagrams from a text description using jekyll-diagrams plugin. Below, we generate a few examples of such diagrams using languages such as mermaid, plantuml, vega-lite, 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 README.

Mermaid

Install mermaid using node.js package manager npm by running the following command:

npm install -g mermaid.cli

The diagram below was generated by the following code:

{% mermaid %}
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
{% endmermaid %}
JohnAliceHello John, how are you?Great!JohnAlice
A
B
C
D
Rendering Failed: mmdc --puppeteerConfigFile /home/runner/work/psurukuc.github.io/psurukuc.github.io/vendor/bundle/ruby/3.0.0/gems/jekyll-diagrams-0.10.0/vendor/mermaid_puppeteer_config.json --input /tmp/input20231114-2528-ri5v7z --output /tmp/output20231114-2528-6jzzsl.svg: node:internal/process/promises:288 triggerUncaughtException(err, true /* fromPromise */); ^ Error: Evaluation failed: Error: Parse error on line 4: ... weekdays 2014-01-10section A section -----------------------^ Expecting 'taskData', got 'NL' at c.parseError (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:406363) at c.parse (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:407529) at Object.e.draw (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:707598) at Object.render (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:761043) at s (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:8:233) at Object.init (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:8:318) at __puppeteer_evaluation_script__:17:20 at ExecutionContext._evaluateInternal (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:122:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async ExecutionContext.evaluate (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:48:12) at async ElementHandle.evaluate (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:12) at async ElementHandle.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:20) -- ASYNC -- at ExecutionContext. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15) at ElementHandle.evaluate (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:42) at ElementHandle. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23) at ElementHandle.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:40) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) -- ASYNC -- at ElementHandle. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15) at DOMWorld.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/DOMWorld.js:156:21) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) -- ASYNC -- at Frame. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15) at Page.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/Page.js:347:29) at Page. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23) at /usr/local/lib/node_modules/mermaid.cli/index.bundle.js:83:14 at Generator.next () at step (/usr/local/lib/node_modules/mermaid.cli/index.bundle.js:4:191) at /usr/local/lib/node_modules/mermaid.cli/index.bundle.js:4:361 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Node.js v18.18.2 </div>
Rendering Failed: mmdc --puppeteerConfigFile /home/runner/work/psurukuc.github.io/psurukuc.github.io/vendor/bundle/ruby/3.0.0/gems/jekyll-diagrams-0.10.0/vendor/mermaid_puppeteer_config.json --input /tmp/input20231114-2528-98k7xn --output /tmp/output20231114-2528-q0dpzk.svg: node:internal/process/promises:288 triggerUncaughtException(err, true /* fromPromise */); ^ Error: Evaluation failed: Error: Parse error on line 1: flowchart TD A[S ^ Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA' at Yt.parseError (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:486512) at Yt.parse (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:487678) at Object.e.getClasses (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:749437) at Object.render (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:1:759998) at s (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:8:233) at Object.init (file:///usr/local/lib/node_modules/mermaid.cli/mermaid.min.js:8:318) at __puppeteer_evaluation_script__:17:20 at ExecutionContext._evaluateInternal (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:122:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async ExecutionContext.evaluate (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/ExecutionContext.js:48:12) at async ElementHandle.evaluate (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:12) at async ElementHandle.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:20) -- ASYNC -- at ExecutionContext. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15) at ElementHandle.evaluate (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:55:42) at ElementHandle. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23) at ElementHandle.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/JSHandle.js:478:40) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) -- ASYNC -- at ElementHandle. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15) at DOMWorld.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/DOMWorld.js:156:21) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) -- ASYNC -- at Frame. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:111:15) at Page.$eval (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/Page.js:347:29) at Page. (/usr/local/lib/node_modules/mermaid.cli/node_modules/puppeteer/lib/helper.js:112:23) at /usr/local/lib/node_modules/mermaid.cli/index.bundle.js:83:14 at Generator.next () at step (/usr/local/lib/node_modules/mermaid.cli/index.bundle.js:4:191) at /usr/local/lib/node_modules/mermaid.cli/index.bundle.js:4:361 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Node.js v18.18.2 </div>