Mermaid Translator Library - v1.1.0
Mermaid Translator
Select Mermaid text anywhere on the web and render it instantly.
Mermaid Translator is a Chrome extension that lets you select Mermaid syntax on any web page and render it on the spot.
What is this?
Mermaid Translator renders diagrams based on what a person selects, not on Markdown structure or specific tags.
- No automatic actions
- No page structure assumptions
- No page breakage
Only when you need it, and only as much as you need.
Features
- Render Mermaid diagrams from selected text
- Save Mermaid diagrams in SVG/PNG format
- Edit mode: open a larger panel, tweak Mermaid code, and preview changes
- The window can be freely dragged and resized without interfering with existing pages.
How it works
- Select Mermaid text on a web page
- A small button appears near your selection
- Click the button to render the diagram
Nothing happens automatically. You are always in control.
Works anywhere
- Technical blogs and documentation
- GitHub Issues and README pages
- Internal tools and company wikis
- Pages with unusual HTML structures
It does not rely on Markdown code blocks or <pre> / <code> tags.
Designed to be unobtrusive
- No automatic rendering
- No page layout changes
- No focus or scroll hijacking
- No persistent UI
If something fails, it simply does nothing.
Privacy & Security
- No external network requests
- No data collection
- All processing happens locally
Safe for internal or corporate usage.
Installation
Chrome Web Store
Mermaid Translator (Chrome Web Store)
Local build (for development)
pnpm install
pnpm build
Load the dist/ directory from Chrome's extensions page.
Why this approach?
Many Mermaid extensions:
- Scan the entire page
- Assume a specific structure
- Auto-render without user intent
This extension intentionally chooses the opposite.
Not DOM-driven, but user-driven.
This makes it more reliable and trustworthy.
Tech Stack
- TypeScript
- Vite
- Chrome Extension (Manifest V3)
- Preact
- Mermaid
License
MIT License Provided "as is" without warranty of any kind.
Philosophy (short)
Do nothing automatically. Do one thing well. Never get in the way.
Development
pnpm build:dev
build:dev outputs a build with developer logging enabled.
Commands
pnpm lint
pnpm lint:types
pnpm test
pnpm format
Documents
- Specs:
docs/specs/ - Architecture:
docs/ARCHITECTURE.md - Coding Guidelines:
docs/CODING_GUIDELINES.md