Item logo image for Mermaid Diagrams for Bitbucket

Mermaid Diagrams for Bitbucket

Item media 2 (screenshot) for Mermaid Diagrams for Bitbucket
Item media 1 (screenshot) for Mermaid Diagrams for Bitbucket
Item media 2 (screenshot) for Mermaid Diagrams for Bitbucket
Item media 1 (screenshot) for Mermaid Diagrams for Bitbucket
Item media 1 (screenshot) for Mermaid Diagrams for Bitbucket
Item media 2 (screenshot) for Mermaid Diagrams for Bitbucket

Overview

Renders Mermaid diagram blocks in Bitbucket pull request descriptions and comments.

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.

Details

  • Version
    1.0.0
  • Updated
    March 2, 2026
  • Offered by
    CloudFrog
  • Size
    737KiB
  • Languages
    English (United States)
  • Developer
    Horacio Darinel Espinosa Barceló
    SUPMZA 38 MZ 19 LT 1 110B Cancún, Q.R. 77507 MX
    Email
    admin@cloudfrog.com.mx
    Phone
    +52 998 895 8202
  • Trader
    This developer has identified itself as a trader per the definition from the European Union and committed to only offer products or services that comply with EU laws.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Related

SparkChart: PlantUML & Mermaid Renderer

5.0

SparkChart for PlantUML and Mermaid rendering in the browser. Create, visualize, and edit diagrams with AI assistance.

GraphQL Mocker

0.0

Capture, edit, and mock GraphQL responses in real-time. Perfect for testing edge cases without backend changes.

Gemini 批量去水印工具|Prompt Case

4.7

Gemini 批量圖片去水印工具,純本地瀏覽器處理,保護您的隱私。 Gemini Batch Image Watermark Remover.

Pragmatic AI - Google Apps Script Coding Companion!

0.0

Adds a code‑review and suggestion assistant to the Google Apps Script editor using the Gemini API! This is a beta version.

Flowchart Maker

4.8

Create professional flowcharts and data flow diagrams with the Flowchart Maker. Simplify your design process!

Image Describer

5.0

Try Image Describer known as ai image description generator to let ai describe image and craft a natural picture description

Markdown Diagrams

5.0

Render PlantUML, Mermaid and others graph/diagrams on webpages.

Mermaid Diagram

4.8

Use Mermaid diagram: fast mermaid.js diagram maker & flow chart generator with Mermaid live editor for instant visual workflows.

Mermaid Previewer

4.4

Preview and export mermaid.

PlantUML to Mermaid Converter

5.0

Convert PlantUML diagrams to Mermaid syntax

GemSaver: Gemini Watermark Remover

5.0

Remove Gemini image watermarks locally and download watermark-free images with one click. (nanobanana)

Mermaid to PlantUML Converter

3.0

Converts Mermaid diagrams to PlantUML

SparkChart: PlantUML & Mermaid Renderer

5.0

SparkChart for PlantUML and Mermaid rendering in the browser. Create, visualize, and edit diagrams with AI assistance.

GraphQL Mocker

0.0

Capture, edit, and mock GraphQL responses in real-time. Perfect for testing edge cases without backend changes.

Gemini 批量去水印工具|Prompt Case

4.7

Gemini 批量圖片去水印工具,純本地瀏覽器處理,保護您的隱私。 Gemini Batch Image Watermark Remover.

Pragmatic AI - Google Apps Script Coding Companion!

0.0

Adds a code‑review and suggestion assistant to the Google Apps Script editor using the Gemini API! This is a beta version.

Flowchart Maker

4.8

Create professional flowcharts and data flow diagrams with the Flowchart Maker. Simplify your design process!

Image Describer

5.0

Try Image Describer known as ai image description generator to let ai describe image and craft a natural picture description

Markdown Diagrams

5.0

Render PlantUML, Mermaid and others graph/diagrams on webpages.

Mermaid Diagram

4.8

Use Mermaid diagram: fast mermaid.js diagram maker & flow chart generator with Mermaid live editor for instant visual workflows.

Google apps