Mermaid Translator

About

🧜Mermaid Translator

Short description:
Mermaid Translator lets you instantly preview Mermaid code found on any web page, even if the site does not support Mermaid.

Description:
Mermaid Translator renders Mermaid diagrams from selected text on any web page.
It works well with Mermaid snippets generated by AI chat services, as well as Mermaid code embedded in internal docs, wikis, or technical articles.
No setup and no page-specific rules. Just select text and click.

Key features:

1. Instant preview for AI-generated Mermaid code. View Mermaid diagrams directly from AI responses on the same page.
2. Works on non-Mermaid sites. Internal portals, custom web apps, and non-Markdown pages are supported.
3. Shadow DOM for stable rendering. Renders in an isolated overlay to avoid breaking complex UIs.
4. Pan and zoom support. Easily inspect large or dense diagrams.
5. Export as PNG or SVG. Save rendered diagrams for docs and presentations.
6. Themes and dark mode. Switch Mermaid themes to match your environment.

How to use:

1. Select Mermaid text on a web page.
2. A small action button appears near your selection.
3. Click the button to render the diagram.

Nothing runs automatically. You always stay in control.

Works everywhere:
Technical blogs and documentation. GitHub Issues and README. Internal tools and company wikis. Pages with unusual HTML structures.
No dependency on Markdown blocks, tags, or specific sites.

Unobtrusive by design:
No auto rendering. No layout changes. No focus or scroll hijacking. No persistent UI.
If rendering fails, it quietly does nothing.

Privacy and security:
No external network requests. No data collection. No analytics. All processing happens locally in your browser.

License:
MIT License. Provided "as is" without warranty of any kind.