Installation

Installation

Install the required packages:

npm install astro-mermaid mermaid

Or with other package managers:

# yarn
yarn add astro-mermaid mermaid

# pnpm
pnpm add astro-mermaid mermaid

Basic Setup

Add the integration to your astro.config.mjs:

import { defineConfig } from 'astro/config';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid()
  ]
});

With Options

import { defineConfig } from 'astro/config';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid({
      theme: 'forest',
      autoTheme: true,
      mermaidConfig: {
        flowchart: {
          curve: 'basis'
        }
      }
    })
  ]
});

Usage in Markdown

Once installed, you can use mermaid code blocks in your markdown files:

```mermaid
graph LR
    A[Install] --> B[Configure]
    B --> C[Use in Markdown]
    C --> D[Beautiful Diagrams!]
```

Which renders as:

graph LR
    A[Install] --> B[Configure]
    B --> C[Use in Markdown]
    C --> D[Beautiful Diagrams!]

TypeScript Support

The integration includes TypeScript definitions. Your editor should provide autocomplete for configuration options:

import mermaid from 'astro-mermaid';
// Full TypeScript support for options