Mermaid Cloud Viz

Turn plain English into professional diagrams — instantly.

Mermaid Cloud Viz is an AI-powered diagramming tool that lets anyone create flowcharts, sequence diagrams, timelines, and more by simply describing what they need. No design skills. No drag-and-drop frustration. Just results.

🌐 Try it live →

---

Why Mermaid Cloud Viz?

Most diagramming tools require you to learn their interface before you can create anything useful. Mermaid Cloud Viz flips that — you describe the outcome, and the AI builds the diagram. It's the difference between spending 30 minutes on layout versus 30 seconds on a description.

Who uses it:

• 📋 Product managers — document workflows and user journeys fast
• 👩‍💻 Engineers — generate architecture and system flow diagrams from specs
• 📊 Business analysts — turn process descriptions into clear visuals for stakeholders
• 🎓 Anyone who needs a diagram and doesn't want to become a diagramming expert first

---

Features

🤖 AI Generation	Describe your diagram in plain language — GPT-5 Nano writes the code
✨ AI Enhancement	Ask AI to improve, extend, or restructure any existing diagram
👁️ Live Preview	See your diagram update in real time as you type
🌙 Light / Dark themes	Switch rendering themes for presentations or docs
📥 SVG Export	Download production-quality vector files
📚 Gallery	Start from curated templates and customize
🔐 Google Sign-In	Secure authentication, no password required

---

How It Works

1. Describe — type what you need ("flowchart for a software release process")
2. Generate — AI produces valid Mermaid diagram code
3. Refine — edit the code or ask AI to enhance it further
4. Export — download as SVG, ready for slides, docs, or wikis

---

For Developers

Local Setup

git clone https://github.com/AndrewMichael2020/mermaid-visualize.git
cd mermaid-visualize
npm install

Create .env.local:

OPENAI_API_KEY=your-openai-api-key
GOOGLE_CLIENT_ID=your-oauth2-client-id
GOOGLE_CLIENT_SECRET=your-oauth2-client-secret
NEXTAUTH_SECRET=any-random-32-char-string
NEXTAUTH_URL=http://localhost:9005

npm run dev        # → http://localhost:9005
npm run genkit:dev # AI server (separate terminal)

Tech Stack

Layer	Technology
Framework	Next.js 15, React 19
AI	OpenAI GPT-5 Nano (via Genkit + @genkit-ai/compat-oai)
Auth	next-auth + Google OAuth2
Logging	Google Cloud Datastore
Metrics	prom-client + Cloud Monitoring
Styling	Tailwind CSS, shadcn/ui
Deployment	Google Cloud Run (min 0, max 1 instance)
CI/CD	GitHub Actions

Deploy Your Own

Full deployment guide — GCP setup, IAM roles, Secret Manager, CI/CD:
👉 docs/deployment.md

---

Contributing

1. Fork → feature branch → PR
2. Run npm test and npm run typecheck before submitting

---

License

MIT — see LICENSE

---

Acknowledgements

• Mermaid.js — diagram rendering engine
• OpenAI GPT-5 Nano — AI model
• Next.js · Tailwind CSS · shadcn/ui