Transform Mermaid Code into Beautiful Interactive Diagrams

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

Add to Chrome → | View on GitHub →

Why Myrmaid?

Zero Configuration Required

Install and start seeing diagrams immediately. No setup, no API keys, no accounts needed. Just add the extension and visit any page with Mermaid diagrams.

Works Everywhere

Automatically detects Mermaid diagrams on GitHub, GitLab, Stack Overflow, Confluence, Notion, and thousands of other sites. If there’s a Mermaid code block, Myrmaid will find it.

Professional-Grade Rendering

Powered by the official Mermaid.js library with enterprise-quality output. Every diagram renders with the same quality as dedicated visualization tools.

Privacy First

No data collection. No tracking. No external servers. Everything runs locally in your browser. Your diagrams, your privacy, your control.

Screenshot Gallery

Implementation Note: Add screenshots/videos here showing:

  • Extension in action on GitHub
  • Interactive pan/zoom controls
  • Minimap navigation
  • Theme switching
  • Export options
  • Before/after comparison
[Screenshot: Mermaid diagram on GitHub before Myrmaid]
[Screenshot: Same diagram after Myrmaid - rendered with toolbar]
[Screenshot: Interactive controls in action - pan/zoom]
[Screenshot: Minimap showing complex diagram navigation]
[Screenshot: Theme options - default, dark, forest, neutral]
[Screenshot: Export menu - SVG, PNG, source code]

Key Features

📊 Universal Diagram Support

Renders all Mermaid diagram types:

  • Flowcharts – Decision trees and process flows
  • Sequence Diagrams – API interactions and workflows
  • Class Diagrams – Object-oriented design
  • State Diagrams – State machines and transitions
  • Gantt Charts – Project timelines
  • Entity-Relationship Diagrams – Database schemas
  • User Journeys – UX flows
  • Git Graphs – Branch and merge visualization
  • Pie Charts – Data distribution
  • Quadrant Charts – Matrix analysis
  • Requirement Diagrams – System requirements
  • Mindmaps – Hierarchical thinking
  • Timelines – Historical events
  • Sankey Diagrams – Flow visualization
  • XY Charts – Data plotting
  • Block Diagrams – System architecture
  • Packet Diagrams – Network protocols
  • Architecture Diagrams – Cloud and system design
  • And more…

🎨 Customizable Themes

Choose from multiple built-in themes:

  • Default Theme – Clean, professional appearance
  • Dark Theme – Easy on the eyes for night coding
  • Forest Theme – Nature-inspired colors
  • Neutral Theme – Minimal, distraction-free

Themes apply seamlessly across all websites. Diagrams can also use their embedded theme preferences.

🔍 Advanced Navigation

Interactive Pan & Zoom

  • Smooth transformations with mouse, trackpad, or keyboard
  • Pinch-to-zoom on touch devices
  • Mouse wheel for quick zooming
  • Click and drag to pan

Minimap Overview

  • Bird’s-eye view of complex diagrams
  • Click to jump to any section
  • Visual indicator of current viewport
  • Perfect for large architecture diagrams

Fit-to-View

  • Instantly frame the entire diagram
  • One-click reset to original size
  • Smart centering and scaling

Keyboard Shortcuts

  • Arrow keys for panning
  • +/- for zooming
  • 0 to reset view
  • Power-user navigation without touching your mouse

💾 Multi-Format Export

SVG Export

  • Vector graphics for presentations
  • Scalable to any size without quality loss
  • Editable in design tools
  • Perfect for documentation

PNG Export

  • Raster images for sharing and embedding
  • High-DPI support for retina displays
  • Crisp output at any resolution
  • Email and chat-friendly

Source Code

  • Copy original Mermaid syntax
  • Edit in your preferred tool
  • Share with team members
  • Version control integration

🛡️ Enterprise Security

Content Security Policy Compliant

  • Follows best practices for web security
  • Safe to use in corporate environments
  • No inline script execution

XSS Prevention

  • Comprehensive input sanitization
  • Protected against code injection
  • Safe rendering of untrusted content

No External Network Requests

  • All processing happens locally
  • No data sent to remote servers
  • Works completely offline
  • No third-party tracking

Privacy Guaranteed

  • No data collection or telemetry
  • No analytics tracking
  • No user behavior monitoring
  • No personal information stored

⚡ Performance Optimized

Efficient Detection

  • Minimal CPU usage
  • Smart caching strategies
  • Fast page load times
  • No noticeable performance impact

Concurrent Rendering

  • Multiple diagrams render simultaneously
  • Intelligent queue management
  • Progress tracking for large diagrams
  • Non-blocking UI updates

Optimized Bundle Size

  • Tree-shaken for minimal footprint
  • Content bundle: ~338KB
  • Background script: ~14KB
  • Fast installation and updates

GPU-Accelerated

  • Smooth pan and zoom transformations
  • 60 FPS interactions
  • Hardware-accelerated rendering
  • Responsive even on complex diagrams

Perfect For

👨‍💻 Software Developers

View architecture diagrams, sequence flows, and class hierarchies directly in pull requests and code documentation. No more switching to external tools or mentally parsing diagram syntax.

