Mermaid is a markup language for generating diagrams and flowcharts.
Mermaid allows for generation of diagrams and flowcharts from text in a similar manner as markdown.
You can check its Usage, Flowchart syntax and Sequence diagram syntax.
Questions tagged [mermaid]
118 questions
28
votes
0 answers
DiagrammeR mermaid: inconsistent results in rmarkdown ioslides
I have a rmarkdown presentation (ioslides) with 3 slides with flow diagrams worked in DiagrammeR's mermaid. The following file saved as .Rmd can reproduce the example (at least in my machine, hopefully yours too):
---
title: "Untitled"
author:…
PavoDive
- 5,293
- 20
- 50
21
votes
1 answer
Mermaid diagram line break
I cannot find how to insert a line break in long titles inside nodes. For example:
library(DiagrammeR)
mermaid("
graph TB
A[GE Solution]-->C{ }
B[GA Solution]-->C{ }
C{ }-->D[Stir 10 mins at 500 r/min]
D[Stir 10 mins at 500…
Scientist
- 457
- 8
- 22
20
votes
2 answers
Mermaid CLI - how do you escape characters?
I'm using the Mermaid CLI to generate a flowchart (http://knsv.github.io/mermaid/flowchart.html). It works great, but I can't figure out how to get special characters (percent signs, parenthesis, etc) working as text within a node.
For illustration…
Mark Madej
- 1,386
- 10
- 17
15
votes
4 answers
How to install Mermaid to render flowcharts in markdown?
I'm trying to render a flowchart in a markdown file using Mermaid. I have a ReadMe.md file in my GitHub repository, and I'd like to include a basic flowchart to help describe the contents. But I can't figure out how to get it to work. Would…
AlexP
- 473
- 1
- 4
- 13
13
votes
6 answers
Change Mermaid theme in markdown
I use mermaid for basic diagram rendering within my markdown documentation aside my code. I found this online editor useful to edit this while having a preview. This proposes to change theme (default and forest works).
How can I set theme when I…
RandomCoder
- 4,726
- 5
- 17
- 26
13
votes
1 answer
How can I have more than 4 section colours in mermaid (Gantt) via DiagrammeR?
I will have to generate a gantt diagram in a daily basis. My idea is to use the mermaid api included in R's DiagrammeR package.
My data will always have the same structure and, therefore, I have created a quite primitive parser that is included in…
Jon Nagra
- 1,361
- 1
- 12
- 31
9
votes
2 answers
Detect light/dark theme programmatically in Visual Studio Code
I'm developing a Visual Studio Code extension that enables previewing mermaid diagrams:
The extension uses a default stylesheet that works fine if using the light theme. However, if the user has switched Visual Studio Code to use the dark theme,…
Vlad Stirbu
- 1,732
- 2
- 16
- 27
8
votes
5 answers
How to make GitHub Pages Markdown support mermaid diagram?
I am hoping to use mermaid in GitHub-pages, with simple commit and push.
In other words, I am hoping to wirte in my markdown file like this
```mermaid
graph LR
A --> B
A -->C
C -->D
```
and add some js on my _layouts/post.html to somehow…
water liu
- 334
- 3
- 10
7
votes
1 answer
Spaces in Mermaid
I have a .md file saved and I am viewing it using Atom and the Mermaid Preview package. I am going off the example on their GitHub page:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
That renders fine, but how do I add spaces the text? For…
Matt
- 639
- 1
- 7
- 16
7
votes
1 answer
Fusing arrows sideways in mermaid diagrams
How can I add laterally fused arrows in a R sequential mermaid diagram?
In the the example below:
library(DiagrammeR)
mermaid("
graph TB
A[GE Solution]-->C{1:1}
B[GA Solution]-->C{1:1}
C{1:1}-->D[Stir 10 mins at 500 r/min]
D[Stir 10…
Scientist
- 457
- 8
- 22
7
votes
2 answers
How to add a link in a mermaid node description?
I would like, to the graph below,
…
WoJ
- 19,312
- 30
- 122
- 230
6
votes
1 answer
mermaid diagrams: Adjust white space around graph
I'm using mermaid diagrams in my Rmd reports compiled with Rstudio. In the HTML/PDF output, there is a lot of blank space above and below the charts, see example below.
# Header
Text
```{r}
library(DiagrammeR)
mermaid("
graph TD
classDef…
mavericks
- 478
- 6
- 18
6
votes
0 answers
How to change label width in mermaid Gantt chart
I'm trying to use DiagrammeR to create a Gantt chart, as per this answer.
But if the section names are too long they spill into the chart. Here's an example.
library(DiagrammeR)
mermaid("
gantt
dateFormat YYYY-MM-DD
title Project timeline
…
dww
- 25,233
- 5
- 47
- 85
6
votes
2 answers
Mermaid - How to connect subgraphs in markdown?
I'm using mermaid in markdown.I can't figure out how to connect subgraphs.
Given the program below, I need to be able to connect one and two with an arrow.
- ```mermaid
graph LR;
subgraph one
main---MainMenu
…
GMHDBJD
- 89
- 1
- 8
6
votes
2 answers
Is it possible to draw arrow from node to nothing?
I'm trying to draw a simple Diagram in DiagrammeR::mermaid that should looks like:
mermaid("
graph LR
A(Sample Text)
-->A
A-->B
B-->A
B-->
")
Obviously (or not) -->A and B--> code doesn't work. It's not possible to…
TiFr3D
- 329
- 2
- 8