README.md

metadata

title: Mermaid Diagram Renderer
emoji: 🧜‍♀️
colorFrom: blue
colorTo: green
sdk: gradio
sdk_version: 5.34.2
app_file: app.py
pinned: false

🧜‍♀️ Mermaid Diagram Renderer

A simple web application for rendering Mermaid diagrams using Gradio, designed for deployment on Hugging Face Spaces.

Features

• Web-based interface for entering Mermaid code
• Multiple output formats: PNG, SVG, PDF
• Theme selection: Default, Forest, Dark, Neutral
• Easy file download of generated diagrams
• Built with Gradio for seamless Hugging Face Spaces deployment

Deploy to Hugging Face Spaces

1. Create a new Space on Hugging Face Spaces
2. Choose SDK: Select "Gradio"
3. Upload files: Copy these files to your Space:
   • app.py
   • mermaid_renderer.py
   • requirements.txt
4. Your Space will automatically build and deploy!

The app will be available at https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME

Local Development

# Install dependencies
pip install -r requirements.txt

# Install Node.js and mermaid-cli
npm install -g @mermaid-js/mermaid-cli

# Run the app
python app.py

Dependencies

• Python: Gradio for the web interface
• Node.js: Required for @mermaid-js/mermaid-cli
• mermaid-cli: Handles the actual diagram rendering

Note: Hugging Face Spaces handles Node.js and mermaid-cli installation automatically.

---

Local Testing

To test this project locally before deploying or pushing to Hugging Face Spaces, follow these steps:

1. Create and activate a Python virtual environment

   On macOS/Linux:

   python3 -m venv venv
   source venv/bin/activate
   

   On Windows:

   python -m venv venv
   venv\Scripts\activate
   

2. Upgrade pip (recommended)

   pip install --upgrade pip
   

3. Install Python dependencies

   pip install -r requirements.txt
   

4. Ensure Node.js is installed

   node --version
   

   If not installed, download from nodejs.org.

5. Ensure @mermaid-js/mermaid-cli is installed globally

   npm install -g @mermaid-js/[email protected]
   

6. Run the Gradio app

   python app.py
   

   Gradio will print a local URL (e.g., http://127.0.0.1:7860/) in the terminal.

7. Open the app in your browser Visit the local URL to interact with and test the interface.

When finished, you can deactivate the virtual environment with:

deactivate

Note:
If you accidentally added the venv folder to git, remove it from tracking with:

git rm -r --cached venv
git commit -m "Stop tracking venv directory"