> For the complete documentation index, see [llms.txt](https://docs.labii.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.labii.com/widgets/dashboard-widgets/diagram/flowchart/mermaid.md).

# Mermaid

## Specs

| Label                     | Value                         |
| ------------------------- | ----------------------------- |
| **Version**               | 0.1.0 (updated on 2023-07-24) |
| **Developer**             | Labii Inc.                    |
| **Type**                  | Dashboard                     |
| **Support Configuration** | Yes                           |

## Overview

The Mermaid dashboard widget allows users to create and display interactive flowcharts and diagrams on Labii dashboards. The flowchart editor is based on [Mermaid](https://mermaid.js.org/#/), a JavaScript library that creates diagrams and flowcharts from simple text syntax. This widget helps individuals and teams visualize complex processes, workflows, and relationships in a clear and organized dashboard format.

## Use Cases

* **Workflow visualization**: Display process maps and workflow diagrams on team dashboards.
* **Project planning**: Show project steps, dependencies, and decision points in a visual format.
* **Decision support**: Present branching logic, approvals, and outcomes for operational workflows.
* **Training dashboards**: Explain procedures and concepts through readable diagrams.
* **Cross-team communication**: Share visual process context with users who need a quick dashboard overview.

## Configuration

### Initial Setup

{% stepper %}
{% step %}
Navigate to the dashboard where you want to display the diagram.
{% endstep %}

{% step %}
Click **Add Widget** and select **Mermaid** from the dashboard widget catalog.
{% endstep %}

{% step %}
Enter Mermaid syntax that defines the diagram structure, nodes, and connections.
{% endstep %}

{% step %}
Review the rendered diagram and adjust the syntax or styling options as needed.
{% endstep %}

{% step %}
Click **Save** to publish the Mermaid diagram to the dashboard.
{% endstep %}
{% endstepper %}

### Required Settings

* **Mermaid syntax**: The text definition used to generate the diagram or flowchart.

### Optional Settings

* **Styling options**: Customize font styles, colors, and shapes when supported by the diagram syntax.
* **Images and hyperlinks**: Add visual or interactive context to diagram elements when supported.
* **Layout placement**: Resize and position the widget so the diagram remains readable on the dashboard.

{% hint style="info" %}
For record-level diagrams inside sections, use the [Section Widget Mermaid](/widgets/section-widgets/diagram/mermaid.md).
{% endhint %}

## Readonly View

Dashboard widgets are designed for quick visibility and interaction in dashboard context.

### Display Features

* **Rendered diagram**: Converts Mermaid text syntax into a visual flowchart or diagram.
* **Customizable visuals**: Supports styling options such as colors, fonts, and shapes.
* **Dashboard context**: Keeps process diagrams visible beside related dashboard widgets.
* **Interactive elements**: Supports hyperlinks and other interactive diagram elements when configured.

### Interactive Features

* **Review diagrams**: Users can view the rendered diagram from the dashboard.
* **Open links**: Users can follow hyperlinks included in diagram elements.
* **Edit syntax**: Authorized users can update the Mermaid syntax from the widget configuration or edit controls.

## Best Practices

* Keep dashboard diagrams focused so users can understand them quickly.
* Use descriptive node labels for workflow steps, decisions, and outcomes.
* Place the Mermaid widget near related report, project, or workflow widgets.
* Test Mermaid syntax before publishing complex diagrams to shared dashboards.
* Use links sparingly so interactive elements support the workflow rather than distracting from it.