Skip to content

Enhanced Mermaid Diagrams

This directory contains reusable CSS and JavaScript files for enhanced Mermaid diagram functionality across the documentation site.

Files Created

Core Files

  • mermaid-enhanced.css - Complete styling for enhanced Mermaid diagrams with MkDocs Material integration
  • mermaid-enhanced.js - JavaScript functionality for responsive diagram enlargement

Documentation

  • mermaid-enhanced-usage.md - Complete usage guide with examples
  • README.md - This file

Features

✨ MkDocs Material Integration - Uses Material Design CSS variables for consistent theming - Automatic light/dark mode support - Matches existing button and modal styles

🎯 Responsive Design - Smart scaling based on screen resolution - Perfect fit within viewport bounds - Mobile-optimized layouts

🔍 Enhanced User Experience - Click-to-enlarge functionality - Keyboard navigation (Escape to close) - Smooth animations and transitions

🛡️ Robust Error Handling - Graceful fallback to code display - Console logging for debugging - Compatible with existing Mermaid setups

Quick Start

The files are already configured in mkdocs.yml. Just use this HTML structure:

<div class="mermaid-container">
```mermaid
your-diagram-code-here


## Configuration

Already added to `mkdocs.yml`:

```yaml
extra_css:
  - stylesheets/mermaid-enhanced.css

extra_javascript:
  - javascripts/mermaid-enhanced.js

Browser Support

  • Modern browsers with CSS Grid and Flexbox
  • Backdrop filter support for best visual experience
  • Graceful degradation for older browsers

For detailed usage instructions, see mermaid-enhanced-usage.md.