Mermaid | Labii Documentation (original) (raw)

For the complete documentation index, see llms.txt. This page is also available as Markdown.

  1. Widgets
  2. Section Widgets
  3. Diagram

Mermaid

Create interactive diagrams and flowcharts using text-based Mermaid syntax for visualizing laboratory workflows, processes, and experimental designs

The Mermaid section widget enables laboratory professionals to create and embed interactive diagrams directly within Labii records using text-based syntax. Built on the powerful Mermaid JavaScript library, this widget transforms simple text descriptions into professional-quality diagrams, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and more. The widget is particularly valuable for documenting experimental workflows, process flows, project timelines, and system architectures without requiring specialized diagramming software. With integrated AI assistance, users can generate complex diagrams from natural language descriptions, making diagram creation accessible to both technical and non-technical laboratory staff.

The read-only view displays the rendered diagram in its final visual form. Users can view the complete diagram with all formatting, colors, and styling applied according to the selected theme. The diagram is fully interactive, allowing users to zoom and pan when viewing complex or large diagrams. Any hyperlinks embedded within diagram elements are clickable, enabling navigation to related documentation or external resources. The view automatically scales diagrams to fit within the section container while maintaining aspect ratio and clarity.

The edit view provides a split-screen interface with a text editor on the left and a live preview pane on the right. As users type or modify the Mermaid syntax, the preview updates in real-time, allowing immediate visualization of changes. The text editor includes syntax highlighting for Mermaid code, making it easier to identify diagram elements, relationships, and formatting directives.

Key features of the edit interface include:

The editor supports all standard text editing operations including copy, paste, undo, and redo, making it easy to iterate on diagram designs and incorporate feedback.

The Mermaid widget requires minimal configuration to use. Most users can start creating diagrams immediately after adding the widget to a section.

Adding the Mermaid Widget

Navigate to the record where you want to add a diagram and click Add Section

Select Mermaid from the section widget options

Click Edit to open the diagram editor and begin creating your diagram

In the edit view, enter your Mermaid syntax in the text editor. For a simple flowchart:

Select your preferred theme from the theme dropdown:

Click Submit to save the diagram. The rendered diagram will display in read-only view

Using AI Assistant to Generate Diagrams

Click the AI Assistant button in the diagram editor

Describe your desired diagram in natural language. Example: "Create a flowchart showing a protein purification workflow with centrifugation, column chromatography, and quality control steps"

Press Enter to submit your prompt

Review the AI-generated Mermaid code in the preview pane. The AI will create syntactically correct Mermaid code based on your description

Choose your insertion method:

Refine the generated code as needed and select your preferred theme

Click Submit to save the completed diagram

The AI Assistant is particularly helpful for users unfamiliar with Mermaid syntax or when creating complex diagrams quickly. You can always edit the AI-generated code to customize the diagram further.

The Mermaid widget supports all diagram types available in the Mermaid library:

Standard directed graph diagrams for representing processes, decisions, and workflows. Supports multiple orientations (top-down, left-right, bottom-up) and various node shapes (rectangles, rounded rectangles, circles, diamonds, hexagons).

Documentation: https://mermaid-js.github.io/mermaid/#/flowchart

Interaction diagrams showing how processes, systems, or objects communicate with one another and in what order. Ideal for documenting system integrations, API interactions, and multi-step automated workflows.

Documentation: https://mermaid-js.github.io/mermaid/#/sequenceDiagram

Object-oriented modeling diagrams showing system structure, class relationships, and data models. Useful for documenting software architecture, database schemas, and data relationship models.

Documentation: https://mermaid-js.github.io/mermaid/#/classDiagram

Diagrams describing system behavior through finite states and transitions. Excellent for documenting equipment states, sample lifecycle stages, and process control logic.

Documentation: https://mermaid-js.github.io/mermaid/#/stateDiagram

Project schedule visualizations showing task timelines, dependencies, and milestones. Essential for research project planning, resource allocation, and deadline tracking.

Documentation: https://mermaid-js.github.io/mermaid/#/gantt

Circular statistical graphics displaying numerical proportions. Useful for visualizing resource allocation, sample composition, or categorical data distributions.

Documentation: https://mermaid-js.github.io/mermaid/#/pie

Additional diagram types including entity relationship diagrams, user journey maps, and Git graphs are also supported. Check the Mermaid documentation for the complete list of available diagram types.

Official Mermaid Resources

Last updated 5 months ago

graph TD
    A[Start] --> B[Process Sample]
    B --> C{Quality Check}
    C -->|Pass| D[Continue Analysis]
    C -->|Fail| E[Reprocess]
    E --> B