Docusaurus で Mermaid を表示できるようにする

はじめに

Meta社が管理する React ベースのドキュメント管理ツール Docusaurus 。
Docusaurus で Mermaid を表示するために必要な手順を記載します。

注意

• 事前に Docusaurus はセットアップが完了している前提で記載します
• 本記事は npm を用いて必要なパッケージをインストールします。 yarn, pnpm を利用されている方は適宜読み替えてください

Mermaid を表示できるよう設定する。

Mermaid を表示できるようにするまでの大まか流れは以下の通りです。

• 必要な npm パッケージの追加
• docusaurus.config.ts の変更

必要な npm パッケージの追加

npm パッケージ @docusaurus/theme-mermaid を追加します。

npm install --save @docusaurus/theme-mermaid

docusaurus.config.ts の変更

docusaurus.config.js を使用している場合は読み替えてください。

docusaurus.config.ts

  import { themes as prismThemes } from 'prism-react-renderer';
  import type { Config } from '@docusaurus/types';
  import type * as Preset from '@docusaurus/preset-classic';


  const config: Config = {
    // その他設定 ...

+   markdown: {
+     mermaid: true,
+   },
+   themes: ["@docusaurus/theme-mermaid"],

    // その他設定 ...
  };

  export default config;

Ref