Mermaid Diagrams For Bitb

Mermaid Diagrams for Bitbucket automatically detects Mermaid code blocks in Bitbucket Cloud and renders them as beautiful, interactive diagrams — right inside pull request descriptions, README files, and source code views.

How it works
Write your diagrams using standard Mermaid syntax inside fenced code blocks (```mermaid) in any Bitbucket markdown field. The extension detects these blocks, replaces the raw code with the rendered diagram, and shows a loading spinner while processing. No configuration needed — it just works.

Supported diagram types
All Mermaid diagram types are supported, including flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, Git graphs, journey maps, mind maps, timelines, and more.

Features
→ Automatic rendering: Diagrams appear wherever Mermaid code blocks are found — PR descriptions, README pages, and source file views.
→ Code toggle: Every rendered diagram includes a "</> Code" button to switch between the visual diagram and the original Mermaid source.
→ Loading indicator: A spinner is displayed instantly while diagrams are being rendered, so you never see raw code flash on screen.
→ Lazy loading: The Mermaid library is only loaded when a page actually contains diagram blocks, keeping Bitbucket fast on pages without diagrams.
→ SPA-aware: Works seamlessly with Bitbucket's single-page application architecture — diagrams render correctly when navigating between pages without full reloads.
→ Error handling: If a diagram has a syntax error, the extension shows a clear error message and falls back to displaying the original code.

Works with
→ Pull request descriptions
→ Pull request comments
→ Repository README files
→ Source file views (rendered markdown)

Privacy
This extension does not collect, store, or transmit any data. It runs entirely in your browser and only activates on bitbucket.org pages. No analytics, no tracking, no external requests — your code stays on your machine.