Questions tagged [mermaid]
Mermaid is a markup language for generating diagrams and flowcharts.
mermaid
342
questions
81
votes
3
answers
50k
views
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{ }--&...
- 1,249
58
votes
4
answers
42k
views
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)...
- 1,882
40
votes
2
answers
1k
views
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, ...
- 6,371
32
votes
5
answers
50k
views
How to add a link in a mermaid node description?
I would like, to the graph below,
<link href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/...
- 29.1k
32
votes
2
answers
68k
views
Color Change of One Element in a Mermaid Sequence Diagram?
I'm using Mermaid to create a sequence diagram in Markdown. I'd like to highlight some of the participants and to gray some of the arrows.
How can that be done?
- 37.5k
31
votes
3
answers
50k
views
Can I control the direction of flowcharts in Mermaid?
graph LR
A-->B-->C-->D-->E-->F;
graph TD
A-->B-->C-->D-->E-->F;
I like to draw simple diagram using Mermaid. But it seems that flowcharts can only be top-to-bottom or ...
- 1,432
30
votes
7
answers
39k
views
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 ...
- 6,824
29
votes
5
answers
33k
views
How to install Mermaid to render flowcharts in markdown?
I'm trying to render a flowchart in a markdown file using Mermaid to place into a ReadMe.md file in my GitHub repository.
In this link (https://unpkg.com/[email protected]/README.md), there's an ...
- 637
21
votes
3
answers
8k
views
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}
...
- 1,249
20
votes
2
answers
19k
views
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 ...
- 1,099
19
votes
4
answers
8k
views
Draw arrow from node to nothing
I want to draw a mermaid diagram containing arrows that do not join with nodes:
graph LR
A(Sample Text)
-->A
A-->B
B-->A
B-->
-->A and B--> fails, likely ...
- 549
18
votes
9
answers
16k
views
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 -->...
- 626
18
votes
1
answer
9k
views
How to wrap text automatically in a Mermaid flowchart node?
Is there a way to set a max width for text within a Mermaid flowchart node, such that it automatically wraps?
For example - how would I get the first graph to look like the second graph, without ...
- 3,172
18
votes
2
answers
6k
views
Is it possible to style an Entity Relation Diagram with Mermaid.js like Flowcharts to indicate a difference in entities?
I can't seem to style any elements within my ERD.
Having an entity called PERSON, any of the following code results in a syntax error:
style PERSON fill:#f9f;
or
classDef className fill:#f9f;
class ...
16
votes
2
answers
2k
views
VSCode jumpiness when editing markdown and preview pane is open
This problem comes and goes, but it's been getting unbearable as times goes on.
The environment:
I am using the latest version of VSCode (1.45.1) on a mac running OSX 10.15.4. with a minimal set of ...
- 293
16
votes
0
answers
2k
views
Can I theme a mermaid diagram so it responds to dark mode?
I'm using Mermaid diagrams as part of markdown files on GitHub.
A side-effect of this is that I don't have access to javascript, which I could otherwise use to solve the problem.
The MermaidJS theme ...
- 123k
15
votes
7
answers
10k
views
Which version of mermaid is supported in Azure DevOps Wikis
Which version of mermaid is currently supported in AzureDevOps? In the official docs it only mentions some diagrams that are supported.
- 1,259
15
votes
1
answer
2k
views
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 ...
- 1,638
14
votes
5
answers
21k
views
How to style a Mermaid subgraph's title?
How to style the title in a Mermaid subgraph? I would like to make the font larger and add some blank space between the title and the first node beneath it.
I tried adding some <br/>'s after ...
- 43.5k
13
votes
3
answers
19k
views
How do you specify Mermaid configuration within Gitlab Markdown?
In Gitlab, I've been able to render an Entity Relationship Diagram with Mermaid in a Markdown file as specified here.
This is the Markdown I used:
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-...
- 508
13
votes
3
answers
13k
views
How to render a mermaid flowchart dynamically?
I am using the mermaid library to build flowcharts. The principle of its work is that inside a block there is a pseudocode - commands of a special syntax, on the basis of which the flowchart is built ...
- 441
13
votes
3
answers
30k
views
How can I change font / colors in mermaid.js Gantt
I recently discovered mermaid.js which is great to design graphs and Gantts.
I'm using the live editor (https://mermaid-js.github.io/mermaid-live-editor/) and it's quite easy.
But how can I simply ...
- 421
13
votes
2
answers
16k
views
Mermaid change position of nodes / options Anyway to fix nodes' position
I'm trying to draw a flow chart in html.
The flow must be configured as below.
I've tried it in Mermaid like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min....
- 181
13
votes
2
answers
3k
views
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
...
- 31.2k
13
votes
1
answer
9k
views
How to use Mermaid diagram in Jupyter Notebook with mermaid.ink through proxy
Prevously to use Mermaid in a Jupyter Notebook file, nb-mermaid should be installed using pip and then it called using built-in magic commands %%javascript as instructed here or using %%html.
...
- 643
12
votes
3
answers
35k
views
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 ...
- 149
12
votes
5
answers
13k
views
add boxes / containers in mermaid sequence diagram
I'm making sequence diagrams with Mermaid, and I find the loop feature very cool, drawing a labeled rectangle around a loop with this code chunk:
sequenceDiagram
loop Title
Alice->>...
- 8,287
12
votes
2
answers
6k
views
I am unable to add hyperlinks to a mermaid flowchart within the wiki functionality of gitlab
I want to use my flowchart as a table of contents that also represents the progression of parallel events vaguely in chronological order and their relation to one another.
I know to create these ...
- 405
12
votes
0
answers
875
views
Mermaid JS wrap links from far right to far left
Working with Mermaid js to make flowcharts and can't seem to find a way to wrap links around to a new "line" so to speak. Docs and Googling haven't gotten me anywhere. Does anyone know if it is ...
- 1,235
11
votes
2
answers
13k
views
How to make the specified nodes horizontally aligned in Mermaid?
This is my flowchart:
graph TB
aaa ---> bbb ---> ddd & ccc
ddd -.-> fff
ccc --->|eee| fff
fff ---> hhh & ggg & kkk
hhh --->|iii| mmm
ggg & kkk ...
- 593
11
votes
2
answers
14k
views
How to embed an image in a node with "mermaid.js"
Is there any way to embed a picture with mermaid.js in a flow diagram graph node? I tried:
<div class="mermaid">
graph LR
A(<img src="pic.svg"></img>) --> B
</div>
- 353
11
votes
3
answers
3k
views
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 ...
- 1,762
11
votes
2
answers
16k
views
How to align text in Mermaid flowchart node?
I would like to align text in a Mermaid flowchart node so the Thinkpad and iPad will line up. I tried to insert a \t before them but they just got rendered as text.
flowchart TD
A[Christmas] -->...
- 12.5k
11
votes
1
answer
8k
views
How to include DiagrammeR/mermaid flowchart in a Rmarkdown file
I have an R markdown file:
---
title: "Untitled"
author: "Me"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## R Markdown
This is an R Markdown ...
- 1,425
10
votes
2
answers
9k
views
Style Multiple Links Mermaid JS
Is there any way in Mermaid JS to name the links and avoid having to have a linkStyle for every single link in a diagram?
For example, to get the red and black lines in the below diagram, my source ...
- 14.3k
10
votes
0
answers
2k
views
Is there an option to include external file in Mermaid Markdown?
I would like the ability to include external .mmd file inside markdown file, but can't find any documentation on including external files.
I'm using VSCode Markdown with Mermaid extension, it is ...
- 191
10
votes
0
answers
4k
views
Mermaid class diagrams get wider only, ignore direction
I am having a problem using Mermaid syntax to layout class diagrams inside GitLab markdown. I have some evidence that I made a mistake in my Mermaid syntax, irrespective of GitLab. Thus, I felt it OK ...
- 4,031
8
votes
1
answer
6k
views
How to add this type of node description by Mermaid?
This is a flowchart pattern that I really like to use and I currently use drawio to draw it:
Notice that there are two kinds of descriptions in the flow chart
description1:How does A get to B
...
- 593
8
votes
3
answers
2k
views
It is possible to have sphinx MyST rendering mermaid
It is possible to make work mermaid inside \.md file with MyST md driver ?
For now the only way I found is
$ tail conf.py
extensions = [ 'recommonmark', 'sphinxcontrib.mermaid']
from recommonmark....
- 7,757
8
votes
1
answer
6k
views
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(...
- 1,105
7
votes
1
answer
2k
views
Is there a way to render markdown mermaid diagrams in JetBrains Rider?
I would like to use JetBrains Rider to edit mermaid diagrams but there doesn't seem to be a plugin for it (at least I couldn't find one). Is there any way to enable rendering of mermaid diagrams in ...
- 2,042
7
votes
1
answer
6k
views
Maximum Text Size In Diagram Exceeded
I am using mermaid 8.5.0 to generate flowchart, but getting error message Maximum Text Size In Diagram Exceeded.
Saved MD to text document and size of document is 60kb.
So wanted to find out if ...
- 2,226
7
votes
1
answer
7k
views
Global or document-wide styles in Mermaid
I have a document in which I am creating a number of flow charts which share a common legend of styles and colors for their items. For example:
graph TB
classDef client fill:#D5E8D4,stroke:#82B366,...
- 605
7
votes
2
answers
4k
views
DiagrammeR/mermaid flowchart in Rmarkdown file with output format PDF/LaTex
I would like to include a mermaid diagram in a PDF generated with R markdown.
According to this post, mermaid creates an HTML widget as output.
Unfortunately, the answer provided there for xaringan ...
- 1,105
7
votes
1
answer
4k
views
Set gantt tasks to relative dates before a deadline in mermaid
I'm using mermaid js to produce a gantt chart. In the documentation it shows how to set tasks relative to the completion of the prior task using "after x", for example:
section A section
Completed ...
- 1,581
7
votes
1
answer
865
views
mermaid c4 diagram: bad component placement
I am playing with mermaid to build C4 diagrams in GitHub.
I cannot find any good way to place elements correctly.
I have tried putting 2 elements with a relation between them (see live editor).
Both ...
- 71
6
votes
2
answers
7k
views
How to type in multiple spaces in mermaid?
I'm using VS Code to edit my markdown file, and need to make flowcharts (graph) to display workflow.
The problem is VS Code will not properly display the long text title, the last few part will be ...
- 957
6
votes
2
answers
3k
views
Change font and time aixis labels in DyagrammeR>mermaid>gantt chart
I made this gantt chart in R using diagrammer::mermaid (reproducible code below):
It is nice, but I would like to:
Increase font size (I suppose this will make each line wider, making the current ...
- 2,479
6
votes
1
answer
8k
views
Styling mermaid diagrams with DiagrammeR
I'm using the DiagrammeR package in R to render a flowchart with mermaid:
graph LR
A[text]-->B[a very, very, very, very, very, very, very, very, long text]
style A fill:red, font-size:50px
...
- 1,427
6
votes
1
answer
3k
views
Using UML in doxygen markdown page
I am using doxygen for my personal project and desire to use any type of UML language on page created by myself (markdown page). I do not mean to use it in code (it does work), but on a document ...
- 322