Mermaid

Create flowchart with mermaid

Mermaid

Mermaid is a function that enables the generation of diagrams and flowcharts from text in a similar manner as markdown.

The Mermaid widget at Labii ELN & LIMS enables you to display flowchart from mermaid text. It is an editor for creating diagrams.

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

Chart types

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

  • 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