Overview

Astro-mermaid is an innovative integration designed to enhance the user experience of creating diagrams using the Mermaid syntax within Astro projects. With features like automatic theme switching and client-side rendering, it ensures a seamless experience for both standalone projects and documentation frameworks. The integration stands out for its compatibility and performance, making it an attractive choice for developers needing to generate diagrams efficiently and securely.

Whether you’re working on a comprehensive documentation site with Starlight or a simple standalone template, Astro-mermaid adapts to your needs. Its combination of universal compatibility and built-in privacy features makes it ideal for a variety of use cases, particularly in corporate environments where security is paramount.

Features

• Universal Theme Detection: Automatically adjusts to light or dark themes based on your site’s data attributes.
• Dual Plugin System: Utilizes Remark and Rehype plugins for thorough markdown processing, ensuring flexibility in content creation.
• Universal File Support: Compatible with multiple file types, including .md, .mdx, and .astro, making it versatile for various documentation styles.
• Performance Optimized: Features conditional loading and client-side rendering for faster diagram generation and improved user experience.
• Highly Configurable: Offers full support for mermaid.js configurations, allowing for extensive customization.
• Privacy-Focused: Completely client-side rendering with no external dependencies, ensuring user data remains private and secure.
• Zero Configuration: Designed to work out of the box with sensible defaults, making setup straightforward and hassle-free.
• Smooth UX: Incorporates loading animations and layout shift prevention for a more polished interaction.