pretty.fish — a browser-based Mermaid workspace for writing, arranging, and sharing diagrams without leaving the browser.

It is built for a workflow that sits somewhere between a text editor and a diagram board: edit Mermaid source, preview the result immediately, keep multiple diagrams on a canvas, and organize work across pages.

• Write Mermaid diagrams with a live preview.
• Arrange multiple diagrams on an infinite canvas.
• Group diagrams into multi-page projects.
• Tune appearance with built-in themes and diagram settings.
• Export diagrams as SVG, PNG, or Mermaid source.
• Share diagrams through URL-encoded state.
• Run as a PWA with offline support.

npm install
npm run dev

Requires Node.js 20+ and npm 10+.

npm run dev        # Vite dev server
npm run typecheck  # TypeScript project check
npm run lint       # ESLint + dark-mode audit
npm test           # Vitest
npm run e2e        # Playwright, including Axe accessibility checks
npm run build      # Production build
npm run preview    # Local Wrangler preview of the production build
npm run deploy     # Deploy to Cloudflare

Pretty Fish is a client-heavy React application with a few clear layers:

• UI components for the editor, canvas, docs panel, export flows, and presentation mode
• hooks that coordinate state, persistence, history, rendering, and keyboard behavior
• a reducer-driven app store for document and UI state
• Mermaid rendering, project serialization, sharing, and reference data under src/lib

The app is designed so most product behavior lives in typed state and small utility modules rather than inside large unstructured components.

The project is set up for Cloudflare via Wrangler. Build output is generated with Vite and the app can be deployed with:

npm run deploy

Cloudflare configuration lives in wrangler.jsonc.

Pretty Fish includes a phase-one local bridge that lets a paired browser tab be controlled by an MCP client running on the same machine.

Start the bridge with:

npm run agent:bridge

Setup details are in docs/local-agent-bridge.md.

There is also a hosted Cloudflare relay for remote MCP-style control:

• Worker entry: src/relay/worker.ts
• Durable Object session relay
• Dedicated config: wrangler.relay.jsonc
• Hosted MCP endpoint per generated session

Details are in docs/remote-agent-relay.md.

Contributions are welcome. Start with CONTRIBUTING.md.

Licensed under Apache License 2.0. See LICENSE.