Myrmaid

Transform Mermaid Code into Beautiful Interactive Diagrams

Myrmaid automatically detects and renders Mermaid diagrams on any webpage you visit. Whether you're browsing code repositories, reading technical documentation, or reviewing pull requests, Myrmaid instantly transforms plain text diagram code into professional, interactive visualizations.

Why Choose Myrmaid?

✓ Zero Configuration Required – Install and start seeing diagrams immediately. No setup, no API keys, no accounts needed.
✓ Works Everywhere – Automatically detects Mermaid diagrams across thousands of popular development platforms, documentation sites, wikis, and content management systems.
✓ Professional-Grade Rendering – Powered by the official Mermaid.js library with enterprise-quality output.
✓ Interactive Controls – Pan, zoom, and navigate complex diagrams with smooth, GPU-accelerated interactions.

Key Features

📊 Universal Diagram Support
Renders all Mermaid diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, entity-relationship diagrams, user journeys, Git graphs, pie charts, quadrant charts, requirement diagrams, mindmaps, timelines, ZenUML, Sankey diagrams, XY charts, block diagrams, packet diagrams, architecture diagrams, and more.

🎨 Customizable Themes
Choose from multiple built-in themes (default, dark, forest, neutral) or let diagrams use their embedded theme preferences. Themes apply seamlessly across all websites.

🔍 Advanced Navigation
Interactive Pan & Zoom: Smooth transformations with mouse, trackpad, or keyboard controls
Minimap Overview: Spatial navigation for large, complex diagrams
Fit-to-View: Instantly frame the entire diagram in your viewport
Keyboard Shortcuts: Power-user navigation without touching your mouse

💾 Multi-Format Export
SVG Export: Vector graphics for presentations and documentation
PNG Export: Raster images for sharing and embedding
Source Code: Copy original Mermaid syntax for editing
High-DPI Support: Crisp exports on retina displays

🛡️ Enterprise Security
Content Security Policy (CSP) compliant
XSS prevention with comprehensive sanitization
No external network requests for diagram processing
All rendering happens locally in your browser
No data collection or telemetry

⚡ Performance Optimized
Efficient detection algorithms minimize CPU usage
Concurrent rendering with intelligent queue management
Tree-shaken bundles for fast load times
GPU-accelerated transformations for smooth interactions

Perfect For

👨‍💻 Software Developers
View architecture diagrams, sequence flows, and class hierarchies directly in pull requests and code documentation.

📚 Technical Writers
Review diagrams in documentation sites, wikis, and content management systems without switching tools.

🔧 DevOps Engineers
Visualize deployment pipelines, infrastructure diagrams, and workflow charts in your daily browsing.

👥 Team Collaborators
See diagrams in team wikis, project discussions, and collaboration platforms exactly as intended.

🎓 Students & Educators
Access visual learning materials in online courses, textbooks, and educational platforms.

How It Works

Install Myrmaid – One click to add the extension to Chrome
Browse Normally – Visit any webpage with Mermaid code blocks
Diagrams Render Automatically – Myrmaid detects and renders diagrams instantly
Interact & Export – Use the toolbar to zoom, navigate, or export diagrams

Wide Platform Compatibility

Myrmaid works on popular code hosting platforms, issue trackers, documentation sites, wikis, markdown renderers, static site generators, and custom internal tools. Wherever Mermaid diagrams appear in your workflow, Myrmaid brings them to life.

Privacy First

Myrmaid is built with privacy as a core principle:

No account required – Install and use immediately
No data collection – We don't track, store, or transmit your browsing data
No external servers – All diagram processing happens locally in your browser
No analytics or telemetry – Your usage patterns remain private
Minimal permissions – Only requests access necessary for diagram detection

Technical Excellence

Built with modern web standards and best practices:

Manifest V3 architecture for enhanced security
TypeScript codebase with comprehensive type safety
SOLID principles and dependency injection
Interface segregation for maintainable code
Extensive automated testing

Browser Compatibility

Chrome 90 and higher
Microsoft Edge 90 and higher (Chromium-based)
Other Chromium-based browsers

Open Development

Myrmaid is developed with transparency and quality as guiding principles. The codebase follows enterprise-grade architecture patterns, comprehensive documentation, and rigorous testing standards.

Support & Feedback

Encountering issues or have feature requests? We're here to help:

Report bugs or request features through the support tab
Check documentation for troubleshooting guides
Enable verbose logging in extension settings for diagnostics

Getting Started

Click "Add to Chrome" to install Myrmaid
Grant the necessary permissions when prompted
Navigate to any webpage with Mermaid diagrams
Watch as diagrams render automatically with interactive controls
Click the toolbar to access pan/zoom controls, minimap, and export options

What's Rendering?

Look for Mermaid code blocks in various formats: code blocks marked with "mermaid" or "mmd" language identifiers, or HTML elements with class="mermaid".

Transform Your Browsing Experience

Stop squinting at indented text trying to visualize diagram structures. Install Myrmaid and see diagrams the way they were meant to be seen—beautiful, interactive, and instantly understandable.

No more:

Copying code to external rendering tools
Opening separate tabs to visualize diagrams
Losing context while switching between text and visuals
Manually parsing complex diagram syntax

Experience:

Instant diagram rendering as you browse
Interactive controls right where you need them
Professional output matching the quality of dedicated tools
Seamless integration with your existing workflow

Install Myrmaid today and transform how you interact with technical diagrams on the web.