Easy Integration
Simple installation and configuration with Astro’s integration system
Welcome to Astro Mermaid
Welcome to Astro Mermaid
Section titled “Welcome to Astro Mermaid”Astro Mermaid is a powerful integration that brings the full capabilities of Mermaid.js to your Astro projects. With automatic theme switching and optimized client-side rendering, you can create beautiful diagrams that seamlessly integrate with your site’s design.
Quick Example
Section titled “Quick Example”Here’s a simple flowchart to get you started:
graph TD
A[Astro Project] -->|Add Integration| B[astro-mermaid]
B --> C{Configure Options}
C -->|Theme| D[Choose Theme]
C -->|Auto Theme| E[Enable/Disable]
C -->|Config| F[Mermaid Options]
D --> G[Ready to Use!]
E --> G
F --> G
Features
Section titled “Features”Theme Support
Automatic theme switching based on your site’s theme
Full Mermaid Support
All Mermaid diagram types are supported out of the box
Performance Optimized
Client-side rendering with Vite optimization
Supported Diagram Types
Section titled “Supported Diagram Types”mindmap
root((Mermaid))
Flowcharts
Basic Flow
Decision Trees
Process Maps
Sequence
API Calls
User Interactions
System Flow
Class Diagrams
OOP Design
Architecture
State Diagrams
FSM
Workflows
ER Diagrams
Database Design
Relationships
Gantt Charts
Project Planning
Timelines
More
Git Graphs
User Journey
Pie Charts
C4 Diagrams