Mermaid Peek

Read wide Mermaid diagrams without leaving your code review. Mermaid Peek finds Mermaid code on sites you allow and starts as a small floating button. Open a viewer that uses 94% of the screen width and height while keeping the original page in place. BUILT FOR CODE REVIEW • Detect Mermaid code fences in Bitbucket pull request Files changed diffs. • Extract the new revision, excluding line numbers and diff markers. • Handle loaded diff content and supported lazy-loading placeholders. • Also detect ordinary Mermaid code blocks on web pages. START SMALL, READ LARGE • The viewer starts collapsed. • Press Ctrl+M to expand or collapse, or Esc to collapse. • Zoom in and out, view at 100%, or use Fit to fit the diagram to the viewer. • Drag or scroll to navigate a zoomed diagram. • Choose between detected diagrams and save them as PNG. • PNG rendering starts when you open a diagram. RUN ONLY WHERE YOU CHOOSE • Default sites: https://bitbucket.org/* and https://*.atlassian.net/*. • Add or remove sites in the extension options. • For an added site, grant Chrome's site permission and reload the page. • Detection scripts are not injected into sites outside your configured list. RENDER LOCALLY The Mermaid renderer is bundled with the extension. Mermaid source and generated PNGs are processed in your browser, without an external rendering service. No analytics, advertising, or tracking code is included. Your site list is stored locally in the browser. LIMITATIONS • Detection depends on the page's HTML structure and requires a supported Mermaid block or a complete code fence. • Unloaded code, iframe contents, closed shadow roots, and canvas-based editors are not supported. • Sources over 50,000 characters are excluded. PNG output is limited to 4096 pixels per dimension and approximately 12 megapixels. • Requires Chrome 116 or later. This is an independent extension, not an official product of Mermaid, Bitbucket, Atlassian, or Google.