Log inSign up
dwsmarketing
dwsmarketinguntitled-914
Public
Like
untitled-914
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Search
index.ts
README.md

Mermaid Diagram Viewer

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

Features

  • 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

Usage

  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

Project Structure

├── 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

Tech Stack

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