Monitoring Mermaid Live Editor with Vigilmon

Mermaid Live is the official web-based editor for Mermaid.js — a widely-used diagram definition language that converts text into flowcharts, sequence diagrams, Gantt charts, and more. Self-hosting Mermaid Live gives your team a private diagram workspace without sending diagram source to a third-party service. But like any self-hosted tool, it needs active monitoring — when the instance goes down, engineers lose their diagramming workflow and may fall back to unmanaged alternatives. Vigilmon keeps your Mermaid Live deployment under watch so you catch failures before they interrupt your team.

What You'll Set Up

• HTTP uptime monitor for the Mermaid Live web application
• Static asset check to verify the editor loads completely
• TCP port check for the service listener
• SSL certificate expiry alerts for your Mermaid Live domain

Prerequisites

• Mermaid Live Editor running self-hosted (Docker or static file server)
• Instance accessible over HTTP or HTTPS on a domain or IP
• A free Vigilmon account

Step 1: Monitor the Mermaid Live Web Application

Mermaid Live is a single-page application — the root URL serves the editor HTML. If this endpoint is unreachable, the editor is inaccessible.

1. Log in to vigilmon.online and click Add Monitor.
2. Set Type to HTTP / HTTPS.
3. Enter your Mermaid Live URL: https://mermaid.yourdomain.com.
4. Set Check interval to 2 minutes.
5. Set Expected HTTP status to 200.
6. Click Save.

For additional confidence, confirm the editor page content is present:

• Under Advanced, set Expected body contains to Mermaid (the string appears in the page title and app content of every Mermaid Live build).

Step 2: Check That Static Assets Load

Mermaid Live is a JavaScript SPA — the page being reachable doesn't guarantee the JS bundle and CSS loaded successfully. A broken asset server means the editor shell loads but the diagram canvas doesn't render.

Add a monitor targeting the main JavaScript bundle:

1. Add Monitor → HTTP / HTTPS.

2. URL: https://mermaid.yourdomain.com/assets/index.js (or the versioned bundle path from your Mermaid Live build).

   To find the correct asset path, open your Mermaid Live instance in a browser and inspect the HTML <script src="..."> tag in the page source.

3. Set Expected HTTP status to 200.

4. Set Check interval to 5 minutes.

5. Click Save.

A 404 on the JS bundle means the static file server is misconfigured — the index page serves but the editor is non-functional.

Step 3: TCP Port Check for the Service Listener

Confirm the port your Mermaid Live instance listens on is open at the network level:

1. Add Monitor → TCP Port.
2. Host: mermaid.yourdomain.com, Port: 443 (or 80, or the custom port you mapped in Docker, e.g. 8080).
3. Set Check interval to 2 minutes.
4. Click Save.

If Mermaid Live is behind a reverse proxy (nginx, Caddy, Traefik), the TCP check on port 443 monitors the proxy. Add a second TCP check on the internal Mermaid Live port if you want to distinguish proxy failures from application failures.

Step 4: SSL Certificate Expiry Alerts

Mermaid Live is often used by engineers who will report "the diagram tool is broken" without checking the certificate error — or they'll simply use mermaid.live (the public instance) instead, bypassing your private deployment.

1. Open the Mermaid Live HTTP / HTTPS monitor from Step 1.
2. Enable Monitor SSL certificate under the SSL section.
3. Set Alert when certificate expires in less than 21 days.
4. Click Save.

Step 5: Monitor the Mermaid Rendering API (If Configured)

Some self-hosted Mermaid Live setups add a backend rendering API that generates PNG or SVG exports server-side, avoiding client-side rendering limitations. If your deployment includes this:

1. Add Monitor → HTTP / HTTPS.
2. URL: https://mermaid.yourdomain.com/api/render (adjust path to your deployment).
3. Set Method to POST.
4. Set Request body to {"code": "graph LR\n A-->B", "mermaid": {}} (a minimal Mermaid definition).
5. Set Content-Type header to application/json.
6. Set Expected HTTP status to 200.
7. Under Advanced, set Expected body contains to svg or png to verify the render result.
8. Set Check interval to 5 minutes.
9. Click Save.

Step 6: Heartbeat for Diagram Export Workflows

If your team runs automated scripts that call Mermaid Live or the Mermaid CLI to generate diagram assets (e.g. rendering all .mmd files in a docs repo on a schedule), use Vigilmon's cron heartbeat:

1. In Vigilmon, click Add Monitor → Cron Heartbeat.
2. Set the expected ping interval to match your export schedule.
3. Copy the heartbeat URL.
4. Add the ping to the end of your render script:

#!/bin/bash
for file in docs/**/*.mmd; do
  mmdc -i "$file" -o "${file%.mmd}.svg"
done
curl -s https://vigilmon.online/heartbeat/abc123

If any diagram fails to render and the script exits early, the ping is never sent and Vigilmon alerts.

Step 7: Configure Alert Channels

1. Go to Alert Channels in Vigilmon and add Slack, email, or a webhook.
2. Set Consecutive failures before alert to 2 on the main web application monitor — Docker container restarts can cause a single probe miss.
3. Group all Mermaid Live monitors under a named service group in Vigilmon so a single outage sends one grouped notification instead of four separate alerts.

Summary

| Monitor | Target | What It Catches | |---|---|---| | Web application | https://mermaid.yourdomain.com | Editor down, container crash | | JS bundle | /assets/index.js | Asset server misconfiguration | | TCP port | :443 | Proxy or listener down | | SSL certificate | Mermaid Live domain | Certificate renewal failure | | Render API | /api/render | Server-side render failure | | Cron heartbeat | Heartbeat URL | Export workflow crash |

Mermaid Live turns diagram-as-code into a first-class engineering tool — but self-hosting means you own the reliability. With Vigilmon watching the editor, its assets, and any backend render API, you'll know when your diagram tool is down before your team switches back to unmanaged public tools.