Mermaid Preview

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

sequenceDiagram
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