Next.js (React) で Mermaid 図をレンダリングする方法

技術

2024/10/09

2024/10/10

はじめに

Next.js (React) で Mermaid 図をレンダリングしてみたかったのですが、あまり記事がヒットせず、思った以上に実装に手間取ったので、備忘録として記事を残しておきます。

本題

まずは Mermaid.js をインストールします。

Mermaid.js は CDN 経由でインポートすることもできますが、本記事はパッケージを事前にインストールする方式を前提に解説しています。

> npm install mermaid

実装

以下のコードが具体的な実装例です。

CSS フレームワークとして Tailwind CSS を使用しています。

useEffect を 2 回使用しているところがポイントです。

'use client';

import mermaid from 'mermaid';
import { useEffect, useState } from 'react';

export default function Page() {
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    useEffect(() => {
        mermaid.initialize({ startOnLoad: true });
        mermaid.contentLoaded();
    }, [mounted]);

    if (!mounted) {
        return <></>;
    }

    return (
        <main className="flex w-full justify-center">
            <pre className="mermaid">
                {`
                graph TD
                A[Client] --> B[Load Balancer]
                B --> C[Server01]
                B --> D[Server02]`}
            </pre>
        </main>
    );
}

無事にフロートチャート図がレンダリングされれば成功です。

お疲れ様でした😊

参考

Mermaid | Diagramming and charting tool

Create diagrams and visualizations using text and code.

https://mermaid.js.org/