Myrmaid

Renders Mermaid diagrams in web pages with interactive controls

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.