Mermaid diagram viewer for Slack: zoom, source and history

A Mermaid diagram viewer turns Mermaid text into a rendered diagram. Some viewers are source editors with a preview; others show a shared diagram or a static image. If the diagram is already in Slack, first decide whether the reader needs a quick picture or the source and context behind a change.

Direct answer: For a one-off preview of Mermaid code, paste it into the Mermaid Live Editor; it shows the render beside the code and exports PNG, SVG or Markdown. To inspect a diagram maintained in a Slack conversation, Arialine defaults to posting both a PNG and a self-contained interactive HTML snapshot. A channel can choose both, PNG or HTML for new versions with /arialine files both|png|html. The HTML viewer supports pan and zoom and includes Mermaid source, version history and decision context. It opens without an Arialine sign-in and works offline, but it is a snapshot: open the newest attachment to see the latest board version.

Choose a viewer based on the reader's task

Reader needs to…	Use	What it provides
Scan a diagram in the Slack conversation	A PNG preview	Quick to read in the message. A PNG does not provide editable Mermaid source or a history panel. The Mermaid Preview Slack listing describes a /mermaid command that uploads a rendered PNG.
Inspect a diagram that changes through Slack discussion	The board's HTML viewer	Pan and zoom, copyable source, retained version entries and links to recorded decisions. Each attached HTML file is a snapshot, not a live web view.
Check or edit Mermaid source outside the Slack board	Mermaid Live Editor	A code pane and immediate preview; export PNG, SVG or Markdown. Its editor history is stored in that browser and only the last 30 edits are viewable, according to Mermaid's guide.
Share a hosted view-only diagram	Mermaid Chart	A share link can be view-only; viewers need no Mermaid account when access is set to “Anyone with the link.” Private diagrams require sign-in and access, as Mermaid Chart's sharing guide explains.

“Viewer” can describe an image, a preview inside an editor or a hosted link. They do not keep the same context. Use the Slack PNG when the team needs to glance at a flow; use the HTML file when someone needs to inspect its source and change history; use a source editor when the code itself needs editing.

Inspect a Mermaid diagram from Slack

Start with a concrete review question, such as “Does a payment timeout go back through authorization, or go straight to fulfillment?” The answer should be visible in the arrows and labels, not inferred from where boxes happen to sit.

This small flow shows the path to check:

flowchart LR
  Checkout --> Authorize
  Authorize -->|approved| Fulfill
  Authorize -->|timeout| RetryQueue
  RetryQueue --> Authorize

A useful review is more than opening the largest image:

1. Scan the PNG to understand the overall route and identify the branch in question.
2. Open the HTML attachment from the board message. In Slack, shared files remain accessible from the conversation's Files & links tab; see Slack's file guide.
3. Pan and zoom until labels and arrow directions are readable. Reset the view if you lose your place.
4. Open Source and compare the exact node names, edge labels and Mermaid relationships. The viewer lets you inspect and copy the source; make a change in the board thread or a Mermaid editor.
5. Check History and Decisions for the version's change summary and available source links. Follow a Slack link only if you have access to that conversation.
6. Verify an important claim against its owner—for example, the service contract, code or an accepted design decision. A rendered diagram can show what its source says; it cannot prove that the source describes production accurately.

Arialine renders valid pasted Mermaid without an AI generation, so the source is not rewritten just to make the picture; see the Slack workflow guide. That is useful for inspecting code someone already authored. It is not a correctness check: valid syntax can still describe the wrong system.

What the HTML viewer includes

With the default both setting, the board message carries a channel PNG and an interactive HTML file. Its Source panel lets a reader inspect and copy Mermaid; it does not edit the shared board in place. History shows the recorded version authors, dates and change summaries. Decisions shows available rationale and source excerpts, with links back to Slack when the reader has access.

The file is self-contained: its Mermaid renderer and interaction code are included in the HTML, so the diagram can still be opened offline. Slack permalinks work only online and only for readers who have access to the linked conversation.

Workspace owners and admins can turn off saving for valid Mermaid pasted or attached and rendered as written with /arialine privacy save off. That one-off render creates no board or history. AI-created diagrams, a paste that includes an edit instruction, and edits to existing boards remain saved; existing boards keep working. See Arialine’s privacy policy for the workspace setting and its data-handling details.

Treat the HTML as an export

The HTML viewer can travel outside the Slack conversation, which is useful when a reviewer needs an offline copy. It also means the file carries information with it. Depending on the board, that includes the Mermaid source, version summaries and recorded decision or source excerpts. Someone who receives the file can read those embedded fields without access to the linked Slack thread; the links themselves do not bypass Slack permissions.

Before forwarding the file, review the diagram and its history for material that should stay inside the workspace. If you share it as a Slack file, Slack documents file sharing and external-link controls, including plan and permission limits, in its file-sharing instructions. A downloaded copy is a separate artifact, so use your organization's normal handling rules for exported architecture information.

The viewer is also not a live link to the board. A new board version updates the current artifacts on the root message. A previously downloaded HTML file does not refresh; reopen the latest file from the board's root message. For a repeatable history report, use diagram export options.

When a viewer is not enough

Pan and zoom solve a legibility problem, not a structure problem. If one diagram combines deployment, request flow and data ownership, readers may still struggle to answer one question. Split it into focused views when needed; this guide to keeping complex Mermaid diagrams readable explains how to choose the boundary.

Rendering can also differ across tools. If a diagram fails in one viewer, check the exact error, the Mermaid syntax and whether that renderer supports the diagram type. Compare the same source in the Mermaid Live Editor, then follow the steps in Mermaid troubleshooting for Slack. A successful render only confirms that a renderer accepted the syntax; it does not confirm that the diagram is current or semantically correct.

Arialine's Mermaid source modal in Slack, with the board's copyable source.

For the complete interactive HTML workflow in Slack, see the product walkthrough. If you only need a rendered image, compare the Mermaid Preview alternative.