https://github.com/abakermi/mermaid-live

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.
https://github.com/abakermi/mermaid-live

diagram mermaid vscode-extension

Last synced: 29 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/abakermi/mermaid-live
• Owner: abakermi
• License: mit
• Created: 2024-11-19T06:13:06.000Z (about 1 month ago)
• Default Branch: master
• Last Pushed: 2024-11-25T10:04:58.000Z (about 1 month ago)
• Last Synced: 2024-11-25T11:20:29.012Z (about 1 month ago)
• Topics: diagram, mermaid, vscode-extension
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=abdelhakakermi.mermaid-live
• Size: 11 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Mermaid Live Preview

[![Version](https://img.shields.io/visual-studio-marketplace/v/abdelhakakermi.mermaid-live)](https://marketplace.visualstudio.com/items/abdelhakakermi.mermaid-live/changelog) [![Installs](https://img.shields.io/visual-studio-marketplace/i/abdelhakakermi.mermaid-live)](https://marketplace.visualstudio.com/items?itemName=abdelhakakermi.mermaid-live) [![Downloads](https://img.shields.io/visual-studio-marketplace/d/abdelhakakermi.mermaid-live)](https://marketplace.visualstudio.com/items?itemName=abdelhakakermi.mermaid-live)



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](https://github.com/your-username/mermaid-live/issues)

## Contributing

Found a bug or have a suggestion? Please open an issue on our [GitHub repository](https://github.com/your-username/mermaid-live).

## License

This extension is licensed under the [MIT License](LICENSE).