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, 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
Navigate to the dashboard where you want to display the diagram.
Click Add Widget and select Mermaid from the dashboard widget catalog.
Enter Mermaid syntax that defines the diagram structure, nodes, and connections.
Review the rendered diagram and adjust the syntax or styling options as needed.
Click Save to publish the Mermaid diagram to the dashboard.
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.
For record-level diagrams inside sections, use the Section Widget Mermaid.
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.