Mermaid Peek

Read the diagram.
Keep your place.

Open Mermaid code from web pages and Bitbucket diffs in a large, collapsible PNG viewer.

A viewer for code review

• Extract the new revision of supported Mermaid blocks in Bitbucket PR diffs.
• Start with a small floating button. Open a viewer using 94% of the screen width and height.
• Zoom, Fit, drag to pan, switch diagrams, and save PNGs.
• Run only on configured sites. Render diagrams locally when opened.

Getting started

1. Open a supported page on Bitbucket or an atlassian.net site.
2. For other sites, open the extension options, add the site, grant access, and reload.
3. When Mermaid code is detected, click the lower-right floating button or press Ctrl+M.
4. Use Fit to see the whole diagram or + and − to change zoom. Drag or scroll to move.
5. Choose PNG 저장 to save. Press Esc or Ctrl+M to collapse.

Korean UI labels

• 펼쳐 보기 — Open viewer
• 접기 — Collapse
• 원본 — Jump to source code
• PNG 저장 — Save PNG

Troubleshooting

No button? Check that the site is in your allowed list, site permission is granted, and the code is loaded. Reload after adding a site. Detection requires a supported Mermaid block or complete code fence and depends on the site's HTML structure.

Rendering error? Check the Mermaid syntax and ensure the full diagram is present. Sources over 50,000 characters are excluded. PNGs are limited to 4096 pixels per dimension and approximately 12 megapixels.

Iframe contents, closed shadow roots, canvas editors, and code not yet loaded into the page are not supported. Chrome 116 or later is required.

Privacy and support

Diagram source and PNGs are processed locally. Read the privacy policy. Once the extension is listed, use the developer contact on its Chrome Web Store page for questions. Include your Chrome version and a minimal, non-sensitive example when reporting an issue.