---
title: "A Mermaid diagram viewer in Slack: interactive HTML, not just a PNG"
slug: "mermaid-diagram-viewer-slack"
description: "View Mermaid diagrams in Slack with pan, zoom, source and history: Arialine posts every diagram as a PNG and an interactive HTML viewer file."
author: "Andrii"
published_at: "2026-09-24T00:00:00.000Z"
updated_at: "2026-09-24T00:00:00.000Z"
---

# A Mermaid diagram viewer in Slack: interactive HTML, not just a PNG

A 40-node flowchart squeezed into a Slack thumbnail is not a diagram anyone can review. You need to zoom, pan and check the source.

> **Direct answer:** Arialine turns Mermaid into two files in Slack: a PNG preview for quick scanning and a self-contained **interactive HTML viewer**. Open the HTML file in any browser to pan and zoom, read the Mermaid source, step through earlier versions and see why each change was made. No login is needed to open it.

## What the viewer shows

- **The diagram**, rendered from the stored Mermaid, with pan, zoom and fit-to-screen.
- **Source**, ready to copy.
- **History**: every version of the board, with author, date and change summary.
- **Decisions**: the Slack messages behind each change (they open in Slack for people who have access).

## How to get it

1. Type `/arialine` and paste Mermaid, or share a `.mmd` file, or mention `@arialine`.
2. Arialine posts the board with the PNG and the `.html` file.
3. Click the HTML file, download it or share it outside Slack; it works offline.

Every new version gets a fresh viewer file, and the board message always carries the latest one.

## Also available

- Export `.mmd`, PNG or SVG from the board's **Export** menu.
- Create a PDF report of one or up to ten versions.
- Put the diagram on a Slack Canvas with **Place on canvas**.

See [interactive HTML diagrams in Slack](/use-cases/interactive-html-diagrams-in-slack) for a demo, or [how to create Mermaid diagrams in Slack](/blog/how-to-create-mermaid-diagrams-in-slack) to start.