Astroプロジェクトにダイアグラムを簡単に追加できるMermaidを導入する方法を解説します。Mermaidを使えば、フローチャート、シーケンス図、ガントチャートなどの視覚的な表現を簡単に作成できます。プロジェクトをよりビジュアルで魅力的にするために、さっそく導入方法を確認していきましょう。

Mermaidのインストール

まず、Mermaidをプロジェクトにインストールします。以下のコマンドを使用して、npmを使ってインストールしましょう。

npm install mermaid

MermaidChartコンポーネントの作成

次に、src/components/MermaidChart.astroというファイルを作成し、Mermaidチャートをレンダリングするコンポーネントを作成します。このコンポーネントでは、Astroのプロパティを使ってチャート定義を受け取り、それを表示する役割を持たせます。

---
const { chart } = Astro.props;
---

<div class="mermaid">
    {chart}
</div>

<script>
    import mermaid from 'mermaid';
    mermaid.initialize({ startOnLoad: true });
</script>

<style>
    .mermaid {
        margin-left: auto;
        margin-right: auto;
    }
</style>

このコンポーネントは、渡されたchartを受け取り、Mermaidを使ってその内容をレンダリングします。Mermaidのinitializeメソッドを使い、ページの読み込み時にチャートを自動的に描画するように設定しています。

テーマの適用

Mermaidには複数のテーマが用意されています。デフォルトのテーマを適用することもできますが、プロジェクトのスタイルに合わせてテーマをカスタマイズすることが可能です。ダークテーマを適用する場合は、以下のようにチャート定義の先頭にディレクティブを追加します。

---
const { chart } = Astro.props;
const themedChart = `%%{init: {'theme':'dark'}}%%\n${chart}`;
---

<div class="mermaid">
    {themedChart}
</div>

<script>
    import mermaid from 'mermaid';
    mermaid.initialize({ startOnLoad: true });
</script>

<style>
    .mermaid {
        margin-left: auto;
        margin-right: auto;
    }
</style>

これで、チャートにダークテーマが適用され、統一感のある見た目に仕上がります。もちろん、他のテーマも公式ドキュメントで確認できます。

• default
  %%{init: {'theme':'neutral'}}%% %%{init: {'theme':'default'}}%% graph TD A[開始] --> B{条件分岐} B -->|はい| C[処理1] B -->|いいえ| D[処理2] C --> E[終了] D --> E
• forest
  %%{init: {'theme':'neutral'}}%% %%{init: {'theme':'forest'}}%% graph TD A[開始] --> B{条件分岐} B -->|はい| C[処理1] B -->|いいえ| D[処理2] C --> E[終了] D --> E
• dark
  %%{init: {'theme':'neutral'}}%% %%{init: {'theme':'dark'}}%% graph TD A[開始] --> B{条件分岐} B -->|はい| C[処理1] B -->|いいえ| D[処理2] C --> E[終了] D --> E
• neutral
  %%{init: {'theme':'neutral'}}%% %%{init: {'theme':'neutral'}}%% graph TD A[開始] --> B{条件分岐} B -->|はい| C[処理1] B -->|いいえ| D[処理2] C --> E[終了] D --> E
• base
  %%{init: {'theme':'neutral'}}%% %%{init: {'theme':'base'}}%% graph TD A[開始] --> B{条件分岐} B -->|はい| C[処理1] B -->|いいえ| D[処理2] C --> E[終了] D --> E

コンポーネントの使用

作成したMermaidChartコンポーネントは、以下のように簡単に使用できます。Astroのページや他のコンポーネントで、このチャートを呼び出し、ダイアグラムを表示させましょう。

---
import MermaidChart from '../components/MermaidChart.js';
---

<MermaidChart chart={`
  graph TD
    A[開始] --> B{条件分岐}
    B -->|はい| C[処理1]
    B -->|いいえ| D[処理2]
    C --> E[終了]
    D --> E
`} />

下記のようにフローチャートになります。

上記のコードでは、シンプルなフローチャートを定義しています。条件分岐があり、それぞれのパスが別の処理に進んで最終的に終了する流れです。これを使えば、プロジェクトに視覚的な要素を簡単に追加できます。

カスタマイズとスタイリング

Mermaidのスタイリングは、CSSを使ってさらにカスタマイズすることが可能です。以下の例では、チャートの見た目を微調整し、さらにダークモードにも対応できるようにしています。

.mermaid {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mermaid svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.mermaid .node rect {
  fill: white;
  stroke: #d1d5db;
}

.mermaid .edgePath .path {
  stroke: #9ca3af;
}

.mermaid .label {
  font-family: sans-serif;
  font-size: 0.875rem;
  color: #374151;
}

/* ダークモード対応 */
.dark .mermaid .node rect {
  fill: #374151;
  stroke: #6b7280;
}

.dark .mermaid .edgePath .path {
  stroke: #d1d5db;
}

.dark .mermaid .label {
  color: #e5e7eb;
}

このスタイル定義により、チャート内のノードやエッジ、ラベルの見た目を変更できます。ダークモードでは、背景や線の色を変更して、より見やすいデザインに仕上げます。

まとめ

これで、AstroプロジェクトにMermaidを導入し、ダイアグラムを簡単に作成できるようになりました。Mermaidを使うことで、複雑なフローチャートやシーケンス図、ガントチャートなどを視覚的に表現でき、プロジェクトのドキュメントやプレゼンテーション資料などにも活用できるでしょう。

より詳しい使い方や、他のダイアグラムの作成方法については、Mermaidの公式ドキュメントを参照してください。