Eleventy（Nunjucks）でMermaid.jsを表示できるように設定する方法

きっかけ

会社のブログで図として表現したい記事があったので、Mermaid（マーメイド）を表示できるように、Nunjucksのテンプレートを修正しました。

このサイトも会社のサイトも、Eleventyのテンプレートとして、Nunjucksを使っています。

Nunjucks テンプレートを作成

テンプレートを作成します。

# src/_includes/_mermaid.njk
{%- if my_has_mermaid -%}
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.12.2/+esm';

      mermaid.initialize({
        startOnLoad: true,
        theme: 'default',
      });
    </script>
{%- endif -%}

テンプレート（_mermaid.njk）を作成

テンプレートを読み込む

以下のコードで、任意の場所で読み込みます。

# src/_includes/base.njk
<div>
    {% include "_mermaid.njk" %}
</div>

base.njk にテンプレートを挿入

フロントマターを修正

該当の記事のフロントマターに my_has_mermaid: true を追加するだけで良いです。

---
date: 1990-01-01 09:00:00
description: DESCRIPTION
layout: _post.njk
my_has_mermaid: true
my_is_post: true
title: TITLE
updatedDate: 1990-01-01 09:00:00
---

Mermaid（マーメイド）を表示

サンプル 01

--- title: サンプル 01 --- erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Mermaid（マーメイド）記法でER図

サンプル 02

--- title: サンプル 02 --- erDiagram CUSTOMER ||--o{ ORDER: places CUSTOMER { string name string custNumber string sector } ORDER ||--|{ LINE-ITEM: contains ORDER { int orderNumber string deliveryAddress } LINE-ITEM { string productCode int quantity float pricePerUnit }

Mermaid（マーメイド）記法でER図

コメントを投稿する

記事への感想やフィードバックなど、お気軽に書き込んでいただけると嬉しいです。

Googleログイン または匿名で利用できます。また、自分のコメントは後から編集・削除が可能です。

データは管理者が運用するサーバー（https://comentario.teruhirokomaki.com）に保存・管理されます。