Oliver Mermaid Diagram Generator

A web-based tool for creating, editing, and exporting Mermaid diagrams with Microsoft Azure AD authentication integration.

Features

• Interactive Diagram Editor: Real-time Mermaid diagram creation and editing
• Authentication: Microsoft Azure AD integration for secure access
• Dark Mode Support: Toggle between light and dark themes
• Export Options:
  • Download diagrams as high-resolution PNG images
  • Export/import Mermaid code as .mmd files
• Responsive Design: Works on desktop and mobile devices
• Real-time Preview: Instant diagram rendering as you type

Requirements

• Web server with PHP support
• Modern web browser with JavaScript enabled
• Internet connection (for CDN resources and authentication)

Installation

1. Clone or download the project files to your web server directory
2. Ensure your web server has PHP enabled
3. Configure the authentication settings in the JavaScript section if needed
4. Access the application through your web browser

File Structure

mermaid-charts/
├── index.php          # Main application file
├── config.php         # Site configuration
├── process.php        # Server-side processing (placeholder)
├── mermaid.svg        # Sample diagram output
└── README.md          # This file

Usage

Getting Started

1. Open the application in your web browser
2. Authenticate using your Microsoft Azure AD credentials
3. Enter your Mermaid diagram code in the left textarea
4. Click "Render Diagram" to generate the visual diagram
5. Use the export options to save your work

Mermaid Syntax

The application supports standard Mermaid syntax. Here's a basic example:

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Android]
    C -->|Two| E[Nuka Cola]
    C -->|Three| F[Cold fusion generator]

Features Overview

• Render Diagram: Converts your Mermaid code into a visual diagram
• Download as PNG: Exports the diagram as a high-resolution PNG image
• Download as .mmd: Saves the Mermaid code as a .mmd file
• Import .mmd: Loads Mermaid code from a .mmd file
• Dark Mode Toggle: Switch between light and dark interface themes
• Authentication: Secure access through Microsoft Azure AD

Dark Mode

The application includes a dark mode toggle button in the top-right corner. Your preference is saved locally and will persist across sessions. Note that diagrams always render with a light background for optimal visibility and consistency when exported.

Authentication

The application uses Microsoft Azure AD for authentication with the following configuration:

• Client ID: 9079054c-9620-4757-a256-23413042f1ef
• Authority: https://login.microsoftonline.com/e519c2e6-bc6d-4fdf-8d9c-923c2f002385
• Redirect URI: https://ai-sandbox.oliver.solutions/mermaid

Users must authenticate to access the diagram rendering and export functionality.

Configuration

Site Settings

Edit config.php to modify:

• SITE_TITLE: The application title displayed in the header
• MERMAID_VERSION: Mermaid library version reference

Theme Customization

The application uses CSS custom properties for theming. You can modify the color scheme by adjusting the CSS variables in index.php.

Browser Compatibility

• Modern browsers supporting ES6+ JavaScript
• SVG and Canvas support required for diagram rendering and export
• Local storage support for dark mode preferences

Dependencies

• Mermaid.js - Diagram generation
• MSAL.js - Microsoft authentication
• Google Fonts (Montserrat) - Typography

License

This project is part of the BTG Sandbox collection. Please refer to your organization's licensing terms.

Support

For issues or questions, contact your system administrator or refer to the Mermaid.js documentation for diagram syntax help.