Text2Mermaid Demo

Explore the enhanced features of our Mermaid diagram editor

HomeLive Editor

Select Demo

Simple Flowchart - Enhanced Preview

Diagram Preview

Features Showcase

🎨

Theme Switching

Try different themes: Default, Forest, Dark, Neutral

✏️

Hand-Drawn Style

Toggle hand-drawn appearance with Comic Sans font and sketchy effects

🔍

Zoom & Scale

Zoom in/out from 50% to 200% for better viewing

📱

Fullscreen Mode

Enter fullscreen mode for immersive diagram viewing

📤

Export Options

Export as SVG or PNG for use in documents

✏️

Live Editing

Click Edit to modify code and see real-time updates

🎯

Real-time Preview

Instant rendering with error handling and loading states

⚡

Performance

Optimized rendering with debouncing and memory management

✨ New: Hand-Drawn Style

Features:

  • • Comic Sans MS font for a casual look
  • • Sketchy line effects with SVG filters
  • • Increased spacing for better readability
  • • Step-based curves instead of smooth lines
  • • Enhanced visual appeal for presentations

How to use:

  1. 1. Generate or load a diagram
  2. 2. Click the "Hand-Drawn" button in the toolbar
  3. 3. Watch the diagram transform instantly
  4. 4. Toggle back to normal style anytime

Current Mermaid Code

flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Process]
    B -->|No| D[End]
    C --> D