環境#

• Astro 5.1.6
• Fuwari (Astroテンプレート)
• remark-mermaid 0.2.0

インストール#

まず、remark-mermaidプラグインをインストールします：

pnpm install remark-mermaid

設定#

astro.config.mjsにプラグインを追加します：

import remarkMermaid from 'remark-mermaid'

export default defineConfig({
  remarkPlugins: [remarkMermaid],
})

使用例#

Mermaidの記法を使用してダイアグラムを作成できます。簡単な例：

これにより、ノードA、B、C、D間の関係を示すトップダウングラフが描画されます。

メリット#

Mermaidダイアグラムは以下のような用途に特に有用です：

• ワークフローの可視化
• シーケンス図の作成
• システムアーキテクチャの図示
• プロセスの文書化

ダイアグラムの視覚的な特性により、複雑な情報を理解・保守しやすくなります。