Astro Mermaid

https://www.npmjs.com/package/astro-mermaid
Admin
An Astro integration for rendering Mermaid diagrams with automatic theme switching, client-side...
Tokens:7,682
Snippets:128
Trust Score:9.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install astro-mermaid and mermaid

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

Install the necessary packages using npm.

```bash
npm install astro-mermaid mermaid
```

--------------------------------

### Install ELK layout for Mermaid

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

Install the @mermaid-js/layout-elk package to enable the ELK layout for Mermaid diagrams.

```bash
npm install @mermaid-js/layout-elk
```

--------------------------------

### Use Icons in Mermaid Diagrams

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

Demonstrates how to use registered icon packs (e.g., 'logos') within your Mermaid diagrams to display custom icons.

```mermaid
```mermaid
architecture-beta
  group api(logos:aws-lambda)[API]

  service db(logos:postgresql)[Database] in api
  service disk1(logos:aws-s3)[Storage] in api
  service disk2(logos:cloudflare)[CDN] in api
  service server(logos:docker)[Server] in api

  db:L -- R:server
  disk1:T -- B:server
  disk2:T -- B:db
```
```

--------------------------------

### Register Icon Packs for Diagrams

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

Configure icon packs to use custom icons within your Mermaid diagrams. Provide a name and a loader function that fetches the Iconify JSON data.

```javascript
iconPacks: [
  {
    name: 'logos',
    loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
  }
]
```

--------------------------------

### Client-Side Mermaid Rendering

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

This code demonstrates how to render Mermaid diagrams using the Mermaid JavaScript library. All rendering happens locally, ensuring no network calls are made. This is useful for applications prioritizing privacy and offline capabilities.

```javascript
// All rendering happens locally - no network calls
import mermaid from 'mermaid';
const { svg } = await mermaid.render(id, diagramDefinition);
```

--------------------------------

### Full astro-mermaid Configuration

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

Explore the comprehensive configuration options for astro-mermaid, including theme, autoTheme, enableLog, mermaidConfig, and iconPacks.

```javascript
mermaid({
  // Default theme: 'default', 'dark', 'forest', 'neutral', 'base'
  theme: 'forest',

  // Enable automatic theme switching based on data-theme attribute
  autoTheme: true,

  // Enable client-side logging (default: true). Set to false to suppress
  // console.log output in the browser. Errors are always logged.
  enableLog: false,

  // Additional mermaid configuration
  mermaidConfig: {
    flowchart: {
      curve: 'basis'
    }
  },

  // Register icon packs for use in diagrams
  iconPacks: [
    {
      name: 'logos',
      loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
    },
    {
      name: 'iconoir',
      loader: () => fetch('https://unpkg.com/@iconify-json/iconoir@1/icons.json').then(res => res.json())
    }
  ]
})
```

--------------------------------

### Integration Order with Starlight

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

When using astro-mermaid with Starlight or other markdown-processing integrations, ensure that mermaid is listed first in the integrations array in astro.config.mjs.

```javascript
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid(), // ⚠️ Must come BEFORE starlight
    starlight({
      title: 'My Docs'
    })
  ]
});
```

--------------------------------

### Add astro-mermaid to Astro Config

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

Integrate astro-mermaid into your Astro project by adding it to the astro.config.mjs file. Configure theme and autoTheme options.

```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid({
      theme: 'forest',
      autoTheme: true
    })
  ]
});
```

--------------------------------

### Use Mermaid in Markdown

Source: https://www.npmjs.com/package/astro-mermaid/v/2.0.1?activeTab=readme

Embed Mermaid diagrams directly within your Markdown files using the ```mermaid ... ``` block.

```markdown
```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
```
```
Tokens:
Raw