Flow Mermaid - VS Code Extension
Transform your code into beautiful Mermaid flow diagrams instantly!
A powerful Visual Studio Code extension that leverages AI to automatically generate interactive Mermaid flow diagrams from your selected code. Perfect for documentation, code reviews, and understanding complex logic flows.
✨ Features
🎯 Core Features
- 🤖 AI-Powered Conversion: Select any code snippet and instantly convert it to a professional Mermaid flow diagram
- 🖼️ Interactive Webview: View diagrams in a beautiful, theme-integrated panel with smooth interactions
- 🔍 Advanced Zoom Controls:
- Ctrl + Mouse Scroll for natural zooming
- Zoom buttons and keyboard shortcuts (+, -, 0)
- Fit-to-screen and reset options
- Smart panning when zoomed (scroll without Ctrl)
- 💾 Multiple Export Options:
- Copy Mermaid code to clipboard
- Export as SVG (vector, scalable)
- Export as PNG (high-resolution, 2x quality)
- 🎨 VS Code Theme Integration: Automatically matches your VS Code color scheme
- ⚡ Smart Panel Management: Reuses existing panel for better performance
🎮 Interactive Controls
| Feature |
Shortcut |
Description |
| Zoom In |
+ or Ctrl + Scroll Up |
Increase diagram size |
| Zoom Out |
- or Ctrl + Scroll Down |
Decrease diagram size |
| Reset Zoom |
0 |
Return to 100% |
| Fit to Screen |
Button |
Auto-size to viewport |
| Pan Diagram |
Scroll (without Ctrl) |
Move around zoomed diagram |
| Copy Code |
Button |
Copy Mermaid code |
| Export SVG |
Button |
Download as SVG |
| Export PNG |
Button |
Download as PNG |
📦 Installation
From Source
Clone this repository:
git clone https://github.com/yourusername/flow-mermaid.git
cd flow-mermaid
Install dependencies:
npm install
Open in VS Code and press F5 to launch Extension Development Host
From Marketplace (Coming Soon)
Search for "Flow Mermaid" in VS Code Extensions marketplace and click Install.
🚀 Quick Start
Prerequisites
- VS Code: Version 1.108.1 or higher
- API Endpoint: The extension connects to an API server for diagram generation
- Default:
https://pi.cerberus-acrux.ts.net/flow/code-to-mermaid
- See API Configuration to customize
Basic Usage
Select Code
Highlight any code snippet in your editor
Generate Diagram
- Right-click → Select "Generate Mermaid Flow Diagram"
OR
- Press Ctrl+Shift+P → Type "Generate Mermaid" → Enter
View & Interact
A webview panel opens with your interactive diagram
Zoom & Export
Use Ctrl + Mouse Scroll to zoom, then export or copy as needed
📖 Detailed Usage
Generating Diagrams
The extension works with any programming language. Here are some examples:
JavaScript Function with Conditionals:
function checkAge(age) {
if (age >= 18) {
console.log("Adult");
return true;
} else {
console.log("Minor");
return false;
}
}
Python Loop Logic:
def find_max(numbers):
max_val = numbers[0]
for num in numbers:
if num > max_val:
max_val = num
return max_val
Zoom Controls
| Method |
Action |
| Ctrl + Scroll Up/Down |
Zoom in/out (NEW!) |
| + / - keys |
Zoom in/out |
| 0 key |
Reset to 100% |
| Zoom buttons |
Click +/- in toolbar |
| Fit button (⤢) |
Auto-fit to screen |
| Reset button (◎) |
Return to 100% |
Zoom Range: 25% to 300%
Zoom Step: 15% per action
Export Options
Copy Mermaid Code (📋)
Copies the raw Mermaid syntax to your clipboard for use in:
- GitHub README files
- Documentation sites
- Mermaid Live Editor
- Any Mermaid-compatible platform
Export SVG (⬇️)
- Format: Scalable Vector Graphics
- Use Case: Presentations, high-quality documents, web
- Filename:
mermaid-{timestamp}.svg
Export PNG (🖼️)
- Format: Portable Network Graphics
- Quality: 2x resolution for crisp output
- Use Case: Embedding in non-vector applications
- Filename:
mermaid-{timestamp}.png
⚙️ API Configuration
The extension requires an API endpoint that converts code to Mermaid diagrams.
Default Endpoint
POST https://pi.cerberus-acrux.ts.net/flow/code-to-mermaid
API Specification
Request:
POST /flow/code-to-mermaid
Content-Type: application/json
{
"code": "function example() { return true; }"
}
Response (any format):
{ "mermaid": "graph TD\n A[Start]..." }
OR
{ "diagram": "graph TD..." }
OR
{ "code": "graph TD..." }
OR
graph TD
A[Start]
B[End]
Custom API Endpoint
To use your own API, modify extension.js line 10:
const API_ENDPOINT = "https://your-api-server.com/your-endpoint";
Request Timeout
Default: 30 seconds (configurable in extension.js line 11)
const REQUEST_TIMEOUT = 30000; // milliseconds
🎨 Webview Features
User Interface
┌────────────────────────────────────────────┐
│ Mermaid Flow Diagram [×] │ ← Header
├────────────────────────────────────────────┤
│ [📋][⬇️][🖼️] [−][100%][+][◎][⤢] │ ← Toolbar
├────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ │
│ │ │ │
│ │ Mermaid Diagram │ │ ← Diagram
│ │ │ │
│ └──────────────────┘ │
│ │
├────────────────────────────────────────────┤
│ Ready 1024 × 768 │ ← Status Bar
└────────────────────────────────────────────┘
Visual Design
- White Background: Clean diagram display with rounded corners
- Drop Shadow: Subtle depth effect
- Smooth Transitions: 0.2s zoom animations
- Custom Scrollbars: Theme-matched scrollbar styling
- Responsive Layout: Adapts to different window sizes
Notifications
Toast notifications appear for:
- ✅ Code copied successfully
- ✅ SVG/PNG exported
- ❌ Export failures
- Auto-dismiss after 3 seconds
🛠️ Development
Setup Development Environment
# Clone repository
git clone https://github.com/yourusername/flow-mermaid.git
cd flow-mermaid
# Install dependencies
npm install
# Run linting
npm run lint
# Run tests
npm test
Debug Extension
- Open project in VS Code
- Press F5 to launch Extension Development Host
- Set breakpoints in
extension.js
- Test features in the new window
Project Structure
flow-mermaid/
├── extension.js # Main extension code
├── package.json # Extension manifest
├── example-code.js # Test code samples
├── README.md # This file
├── WEBVIEW_FEATURES.md # Detailed webview docs
├── QUICKSTART.md # Quick reference
├── CHANGELOG.md # Version history
└── test/ # Test files
🐛 Troubleshooting
Common Issues
"Cannot connect to API server"
- ✅ Check if the API endpoint is accessible
- ✅ Verify network connectivity
- ✅ Check firewall settings
- ✅ Ensure API server is running
"Request timeout"
- ✅ API is taking longer than 30 seconds
- ✅ Try with smaller code snippets
- ✅ Check API server performance
- ✅ Increase timeout in extension.js
"No code selected"
- ✅ Ensure you've highlighted/selected code in the editor
- ✅ Selection must not be empty
Diagram not rendering
- ✅ Open Developer Tools (Help > Toggle Developer Tools)
- ✅ Check console for errors
- ✅ Verify Mermaid code syntax
- ✅ Ensure Mermaid CDN (jsdelivr.net) is accessible
Zoom not working
- ✅ Ensure you're holding Ctrl while scrolling
- ✅ Try keyboard shortcuts (+, -, 0) instead
- ✅ Check if cursor is over the diagram container
📋 Requirements
- VS Code: 1.108.1 or higher
- Node.js: For development only
- Internet: For Mermaid CDN and API access
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature)
- Commit your changes (
git commit -m 'Add some AmazingFeature')
- Push to the branch (
git push origin feature/AmazingFeature)
- Open a Pull Request
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
📝 Changelog
Version 0.0.1 (Initial Release)
Features
- ✨ AI-powered code to Mermaid diagram conversion
- 🖼️ Interactive webview with theme integration
- 🔍 Advanced zoom controls with Ctrl + Mouse Scroll
- 💾 Export as SVG and PNG
- 📋 Copy Mermaid code to clipboard
- ⌨️ Keyboard shortcuts for zoom
- 🎨 Smart panning and scrolling
- ⚡ Panel reuse for better performance
- 🛡️ Comprehensive error handling
- 📊 Status bar with diagram dimensions
🙏 Acknowledgments
- Mermaid.js - For the amazing diagram rendering library
- VS Code Team - For the excellent extension API
- Contributors - Thank you to all who have contributed!
📞 Support
Made with ❤️ for developers who love visual documentation
⭐ If you find this extension useful, please star the repository!
