Pretty Fish

Pretty Fish shows Mermaid code beside its rendered diagram, with export to SVG, PNG or Mermaid source. It works offline as a PWA and shares work as links that encode the diagram in the URL. AI agents can edit diagrams in an open browser tab through a hosted MCP endpoint backed by a Durable Object relay.

Templates cover 20 Mermaid diagram types, among them flowcharts and sequence, class, ER, state and Gantt diagrams. The preview updates with every edit, and built-in themes and per-diagram settings change the look. A reference docs panel explains the syntax next to the editor, and a presentation mode shows the work full screen. Agent access runs through a relay in the same Worker. The app creates a session with its own MCP URL, an MCP client sends commands to that URL, and the browser tab carries them out. On Cloudflare, one Worker serves the built React app from static assets and answers the /relay and /mcp routes. Each relay session lives in its own SQLite-backed Durable Object.

Built for: Developers and technical writers who draw diagrams in Mermaid and want a self-hosted editor

What you can use it for

• Write flowcharts and sequence diagrams in Mermaid with a live preview
• Keep a project's ER, state and architecture diagrams together across several pages
• Export diagrams as SVG or PNG for docs and slides
• Share a diagram as a link instead of a file
• Let an AI coding agent draw or edit diagrams through MCP

Deploy

• CLI

  Branch master

  Needs Node.js 24 or later and a Wrangler login. Vite builds the app, and Wrangler creates the relay's Durable Object on deploy.

  git clone https://github.com/pastelsky/prettyfish
  cd prettyfish
  npm install
  npx wrangler login
  npm run deploy

  Copy
  Docs

The deploy needs no secrets, resource IDs or config edits.

What it needs to run

• Durable ObjectsRelaySessionDurableObject

Good to know

Diagrams are kept in the browser and shared through URL-encoded state; the README describes no accounts or server-side storage. There is no Deploy to Cloudflare button. The README still describes a local agent bridge, but its code was removed in April 2026; only the hosted relay remains. The relay docs list session expiry, revocation and audit logging as still needed. The maintainer's PostHog key is built into src/lib/analytics.ts, so a self-hosted copy sends page views and usage events to a.pretty.fish until that file is changed. Young project: the repository was created in April 2026.

Cost on Cloudflare

Where this comes from

• Repositoryhttps://github.com/pastelsky/prettyfish
• App websitehttps://pretty.fish
• Documentationhttps://github.com/pastelsky/prettyfish#readme

An alternative to Mermaid Chart.