node-red-contrib-uibuilder
Version:
Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.
109 lines (100 loc) • 2.65 kB
Markdown
title: Mermaid Diagrams
description: Markweb automatically loads the Mermaid library which allows you to create various diagram types using a simple text-based syntax.
status: complete
since: "v7.7.0, 2026-05-07"
Mermaid diagrams are included in your Markdown using the following syntax:
````
```mermaid
journey
title Example User Journey - Working from Home
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
````
Though only 1 example is show above, several are included below to test out Mermaid's various diagram types and features.
Markweb uses the default "dark" theme.
See the [Mermaid documentation](https://mermaid.ai/open-source/intro/) for more details on the syntax and features available.
Mermaid diagram rendering is the exception to the Markweb rule of rendering on the Server rather than in the client browser.
This is because Mermaid uses various browser APIs not available in the Node.js environment.
If you see the raw text instead of the diagram, check the browser console for errors related to Mermaid rendering.
It is likely that the pre-built Mermaid library is not being loaded correctly, or that you have an error in your Mermaid syntax.
```mermaid
journey
title Example User Journey - Working from Home
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
```mermaid
gantt
title A Gantt Chart
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
```
```mermaid
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
```mermaid
title: Example Git Commit Chart
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```
```mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```