Mermaid Diagrams for Bitbucket

Render Mermaid diagrams and Markdown files directly inside the Bitbucket repository file viewer — no external tools, no copy-pasting. Open any .md, .mmd, or .mermaid file and diagrams appear instantly, beautifully rendered.

Getting Started

Install the app on your Bitbucket workspace in 3 steps:

1. 1 Find "Mermaid Diagrams for Bitbucket" on the Atlassian Marketplace and click Try it free.
2. 2 Select the Bitbucket workspace to install it on and approve the requested permissions.
3. 3 Open any .md, .mmd, or .mermaid file in your repository — diagrams render automatically.

File Viewer

The file viewer replaces the default code view for supported file types. It renders the file content inline — no extra clicks required.

Supported File Types

• .mmd / .mermaid — rendered as a standalone Mermaid diagram
• .md — rendered as Markdown with all Mermaid code blocks (```mermaid) rendered as diagrams

Rendered / Source Toggle

A toolbar at the top of the viewer lets you switch between Rendered and Source views at any time. The source view shows the raw file content with syntax highlighting.

Zoom & Pan

Large diagrams can be zoomed and panned directly in the viewer. Use the + / − / Reset controls in the sidebar, or scroll to zoom and drag to pan.

Mermaid Editor

The Mermaid Editor is accessible from the left navigation of any repository. It provides a live preview environment where you can write and experiment with Mermaid syntax before committing it to your repo.

Templates

Six built-in templates let you get started in one click:

Live Preview

The editor and preview panel update as you type (with a short debounce). Syntax errors are shown inline so you can fix them without leaving the editor.

Diagram Types

The app supports the full Mermaid diagram library. Common types include:

• Flowchart — process flows, decision trees, pipelines
• Sequence Diagram — service interactions, API calls, user journeys
• Class Diagram — object models, architecture overviews
• State Diagram — state machines, lifecycle flows
• Gantt Chart — project timelines, sprint planning
• Pie / XY Chart — data distribution and metrics
• Entity Relationship — database schema documentation
• Mindmap — brainstorming, hierarchical notes

Example

Embed a diagram in any Markdown file using a fenced code block:

```mermaid
flowchart TD
  A[Push to main] --> B{Tests pass?}
  B -->|Yes| C[Deploy to staging]
  B -->|No| D[Notify author]
  C --> E[Manual approval]
  E --> F[Deploy to production]
```

Themes

Six diagram themes are available. Your selection is remembered per browser and syncs across all diagrams on the page.

Support

Need assistance or have feedback? We're here to help.

Email: [email protected]