Gatsby.jsでmermaidを利用する方法

Gatsby.js はマークダウンを使用したブログの作成をサポートしていますが、マークダウン内でダイアグラムを描くのは困難です。

そこで、Gatsby プラグインのgatsby-remark-mermaidを利用することで、マークダウン内で mermaid.js のダイアグラムを描くことが可能になります。この記事では、その設定方法を詳しく解説します。

mermaid.js とは何か

mermaid.js は、マークダウンや HTML などのテキストベースのフォーマットを使用してフローチャート、シーケンス図、ガントチャート、クラス図などのダイアグラムを作成するための JavaScript のライブラリです。

コードを書くことで視覚的なダイアグラムを生成することができ、それらのダイアグラムはブラウザでレンダリングされ、静的ウェブページやマークダウンファイルで表示することが可能です。

mermaid.js は、エンジニアやプロジェクトマネージャーなど、複雑なシステムやプロセスを視覚化する必要がある人々にとって有用なツールです。特に、ドキュメンテーションやプロジェクトの計画を作成する際に役立ちます。

パッケージのインストール

まず、gatsby-remark-mermaid をプロジェクトにインストールします。ターミナルで以下のコマンドを実行します。

npm install gatsby-remark-mermaid

このコマンドにより、gatsby-remark-mermaid がプロジェクトに追加されます。

gatsby-config.js への設定追加

次に、gatsby-config.js ファイルを開き、以下の設定を追加します。options の中身はお好みで設定するとよいです。

const puppeteer = require('puppeteer');

// ...
{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-mermaid`,
        options: {
          launchOptions: {
            executablePath: puppeteer.executablePath(),
          },
          svgo: {
            plugins: [{ name: 'removeTitle', active: false }]
          },
          mermaidOptions: {
            theme: 'neutral',
            themeCSS: '.node rect { fill: #fff; }'
          }
        },
      },
    ],
  },
},

これにより、gatsby-remark-mermaid が Gatsby のビルドプロセス中にマークダウンファイル内の Mermaid ダイアグラムを適切にレンダリングします。

マークダウンでの記述方法

gatsby-remark-mermaid を設定したら、マークダウンファイル内で以下のように Mermaid のシンタックスを使用してダイアグラムを書くことができます。

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

このコードは、A から B と C へ、そして B と C から D へのリンクを持つダイアグラムを描きます。

まとめ

Gatsby.js では、gatsby-remark-mermaid を使用してマークダウンで Mermaid のダイアグラムを描くことができます。

mermaid.js はテキストベースでダイアグラムを作成する強力なツールであり、パッケージのインストールから設定、マークダウンでの記述方法までを理解し、自分のブログに効果的なダイアグラムを追加しましょう。

ただし、Mermaid のシンタックスは独自のものなので、公式ドキュメントを参照しながら適切に記述することが重要です。