Mermaid Diagram Tool

An interactive web-based tool for creating, editing, and exporting Mermaid diagrams.

Features

Core Features

• Live Diagram Rendering: See your Mermaid diagram code visualized in real-time
• Dark/Light Mode: Toggle between dark and light UI themes while keeping diagrams in high-contrast mode
• Export Options: Download diagrams as high-resolution PNG files or as .mmd source files
• Import Feature: Upload and edit existing .mmd diagram files
• Responsive Design: Works on desktop and mobile devices with adaptive layout

Technical Highlights

• Local Storage: Remembers your UI theme preference between sessions
• High-Resolution Export: PNG exports are generated at 4x resolution for high-quality images
• Syntax Highlighting: Improved readability for diagram code (via Mermaid's built-in rendering)
• Client-Side Processing: No server communication needed for diagram rendering or file operations

Getting Started

Installation

1. Clone this repository to your local environment
2. No build process required - open index.php in a PHP-enabled web server
3. Alternatively, deploy the files to any PHP web hosting environment

Prerequisites

• PHP 7.0 or higher
• Modern web browser (Chrome, Firefox, Safari, Edge)
• No special server requirements beyond basic PHP support

Usage Guide

Creating a Diagram

1. Enter Mermaid syntax in the "Input Mermaid Diagram Code" textarea
2. Click "Render Diagram" to visualize your diagram in the output area
3. Edit and re-render as needed to refine your diagram

Example Diagram Syntax

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]

Importing a Diagram

1. Click "Import .mmd" button
2. Select a .mmd file from your local computer
3. The diagram code will be loaded and automatically rendered

Exporting Your Work

• PNG Export: Click "Download as PNG" to save the rendered diagram as a high-resolution image
• Source Code Export: Click "Download as .mmd" to save your Mermaid code for later use

Using Dark Mode

• Click the sun/moon icon in the top-right corner to toggle between dark and light modes
• Your preference is automatically saved for future visits
• The diagram area always remains in light mode for optimal readability and export quality

Diagram Types Supported

This tool supports all Mermaid diagram types, including:

• Flowcharts
• Sequence diagrams
• Class diagrams
• State diagrams
• Entity Relationship diagrams
• User Journey diagrams
• Gantt charts
• Pie charts
• Requirement diagrams

Customization

The tool can be customized by modifying the following files:

• config.php: Change site title and other configuration settings
• index.php: Modify UI layout, styling, and JavaScript functionality
• css/style.css: Additional CSS styling (if needed)

Troubleshooting

Common Issues

1. Diagram Not Rendering: Check your Mermaid syntax for errors, which will display in the output area
2. Export Not Working: Ensure JavaScript is enabled in your browser
3. UI Issues: Try clearing browser cache or using incognito/private mode

Credits and License

• Built using Mermaid.js
• Licensed under MIT license

Future Development Plans

Potential future enhancements:

• Diagram template library
• Custom theme builder
• Multiple diagram tabs
• Collaborative editing features
• Integration with version control systems

---

This tool is designed to simplify the creation and sharing of Mermaid diagrams for documentation, presentations, and educational purposes.