🧜‍♀️ Astro Mermaid Integration

A complete example of using Mermaid diagrams in Astro projects. This demo showcases all features of the astro-mermaid integration including automatic theme switching, icon pack support, and universal compatibility with .md, .mdx, and .astro files.

✨ Key Features

• Universal Support - Works in markdown, MDX, and Astro components
• Auto Theme Switching - Diagrams automatically adapt to light/dark themes
• Icon Pack Integration - Use custom icons from icon libraries
• Zero Configuration - Works out of the box with sensible defaults
• Performance Optimized - Lazy loading and conditional script injection
• TypeScript Ready - Full TypeScript support and definitions

🚀 Quick Example

Here's a live mermaid diagram showing the integration workflow:

graph TB
    subgraph "Your Astro Project"
        A[Install astro-mermaid] --> B[Add to astro.config.mjs]
        B --> C[Write mermaid in markdown]
        C --> D[Build & Deploy]
    end
    
    subgraph "Integration Features"
        E[Theme Detection] --> F[Diagram Rendering]
        F --> G[Icon Pack Loading]
        G --> H[Responsive Layout]
    end
    
    D --> E
    H --> I[🎉 Beautiful Diagrams]
    
    style A fill:#e1f5fe
    style I fill:#c8e6c9
    style E fill:#fff3e0
    style F fill:#fce4ec
  

📦 Installation

Get started in just two steps:

# Install the integration and mermaid
npm install astro-mermaid mermaid

// astro.config.mjs
import { defineConfig } from "astro/config";
import mermaid from "astro-mermaid";

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

🎯 Usage Examples

Explore the sidebar to see examples of all diagram types, or check out the Sequence Examples to see direct usage in Astro components.

📚 Template Usage

This entire demo project can be used as a template for your own Astro projects. The layout is completely self-contained with no external dependencies beyond the core requirements. Check the README for details.