# 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:

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

<div class="diagram-controls">
    <button class="md-button md-button--primary enlarge-diagram" onclick="enlargeDiagram(this)">
        🔍 Enlarge Diagram
    </button>
</div>
</div>
```

## 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`.