astro-mermaid-satteri

Render Mermaid diagrams in Astro with Sätteri — auto dark/light theme, View Transitions support, and zero runtime overhead.

Flowcharts Sequence Diagrams GitHub

Diagram Types

Flowcharts

Flowcharts, subgraphs, and styling — the classic Mermaid starting point.

Sequence Diagrams

Timeline-based interactions between actors and systems.

Class & State

UML class diagrams and state machine diagrams.

Gantt & Git

Project timelines and git branch visualizations.

Entity Relationship

Database schemas with cardinality and attributes.

User Journey

Step-by-step user experiences with satisfaction scores.

Pie Charts

Proportional data as labeled slices.

Requirement

Requirements, elements, and their relationships.

Software architecture at context, container, and component level.

Mindmaps

Hierarchical mindmaps with indented branches.

Timeline

Chronological events grouped by period.

Quadrant

Items plotted on a 2x2 matrix.

Features

Options & Features

Dimensions, captions, alignment, copy button, and lazy loading.

Icon Packs

ELK Layout

Switch flowcharts to the Eclipse Layout Kernel.

In .astro Files

Render diagrams from <pre class="mermaid"> in Astro components.

Quick Start

Add the integration to your Astro project:

import { defineConfig } from 'astro/config';
import { satteri } from '@astrojs/markdown-satteri';
import mermaid from 'astro-mermaid-satteri';

export default defineConfig({
  markdown: {
    processor: satteri(),
  },
  integrations: [
    mermaid(),
  ],
});

Then write fenced code blocks with the mermaid language:

```mermaid
flowchart LR
  A[Start] --> B{Is it working?}
  B -->|Yes| C[Done]
  B -->|No| D[Fix it]
  D --> B
```