Skip to main content

Mermaid Diagram

info

Mermaid Diagrams are not included in the official plugin because of the mermaid+d3 library size increase.

You can download the signed CI artifact with Mermaid to use.

Mermaid is a popular JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically and is a perfect companion for the Dynamic Text Panel.

Mermaid diagrams displayed using the Dynamic Text panel.
Mermaid diagrams displayed using the Dynamic Text panel.

Example​

The markdown can include data from the Data Source styled using CSS Editor.

flowchart LR
  A[Hard] -->|Text| B(Round)
  B --> C{Decision}
  C -->|One| D[Result 1]
  C -->|Two| E[Result 2]