Mermaid Studio 🧜‍♀️✨

A beautiful, fast, and responsive live editor for Mermaid.js diagrams, designed with a modern Material You (Material Design 3) aesthetic.

✨ Features

• Live Preview: See your diagrams update in real-time as you type.
• Ready-to-use Templates: Quick-start with templates for Flowcharts, Sequence diagrams, ER diagrams, Gantt charts, and more.
• Export Options: Instantly copy your diagram to the clipboard, or download it as an SVG or high-resolution PNG.
• Zoom Controls: Easily zoom in, zoom out, or reset the diagram view.
• Auto-Save: Your code is automatically saved to your browser's local storage so you never lose your work.
• Mobile Friendly: Seamlessly switch between the editor and preview on smaller screens.
• Syntax Error Handling: Clear, user-friendly error messages if your Mermaid syntax breaks.

🚀 How to Use

This project requires zero build steps or dependencies to install.

1. Download or clone this repository.
2. Open the index.html file in any modern web browser.
3. Start typing Mermaid syntax in the editor!

Keyboard Shortcuts

• Ctrl + S / Cmd + S : Trigger manual save (shows confirmation toast)
• Ctrl + Shift + C / Cmd + Shift + C : Copy SVG to clipboard
• Tab : Indent code automatically inside the editor

🛠️ Tech Stack

Built as a single-file application using:

• HTML/CSS/Vanilla JavaScript
• Tailwind CSS (via CDN) for styling
• Mermaid.js (via CDN) for diagram rendering
• Google Fonts (Roboto & Material Symbols) for typography and icons