Use Cases:

  • Reviewing system architecture in PRs
  • Understanding API workflows in documentation
  • Visualizing class relationships in code reviews
  • Exploring database schemas in wikis

📚 Technical Writers

Review diagrams in documentation sites, wikis, and content management systems without switching tools. See exactly how your diagrams will render for readers.

Use Cases:

  • Previewing diagrams in draft documentation
  • Ensuring consistency across doc sets
  • Validating diagram syntax and rendering
  • Creating visual guides for users

🔧 DevOps Engineers

Visualize deployment pipelines, infrastructure diagrams, and workflow charts in your daily browsing. Understand system architecture at a glance.

Use Cases:

  • Reviewing infrastructure as code
  • Understanding CI/CD pipelines
  • Visualizing deployment strategies
  • Documenting system topologies

👥 Team Collaborators

See diagrams in Confluence, Notion, GitHub Discussions, and team wikis exactly as intended. Everyone on the team sees the same visual representation.

Use Cases:

  • Sprint planning with Gantt charts
  • Design discussions with flowcharts
  • Decision matrices with quadrant charts
  • Process documentation with sequence diagrams

🎓 Students & Educators

Access visual learning materials in online courses, textbooks, and educational platforms. Transform abstract concepts into visual understanding.

Use Cases:

  • Computer science course materials
  • Algorithm visualization
  • Database design courses
  • Software engineering principles

How It Works

1. Install Myrmaid

One click to add the extension to Chrome, Edge, or other Chromium browsers.

2. Browse Normally

Visit any webpage with Mermaid code blocks. Look for code blocks marked with “mermaid” or “mmd” language identifiers, or HTML elements with class="mermaid".

3. Diagrams Render Automatically

Myrmaid detects diagram code and renders it instantly with interactive controls. Original code blocks are preserved if you need to see the source.

4. Interact & Export

Use the toolbar to zoom, navigate, or export diagrams. All features available with simple clicks or keyboard shortcuts.

Supported Platforms

Myrmaid works seamlessly on popular platforms:

Developer Platforms:

  • GitHub (repositories, pull requests, issues, discussions, wikis, gists)
  • GitLab (merge requests, issues, wikis, snippets)
  • Bitbucket
  • SourceForge

Documentation Sites:

  • MkDocs
  • Docusaurus
  • GitBook
  • Read the Docs
  • Sphinx
  • Jekyll sites
  • Hugo sites

Collaboration Tools:

  • Confluence
  • Jira
  • Notion
  • Microsoft Teams (web)
  • Slack (web)

Q&A Sites:

  • Stack Overflow
  • Stack Exchange network
  • Reddit (technical subreddits)

Custom Sites:

  • Internal wikis and documentation
  • Custom tools and dashboards
  • Any site rendering Mermaid code blocks

Browser Compatibility

Available Now

Google Chrome

Microsoft Edge

  • Version 90 and higher (Chromium-based)
  • Full feature support
  • Install from Chrome Web Store

Other Chromium Browsers

  • Brave, Vivaldi, Opera
  • Version 90+ based on Chromium
  • Install from Chrome Web Store

Coming Soon

Safari for macOS

  • macOS 11.0 (Big Sur) and higher
  • Native Swift extension
  • UserDefaults for settings
  • Full keyboard and trackpad support
  • PNG export via native rendering

Safari for iOS

  • iOS 15.0 and higher
  • Touch-optimized controls
  • Swipe gestures
  • SVG and source export

Safari for iPadOS

  • iPadOS 15.0 and higher
  • Optimized for larger touch screens
  • Apple Pencil support
  • Split-screen multitasking

Safari for visionOS

  • visionOS 1.0 and higher
  • Spatial computing features
  • 3D depth layers
  • Hand tracking support
  • Immersive diagram exploration

Learn more about Safari →

Technical Excellence

Modern Architecture

Manifest V3

  • Latest Chrome extension architecture
  • Enhanced security model
  • Improved performance
  • Service worker-based background processing

TypeScript 5.8+

  • Comprehensive type safety
  • Strict mode enabled
  • Full IntelliSense support
  • Maintainable codebase

SOLID Principles

  • Single Responsibility Principle
  • Open/Closed Principle
  • Liskov Substitution Principle
  • Interface Segregation Principle
  • Dependency Inversion Principle

Dependency Injection

  • Loosely coupled components
  • Easy testing and mocking
  • Flexible architecture
  • Clear component contracts

Code Quality

Comprehensive Testing

  • Security smoke tests
  • Integration tests
  • End-to-end tests
  • Performance benchmarks

Extensive Documentation

  • JSDoc coverage across all modules
  • Architecture guides
  • API documentation
  • Troubleshooting guides

Clean Code

  • ESLint validation
  • Consistent formatting
  • Clear naming conventions
  • Well-organized modules

Privacy & Security

Privacy Commitments

✓ No Data Collection – We don’t collect, store, or transmit any user data ✓ No Tracking – No analytics, telemetry, or behavior monitoring ✓ No External Servers – All processing happens locally in your browser ✓ No Account Required – Install and use immediately ✓ Open Development – Transparent codebase and development process

