Mermaid

Create flowchart with mermaid

Overview

Labii Mermaid Widget is a tool that allows users to create and embed interactive flowcharts on Labii. This widget is designed to help individuals and teams visualize complex processes or workflows in a clear and organized manner.

The flowchart editor is based on Mermaid, a JavaScript library that enables the creation of diagrams and flowcharts from simple text. Users can easily create flowcharts by writing text in a specific syntax that defines the structure and connections of the flowchart elements. The editor provides a user-friendly interface that allows users to add, delete, move, and connect nodes and edges with ease.

The flowcharts created with the Labii Mermaid Widget can be customized with various styling options, including font styles, colors, and shapes. Users can also add images and hyperlinks to the flowchart elements to enhance the clarity and interactivity of the chart.

Overall, the Labii Mermaid Flowchart Widget is a versatile and user-friendly tool for creating interactive flowcharts that can help improve communication, organization, and productivity in various fields.

To use a Mermaid widget:

• Add a section with Mermaid widget

• Click Edit to change the diagram text. Detail of mermaid format can be found at https://mermaidjs.github.io/
• You can also select a theme of the flowchart

  • Default

  • Forest, default

  • Dark

  • Neutral

• Click Submit

• The diagram / flow will show

Generate flowchat with AI

The Labii's Mermaid widget that comes with AI function is a tool that enables users to generate flowcharts using natural language descriptions. The user can input a name of protocol, and the widget will automatically generate the corresponding diagram using the Mermaid syntax.

The AI function in the widget enables users to describe the flowchart in natural language, making it easier for users without technical knowledge to create flowcharts.

Chart types

Labii supports all chart types from mermaid, please click the link bellow to see the detail.:

• Flowchart, https://mermaid-js.github.io/mermaid/#/flowchart
• Sequence diagram. A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. https://mermaid-js.github.io/mermaid/#/sequenceDiagram
• Class diagram. The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling translating the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. https://mermaid-js.github.io/mermaid/#/classDiagram
• State diagram. A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction. https://mermaid-js.github.io/mermaid/#/stateDiagram
• Gantt diagram. A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project. https://mermaid-js.github.io/mermaid/#/gantt
• Pie chart. A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. https://mermaid-js.github.io/mermaid/#/pie

Gantt Diagram