Post

Insert mermaid diagram in jekyll site

Posted Updated
By 信雄湊
1 min read
Insert mermaid diagram in jekyll site

Jekyll-mermaid

Method 1: Using a Jekyll Plugin (e.g. jekyll-mermaid)

  1. Add the Plugin to Your Gemfile:
    Open your Gemfile in your Jekyll project and add:
    1

    gem "jekyll-mermaid"

    Then run:

    1

    bundle install
  2. Enable the Plugin in _config.yml:
    Add the plugin under the plugins section: ```yaml plugins:
    • jekyll-mermaid ``` (In older Jekyll versions, you might need to use the gems key instead.)
  3. Write Mermaid Diagrams in Your Markdown Files:
    1
2
3
4
5
6

    # mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Method 2: Including Mermaid.js Directly in Your Templates

  1. Include the Mermaid Library:
    Edit your Jekyll layout (e.g. _layouts/default.html) and add the following script tag in the <head> section:
    1
2
3
4

    <script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
  2. Write Mermaid Diagrams in Markdown Files:
    1
2
3
4
5
6

    # mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I am good thanks!
Computer Science
Utils
This post is licensed under CC BY 4.0 by the author.