About

A quiet studio for Mermaid diagrams

Vloam Mermaid is an online editor for the Mermaid diagram language. Type syntax for flowcharts, sequence diagrams, class diagrams, and more — the preview updates in the browser with no account and no upload.

The site is built with Astro as static HTML. Mermaid itself loads as a small client island so the page stays fast while the editor stays interactive. Your latest diagram is kept in this browser only; nothing is uploaded to a server.

Need a short syntax guide? Read the in-site Mermaid docs, then come back and draw in the live editor.

Use with AI (MCP)

Vloam Mermaid’s MCP server drives the live editor in your open browser tab: it writes Mermaid source, reads render errors, and retries until the preview succeeds — no share links required.

1) Add the JSON below to Cursor MCP settings (or click Copy MCP config). 2) Keep this site open at mermaid.vloam.com (or /zh/) so the toolbar shows “AI connected”. 3) Ask the agent to draw a diagram — it calls render_mermaid and your preview updates in place. Until the package is on npm, run `npm run mcp:build` and point MCP at `node packages/vloam-mermaid-mcp/dist/index.js`.

{
  "mcpServers": {
    "vloam-mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "vloam-mermaid-mcp"
      ]
    }
  }
}