pastelsky

pastelsky / prettyfish

Public

Pretty Fish is a browser-based Mermaid diagram editor with live preview, multi-page projects, and offline support.

pretty.fish diagram-editor mermaid pwa react typescript
34
4
100% credibility
Found Apr 15, 2026 at 44 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Pretty Fish is a browser-based workspace for creating, editing, arranging multiple Mermaid diagrams on an infinite canvas, with live previews, themes, exports, and sharing.

How It Works

1
🌐 Open Pretty Fish

You visit pretty.fish in your web browser and see a clean workspace ready for diagrams.

2
📋 Pick a starting diagram

Choose from helpful templates like flowcharts or sequences to get a ready-made example on your canvas.

3
✨ Watch it come alive

Your diagram renders instantly with beautiful colors and shapes right before your eyes.

4
✏️ Edit the details

Type in the editor panel to tweak the code and see changes update live on the canvas.

5
🎨 Customize the look

Switch themes, adjust colors, fonts, or layout to make it match your style perfectly.

6
🖼️ Arrange and export

Drag diagrams around the infinite canvas, then download as image or share a link.

🎉 Share your masterpiece

Your polished diagrams are ready to impress colleagues or embed anywhere online.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 44 to 34 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is prettyfish?

Prettyfish is a browser-based Mermaid diagram editor that lets you write code, see live previews, and arrange multiple diagrams on an infinite canvas across multi-page projects. It runs offline as a PWA, supports custom themes like blueprint or rosepine, and exports to SVG, PNG, or raw Mermaid source for pretty GitHub readmes and profiles. Built in TypeScript with React and Vite, it bridges text editing and visual diagramming without server dependencies.

Why is it gaining traction?

Unlike basic Mermaid live editors or heavy tools like Draw.io, prettyfish combines code-first editing with a pannable canvas for grouping diagrams—like pretty maps of system flows or sequences—plus URL sharing and AI agent hooks via MCP for automated diagram creation. Developers dig the offline support, presentation mode for client demos, and quick exports that pretty-print GitHub pages without setup. Its glassmorphism UI and keyboard shortcuts feel snappy for iterative workflows.

Who should use this?

DevOps engineers mapping microservices flows, product managers sketching user journeys, or docs writers embedding diagrams in pretty GitHub readmes. Ideal for frontend teams needing browser-based sequence or ER diagrams without installing VS Code extensions, or anyone tired of screenshotting Mermaid from online playgrounds.

Verdict

Grab it for lightweight Mermaid workflows—solid tests, Playwright E2E, and Cloudflare deployment make it reliable despite 34 stars and 1.0% credibility score. Early-stage but mature enough for daily use; watch for more themes and agent integrations.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.