Mermaid Diagrams Viewer

A Forge app (for Confluence cloud) that renders mermaid diagrams from code blocks in Confluence pages.

Resources:

• About Forge
• Marketplace listing
• YouTube demo

Usage

1. Add a code block to your Confluence page
2. Write your mermaid diagram syntax inside the code block
3. Add a macro using "/" key and search for "mermaid"
4. The diagram will be rendered automatically on the page

Supported Diagrams

This app supports all Mermaid diagram types, including:

• Flowcharts
• Sequence diagrams
• Class diagrams
• State diagrams
• Entity relationship diagrams
• And more...

Installation

This is a Forge app. Install it from the Atlassian Marketplace.

Development Setup

Clone the repository and install dependencies:

cd custom-ui
yarn # install dependencies

The project has two directories:

• custom-ui - The React UI for rendering diagrams (all JS tooling lives here)
• app - The Forge app manifest and build output

Running Locally

# Terminal 1: Start the custom UI dev server
cd custom-ui
yarn dev # starts vite dev server on port 5173

# Terminal 2: Start the Forge tunnel
cd app
forge tunnel # proxies requests to local dev server

Then install the app on your Confluence instance using:

cd app
forge install --upgrade

Deploying Locally

# Build the custom UI
cd custom-ui
yarn build

# Deploy to your Forge app
cd app
forge deploy
forge install --upgrade

Tests

cd custom-ui

# Run all tests
yarn test

# Run tests with coverage
yarn test --coverage

Development Guidelines

• Linting: Run yarn lint from the custom-ui directory to check code style
• Node Version: See .nvmrc or the engines field in custom-ui/package.json
• Package Manager: Yarn v1

Contributions

Contributions to Mermaid Diagrams Viewer are welcome! Please see CONTRIBUTING.md for details.

License

Copyright (c) 2024 Atlassian US., Inc. Apache 2.0 licensed, see LICENSE file.