Mermaid Preview

Free & open-source integration for Mermaid.js diagrams in Slack
"Add to Slack" button
Mermaid.js diagram and /mermaid Slack command shown

Share rendered Mermaid.js charts without leaving Slack

Communicate ideas or plans right in your Slack. Flowcharts, Pie charts, User journeys, Timelines, and everything else that Mermaid.js offers.

Use Mermaid.js code to communicate your ideas

See Mermaid.js Documentation to explore all the different chart types and options it provides. Here is an example describing this application:

Mermaid.js code sample

  actor U as Slack User
  participant S as Slack API/Client
  participant M as Mermaid Preview  

  U-->>M: Use /mermaid command
  M-->>U: Let user input Mermaid chart
  S->>U: Shows dialog in the UI
  U-->>M: Submit dialog
  Note over M: Generate Mermaid diagram preview PNG
  M->>S: Upload rendered Mermaid
  M-->>U: Create new message with rendered Mermaid

Mermaid.js chart rendered inside a Slack Application