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 input. 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
🧠 Flexible Input Support: Works with not only code text, JSON, complex logic, and more
🖼️ 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

🚀 Quick Start

Prerequisites

VS Code: Version 1.108.1 or higher

Basic Usage

Select Code Highlight any code snippet in your editor
Generate Diagram
- Right-click → Select "Flow Mind" OR
- Press Ctrl+Shift+P → Type "Flow Mind" → 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 and supports not only code text, JSON, complex logic, and more. 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

🎨 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

🐛 Troubleshooting

Common Issues

"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

📝 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

📧 Email: [tamil@tamix.in]

Flow Mind

Tamil