Mermaid Diagram Generator Server

A simple Flask server that generates diagrams from Mermaid syntax using mermaid-cli.

Prerequisites

• Python 3.7+
• Node.js and npm (for mermaid-cli)
• mermaid-cli installed globally: npm install -g @mermaid-js/mermaid-cli

Installation

1. Clone this repository
2. Install Python dependencies:

   pip install -r requirements.txt
   

   Copy
3. Ensure mermaid-cli is installed globally:

   npm install -g @mermaid-js/mermaid-cli
   

   Copy

Running the Server

Start the server with:

python server.py

By default, the server runs on http://localhost:5000.

Temporary Files

The server creates a local directory called temp_files in the project folder for storing temporary files. This approach:

• Avoids permission issues with system temp directories
• Works better in virtual environments
• Automatically cleans up files older than 30 minutes

API Usage

Web Interface

Open your browser and navigate to http://localhost:5000 to use the web interface.

API Endpoint

Send a POST request to /generate with a JSON body containing your Mermaid diagram:

{
  "mermaid": "graph TD\nA[Client] --> B[Load Balancer]\nB --> C[Server1]\nB --> D[Server2]",
  "theme": "default",  // optional: default, dark, forest, neutral
  "background": "white" // optional: white, transparent
}

The server will return a PNG image of the rendered diagram.

Example using curl:

curl -X POST http://localhost:5000/generate \
  -H "Content-Type: application/json" \
  -d '{"mermaid":"graph TD\nA[Client] --> B[Load Balancer]"}' \
  --output diagram.png

Testing

Run the included test script to verify everything is working:

python test.py

This will generate a sample diagram and save it as output_diagram.png.

Troubleshooting

If you encounter errors:

1. Ensure mermaid-cli (mmdc) is installed and accessible in your PATH
2. Check server logs for specific error messages
3. Make sure your Mermaid syntax is valid
4. Verify the temp_files directory exists and has appropriate permissions