Mermaid Translator

日本版 README

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

1. Select Mermaid text on a web page
2. A small button appears near your selection
3. 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