Transform Mermaid diagram code into beautiful visuals on any webpage with just one click!
- ⚡ One-click visualization - Click the extension icon to find and visualize all Mermaid diagrams on the page
- 🌐 Universal compatibility - Works on GitHub, Confluence, Jira, GitLab, and any website with Mermaid code
- 🎨 Beautiful rendering - High-quality SVG diagrams with full zoom, pan, and navigation
- 🔗 Mermaid.live integration - Open diagrams directly in the official Mermaid.live editor
- 📱 Mobile friendly - Native browser zoom with pinch-to-zoom support
- 🔒 Privacy first - All processing happens locally in your browser
- 🎯 Multi-diagram support - Navigate between multiple diagrams on the same page
- 💾 Export capabilities - Download diagrams as SVG or open in Mermaid.live
-
From Chrome Web Store (Coming Soon)
- Visit the Chrome Web Store listing
- Click "Add to Chrome"
-
Manual Installation
- Download the latest
mermaid-visualizer-chrome.zipfrom Releases - Go to
chrome://extensions/ - Enable "Developer mode" (top-right toggle)
- Click "Load unpacked" and select the extracted folder
- Download the latest
-
From Safari Extensions Gallery (Coming Soon)
- Visit the Safari Extensions Gallery listing
- Click "Get"
-
Manual Installation
- Download the latest
mermaid-visualizer-safari.zipfrom Releases - Open Safari → Preferences → Extensions
- Enable "Developer mode"
- Load the extension
- Download the latest
- Install the extension for your browser
- Visit any webpage containing Mermaid diagram code (GitHub, Confluence, Jira, etc.)
- Click the pink Mermaid icon in your browser toolbar
- Enjoy beautiful diagrams! Navigate, zoom, and export as needed
- 🐙 GitHub - README files, issues, pull requests, wiki pages
- 📚 Confluence - Pages and blog posts
- 🎯 Jira - Issues, comments, descriptions
- 📝 GitLab - README files, merge requests, wiki
- 📖 Documentation sites - GitBook, Notion, custom docs
- 🌐 Any website displaying Mermaid code in text format
mermaid_extensions/
├── shared/ # Shared code between browsers
│ ├── mermaid-detector.js # Detects Mermaid code on pages
│ ├── diagram-renderer.js # Renders and displays diagrams
│ ├── content.js # Main content script
│ ├── styles.css # Extension UI styles
│ ├── mermaid.min.js # Mermaid library
│ ├── pako.min.js # Compression library
│ └── icon.svg # Source icon
├── chrome/ # Chrome extension files
│ ├── manifest.json # Chrome manifest (V3)
│ ├── background.js # Service worker
│ └── icons/ # Chrome-specific icons
├── safari/ # Safari extension files
│ ├── manifest.json # Safari manifest (V2)
│ ├── background.js # Background script
│ └── icons/ # Safari-specific icons
└── .github/workflows/ # CI/CD automation
# Clone the repository
git clone https://github.com/IstiN/mermaid_extensions.git
cd mermaid_extensions
# The extension is ready to use - no build step required!
# Load chrome/ or safari/ directory directly in your browser- Edit files in the
shared/directory for cross-browser changes - Browser-specific changes go in
chrome/orsafari/directories - Test changes by reloading the extension in your browser
- The GitHub Actions workflow will automatically build and deploy when you push to main
- Shared codebase - Common functionality in
shared/directory - Content scripts - Injected into web pages to detect and render diagrams
- Background scripts - Handle extension icon clicks and script injection
- No build process - Pure JavaScript, ready to load directly
We welcome contributions! Here's how to get started:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes in the
shared/directory for cross-browser compatibility - Test thoroughly on both Chrome and Safari
- Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Keep code in
shared/directory for maximum compatibility - Test on both Chrome and Safari browsers
- Follow existing code style and patterns
- Add comments for complex functionality
- Update README if adding new features
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✅ Full | Manifest V3, latest features |
| Edge | ✅ Full | Chromium-based, same as Chrome |
| Firefox | 🚧 Planned | Firefox manifest adaptation needed |
| Safari | ✅ Full | Manifest V2, macOS only |
| Opera | ✅ Likely | Chromium-based, should work |
The extension includes its own bundled version of Mermaid.js and Pako compression library to avoid CSP restrictions on external CDNs.
activeTab- Access current tab content to detect diagramsscripting- Inject content scripts when neededstorage- Save user preferences (future feature)
- No data collection - Extension processes everything locally
- No external requests - All libraries are bundled locally
- No tracking - Zero telemetry or analytics
This project is licensed under the MIT License - see the LICENSE file for details.
- Mermaid.js - The amazing diagramming library that makes this possible
- Mermaid.live - Official Mermaid editor integration
- Pako - Compression library for URL encoding
- 🐛 Bug reports: Create an issue
- 💡 Feature requests: Create an issue
- 💬 Questions: Start a discussion
- 📧 Contact: Email us
Made with ❤️ for the developer community