Mermaid Live Preview

Real-time preview of Mermaid diagrams directly in VS Code. See your diagrams come to life as you type, with automatic updates and syntax highlighting.

Features

• 🔄 Live Preview: See your diagrams update in real-time as you type
• 📊 Multiple Diagrams: Support for multiple Mermaid diagrams in a single file
• 🎨 Theme Support: Adapts to your VS Code theme
• 🚀 Easy Access: Dedicated sidebar view for quick access
• ✨ Auto-refresh: Automatic updates when you modify your diagrams

How to Use

1. Open a Markdown file
2. Create a Mermaid diagram using code fence:

   ```mermaid
   graph TD
       A[Start] --> B{Is it?}
       B -- Yes --> C[OK]
       B -- No --> D[End]
   ```
   

3. Click the Mermaid Preview icon in the activity bar
4. Your diagram will appear in the sidebar preview panel

Requirements

• Visual Studio Code 1.60.0 or higher

Known Issues

• Report issues here

Contributing

Found a bug or have a suggestion? Please open an issue on our GitHub repository.

License

This extension is licensed under the MIT License.