🧜♀️ astro-mermaid-satteri Integration
A complete example of using Mermaid diagrams in Astro projects with theastro-mermaid-satteriintegration — automatic theme switching, icon pack support, and all diagram types.
How it works — request flow
graph TD
A[User] -->|request| B(Cloudflare Pages)
B --> C{Astro Build}
C -->|static HTML| D[Mermaid renders client-side]
D --> E[SVG output]
E --> A📂 Diagram Gallery
Click any card to see a full-page example with live rendering:
🔀 Flowchart
Directed and undirected flowcharts with various node shapes and styles
📐 Sequence
Show interactions between actors and participants over time
🏫 Class
Object-oriented class relationships and structure
🔄 State
Finite state machines and state transitions
🗄️ Entity Relationship
Database schema and entity relationships
📊 Gantt
Project scheduling and task timelines
🥧 Pie Chart
Proportional data visualization
🗺️ User Journey
Map user experience across steps and satisfaction levels
🌿 Git Graph
Branch and commit history visualization
🧠 Mindmap
Hierarchical brainstorming and concept maps
⏳ Timeline
Chronological events and milestones
📐 Quadrant
Two-axis matrix for categorizing items
🏢 C4 Model
Context, Container, and Component diagrams with icon packs
⚙️ How It Works
Add the integration to your astro.config.mjs:
// astro.config.mjs
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({
theme: 'forest',
autoTheme: true,
iconPacks: [
{ name: 'logos', url: 'https://unpkg.com/@iconify-json/logos@1/icons.json' }
]
})
]
});Then just use fenced mermaid code blocks in any markdown file:
```mermaid
graph LR
A --> B --> C
```All diagrams are rendered client-sidewith zero external dependencies — your diagram content never leaves the browser.