Mermaid Live Editor & Viewer

Create, edit, and share beautiful Mermaid diagrams in real-time!

A powerful, modern web application that transforms your ideas into stunning diagrams with live preview and instant sharing capabilities.

Homepage • Report Bug • Request Feature • GitHub Repository

---

Quick Start

This project is a monorepo managed by Turborepo, which provides an incredibly fast and efficient development experience by orchestrating the frontend and backend services.

Project Architecture

• apps/frontend: A modern Next.js application providing the user interface and real-time diagram rendering.
• apps/backend: A robust NestJS API handling persistence, sharing logic, and external integrations.

Installation

1. Clone the repository

   git clone https://github.com/sametcn99/mermaid-viewer.git
   cd mermaid-viewer

2. Install dependencies

   We use Bun as our package manager for lightning-fast installations and execution.

   bun install

3. Configure Environment Variables

   Copy the example environment file and update the values as needed.

   cp .env.example .env

4. Start Development Environment

   Turborepo will start both the frontend and backend in parallel with a single command:

   bun dev

5. Access the Services

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:3001
   • API Documentation: http://localhost:3001/docs

---

Available Scripts

Managed by Turborepo, these commands run across all applications:

Command	Description
bun dev	Starts all applications in development mode with hot-reloading.
bun build	Builds all applications for production.
bun lint	Runs linting checks across the entire codebase.
bun format	Automatically formats code using Biome and Prettier.
bun test	Executes unit and integration tests.
bun type-check	Performs TypeScript type checking across all packages.

Docker Deployment

You can easily deploy the application using Docker Compose. This setup includes the frontend, backend, PostgreSQL database, and Nginx as a reverse proxy.

Prerequisites

Running with Docker

1. Configure Environment Variables

   Create a .env file in the root directory containing necessary keys (Database credentials, API keys etc.).

2. Build and Start Containers

   Run the following command in the root directory:

   docker compose up -d --build

   This command will:

   • Build the backend and frontend images (using oven/bun for optimized builds).
   • Start a PostgreSQL database container.
   • Start an Nginx reverse proxy.

3. Access the Application

   Once the containers are running, you can access the application at:

   • Web App: http://localhost (via Nginx on port 80)

Nginx Configuration

The project uses Nginx as a reverse proxy to route traffic to the frontend and backend services. The configuration is located in nginx.conf and handles:

• Routing root requests to the frontend service.
• Routing /api requests to the backend service.
• Handling proxy headers.

To stop the services:

docker compose down

---

Contributing

We welcome contributions from the community! Whether you're fixing a bug, adding a feature, or improving documentation, your help is appreciated.

How to Contribute

1. Fork the Project: create your own copy of the repository on GitHub.

2. Create a Branch: switch to a new branch for your feature or fix.

   git checkout -b feature/AmazingFeature

3. Make Changes: implement your changes and test them locally.

   bun dev

4. Lint & Format: ensure your code meets the project's standards.

   bun lint
   bun format

5. Commit: write a clear, descriptive commit message.

   git commit -m 'Add some AmazingFeature'

6. Push: upload your branch to your fork.

   git push origin feature/AmazingFeature

7. Open a Pull Request: submit your changes for review.