Skip to content
astro-mermaid-satteri

Configuration

astro-mermaid-satteri is configured through the mermaid() integration in astro.config.mjs.

import mermaid from 'astro-mermaid-satteri';


export default defineConfig({
  integrations: [
    mermaid({
      theme: 'forest',
      autoTheme: true,
      enableLog: false,
      mermaidConfig: {
        flowchart: { curve: 'basis' },
      },
      iconPacks: [
        { name: 'logos', url: 'https://unpkg.com/@iconify-json/logos@1/icons.json' },
      ],
    }),
  ],
});

Options

Section titled “Options”
Option Type Default Description
theme string 'dark' Mermaid theme: 'default', 'dark', 'forest', 'neutral', or 'base'.
autoTheme boolean true Switch between light and dark based on data-theme on <html> and <body>.
enableLog boolean true Print diagnostic logs to the browser console. Errors always log.
mermaidConfig Record<string, unknown> {} Extra config passed to mermaid.initialize().
iconPacks IconPackInput[] [] Icon packs to register. Accepts url, icons, or loader forms.

theme and autoTheme

Section titled “theme and autoTheme”

When autoTheme is true (the default), the rendered theme is decided at runtime from data-theme on <html> and <body>: dark maps to Mermaid’s dark theme, light maps to default. The theme option is the fallback used when autoTheme is false, or when no theme attribute is detected.

To apply a fixed theme (e.g. forest) regardless of the page’s color scheme, turn autoTheme off:

mermaid({
  theme: 'forest',
  autoTheme: false,
});

See Theme Switching for the full detection and re-render behavior.

enableLog

Section titled “enableLog”

When true (the default), the client script prints diagnostic messages like the number of diagrams found on a page. Set it to false to keep the console quiet. Errors are always logged regardless of this setting.

mermaidConfig

Section titled “mermaidConfig”

Anything in mermaidConfig is merged into mermaid.initialize() alongside the integration’s defaults. This is how you set flowchart curves, fonts, security settings, and the ELK layout:

mermaid({
  mermaidConfig: {
    flowchart: { curve: 'basis' },
    // layout: 'elk',  // requires @mermaid-js/layout-elk
  },
});

iconPacks

Section titled “iconPacks”

Register icon packs to use custom icons in diagrams. See Icon Packs for the three accepted forms.

Integration order

Section titled “Integration order”

When pairing with Starlight or other markdown-processing integrations, put mermaid() first. It modifies the Sätteri processor at config setup, so it needs to run before anything else touches the pipeline.

import mermaid from 'astro-mermaid-satteri';
import starlight from '@astrojs/starlight';


export default defineConfig({
  integrations: [
    mermaid(),
    starlight({ title: 'My Docs' }),
  ],
});