A simple web application for viewing and editing Mermaid diagrams in real-time.

• Live preview of Mermaid diagrams
• Syntax highlighting for Mermaid code
• Responsive design with split-pane layout
• Example diagrams to get started
• Error handling for invalid syntax

1. Enter your Mermaid code in the left panel
2. The diagram will render automatically in the right panel
3. Use the example buttons to load common diagram types

├── backend/
│   └── index.ts          # Hono server for serving static files
├── frontend/
│   ├── index.html        # Main HTML template
│   ├── index.tsx         # React application
│   └── style.css         # Custom styles
└── README.md

• Backend: Hono (TypeScript)
• Frontend: React 18.2.0 with TypeScript
• Styling: TailwindCSS
• Diagram Rendering: Mermaid.js
• Code Editor: Monaco Editor