Read Full Privacy Policy →

Security Features

✓ Input Sanitization – All diagram content sanitized before rendering ✓ XSS Prevention – Protected against cross-site scripting attacks ✓ CSP Compliant – Follows Content Security Policy best practices ✓ Secure DOM Manipulation – Safe DOM operations throughout ✓ Regular Security Audits – Ongoing security testing and validation

Permissions Explained

Storage Permission

  • Saves your theme and preference settings locally
  • Data stays on your device

Clipboard Write Permission

  • Enables copying diagrams and source code
  • Only activates when you click “Copy”

Tabs Permission

  • Detects when to render diagrams
  • Does not read URLs or browsing history

Host Permissions

  • Detects diagrams on any website
  • All processing happens locally

Frequently Asked Questions

General

Q: Is Myrmaid free? A: Yes, Myrmaid is completely free to use with no premium tiers or paid features.

Q: Do I need to create an account? A: No account is required. Install the extension and start using it immediately.

Q: Does Myrmaid work offline? A: Yes, once installed, Myrmaid works completely offline. No internet connection required for diagram rendering.

Q: What browsers are supported? A: Chrome 90+, Edge 90+, and other Chromium-based browsers. Safari for macOS, iOS, iPadOS, and visionOS coming soon.

Privacy & Security

Q: What data does Myrmaid collect? A: None. Myrmaid collects zero data. Everything runs locally in your browser.

Q: Does Myrmaid send my diagrams to a server? A: No. All diagram processing happens entirely in your browser. Nothing is sent to external servers.

Q: Can Myrmaid see my browsing history? A: No. Myrmaid only detects diagram code on the current page. It does not access or store browsing history.

Q: Is it safe to use in a corporate environment? A: Yes. Myrmaid follows enterprise security best practices, is CSP-compliant, and makes no external network requests.

Features

Q: What diagram types are supported? A: All Mermaid diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, and 15+ more.

Q: Can I export diagrams? A: Yes. Export as SVG (vector), PNG (raster), or copy the source code. All exports are high-quality and DPI-aware.

Q: Do keyboard shortcuts work? A: Yes. Use arrow keys for panning, +/- for zoom, and 0 to reset. Full keyboard navigation available.

Q: Can I customize themes? A: Yes. Choose from default, dark, forest, or neutral themes. Diagrams can also use embedded theme preferences.

Technical

Q: What sites does Myrmaid work on? A: Any site with Mermaid code blocks, including GitHub, GitLab, Stack Overflow, Confluence, Notion, documentation sites, and custom tools.

Q: How does detection work? A: Myrmaid scans for code blocks with “mermaid” or “mmd” language tags, and HTML elements with class="mermaid".

Q: Does it slow down my browser? A: No. Myrmaid uses efficient detection algorithms and minimal resources. Most users notice no performance impact.

Q: What’s the bundle size? A: Content script is ~338KB and background script is ~14KB (after tree-shaking and optimization).

Troubleshooting

Q: Diagrams aren’t rendering. What should I check? A: Verify the extension is enabled, refresh the page, and check that code blocks are properly formatted with “mermaid” language tags.

Q: Can I see the original code? A: Yes. The original code block is preserved. Click the “View Source” button in the toolbar.

Q: How do I report bugs? A: Use the Chrome Web Store support tab or open an issue on GitHub. Enable verbose logging in settings for diagnostics.

Q: Where are settings stored? A: Settings are stored locally in your browser’s storage. They persist across sessions but never leave your device.

Future Plans

Q: When will Safari support launch? A: Safari extensions for macOS, iOS, iPadOS, and visionOS are in development. Join the waitlist to be notified.

Q: Will there be a Firefox version? A: Firefox support is planned after Safari launch. Firefox 90+ will be supported.

Q: What’s coming in future updates? A: Spatial computing features for visionOS, additional themes, custom theme creation, and more export formats.

Get Started

Installation

  1. Visit the Chrome Web Store
  2. Click “Add to Chrome”
  3. Grant the necessary permissions when prompted
  4. Browse to any page with Mermaid diagrams

First Steps

  1. Try it on GitHub – Visit a GitHub repository with Mermaid diagrams
  2. Explore Controls – Click the toolbar to access pan/zoom and export
  3. Customize Themes – Open extension popup to change theme
  4. Export a Diagram – Try exporting as SVG or PNG

Example Sites to Try

  • Mermaid.js Documentation
  • GitHub repositories with diagrams
  • GitLab project documentation
  • Your favorite technical docs site

Support

Get Help

Documentation

  • Installation guide
  • Troubleshooting tips
  • Keyboard shortcuts reference
  • FAQ section

Report Issues

  • Chrome Web Store support tab
  • GitHub issues (link coming soon)
  • Enable verbose logging for diagnostics

Feature Requests

  • Submit via Chrome Web Store
  • GitHub discussions (link coming soon)
  • Community feedback welcome

Stay Updated

Blog

Social Media

  • Follow for updates
  • See extension in action
  • Share your use cases

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

Add to Chrome Now →