Technical Specification: Text-Based Diagram Generator

Overview

A high-performance, single-file client-side application that enables users to create diagrams using Mermaid.js syntax. The application provides an editor interface for writing Mermaid code and a live-preview pane that renders the diagram in real-time.

Core Features

• Real-Time Rendering: Instant visual feedback as the user types diagram syntax.
• Syntax Cheatsheet: A built-in modal containing templates for flowcharts, sequence diagrams, class diagrams, and state diagrams.
• Export Capabilities: Buttons to download the rendered diagram as PNG or SVG.
• Syntax Validation: Error handling displays syntax errors clearly if the Mermaid code is invalid.
• Responsive Layout: A split-view desktop layout that converts to a vertical stack on mobile devices.

User Interface Design

• Header: Contains the tool title, an 'Examples' button, and an 'Export' dropdown.
• Main Tool Area: A two-pane layout:
  • Left (Editor): A clean, monospace text area with line numbers.
  • Right (Preview): A centered, clean area for the Mermaid.js output.
• Design Aesthetic:
  • Palette: White backgrounds (#FFFFFF), light gray borders (#E5E7EB), primary vibrant blue (#2563EB) for buttons, and soft gray text (#374151).
  • Typography: System-ui font stack (Inter, system-ui, sans-serif).
  • Transitions: Smooth fade-in for UI elements and immediate render updates.

Technical Implementation Constraints

• Architecture: One single .html file containing HTML5, CSS3, and Vanilla JavaScript.
• Storage: CRITICAL: No localStorage, sessionStorage, or cookies allowed. The app must rely entirely on memory state.
• Dependencies: Use official CDNs for Mermaid.js (e.g., https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js).
• Sandbox Environment: All dialogs (examples, alerts) must be custom HTML modals created within the DOM, as standard alert() or prompt() may be blocked.
• No Dark Mode: Maintain a strict light-mode, high-contrast, professional SaaS aesthetic.
• Performance: Use a debounced input handler for the text editor to ensure smooth UI performance while rendering complex diagrams.

Development Directives

1. Use standard CSS flexbox/grid for the responsive split-view.
2. Ensure the Mermaid container is centered and scrollable.
3. Do not include any external dependencies other than Mermaid.js.
4. Ensure all user-facing text is purely descriptive.
5. Export functionality should use blob generation for the SVG/PNG files.