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]
273 questions
4
votes
1 answer
Mermaid Gantt exclude weekends from Axis
How do I exclude weekends in the visual output? (see circled area below).
I would like to exclude weekends both in counting and visually. Is there a way to do that?
Here is my code,
gantt
title blabla
dateFormat YYYY-DD-MM
axisFormat…
klaushipp
- 75
- 6
4
votes
1 answer
Is there a way to put URLs in the same document using Mermaid Markdown flowchart?
I'm using Mermaid Markdown to draw flowcharts for my projects, then export the generated pages as PDF to make them viewable for external people.
On this link, I have seen that it was possible to put URL like this :
graph LR;
A-->B;
click A…
Hoshimon
- 43
- 6
4
votes
2 answers
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 very long rectangle slightly more "square". I am…
LucasMation
- 2,408
- 2
- 22
- 45
4
votes
1 answer
Using DiagrammeR to place one rows of nodes below another
Given the following flow chart derived via DiagrammeR package:
DiagrammeR::DiagrammeR(diagram =
"
graph LR;
A[Start]-->B;
B --> C;
C…
Konrad
- 17,740
- 16
- 106
- 167
4
votes
3 answers
Marked ( Markdown ) + Mermaid ( Flow Chart & Diagrams )
Struggling to get
Mermaid - https://github.com/knsv/mermaid
to work with
Marked - https://github.com/chjj/marked
From what I gather I should be able to write the following in markdown
```
graph TD;A-->B;A-->C;B-->D;C-->D;
```
and have it…
Andrew Vink
- 321
- 1
- 4
- 7
3
votes
0 answers
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 elements are located so close to each that…
Boris Faniuk
- 31
- 1
3
votes
1 answer
Mermaid js flow chart - Full list of available options to style a node
Is there some documentation of the full list of options available in the mermaid statements documents here: https://mermaid.js.org/syntax/flowchart.html#styling-a-node and https://mermaid.js.org/syntax/flowchart.html#styling-and-classes ?
The…
NULL pointer
- 1,116
- 1
- 14
- 27
3
votes
0 answers
Markdown syntax differences to start a mermaid block
It seems to me that git and off-line markdown editors support a quote-syntax to mark a Mermaid block.
``` markdown
```
It appears that Azure devops went their own way and mark the block with a colon syntax.
::: markdown
CppDev
- 49
- 5
3
votes
1 answer
Mermaid diagram in Quarto/Rmarkdown: narrow and blurry
I'm trying to generate a quarto document in pdf (and word later). I'm meeting an issue with the mermaid graph.
Please find bellow a sample .qmd file to illustrate the issue.
So first it's supposed to support the {mermaid} tag but when i do that, I…
Will
- 910
- 7
- 17
3
votes
2 answers
static image of targets workflow, programatically
I'm trying to embed a static image of a targets workflow in an rmarkdown document. I tried to do this by using tar_mermaid, defining a target that writes the workflow in mermaid format mm <- tar_mermaid(); writeLines(mm, "target_mermaid.js") but the…
Ben Bolker
- 211,554
- 25
- 370
- 453
3
votes
2 answers
Event on node not calling the function when using the render function
I'm trying to render dynamic charts and therefore need to use the mermaid.render function. But using click does not work when the code isn't entered in a static way as you can see in the snippet bellow:
eriv
- 133
- 3
3
votes
0 answers
Is there a way to produce a diagram like this in mermaid?
Is there a way to make a diagram like below in Mermaid?
I have bumped into 2 problems in an attempt to do so in mermaid.
How to make a node where two sub-nodes are attached together side by side?
If using subgraph for each node of a sub-node pair,…
Smart Humanism
- 155
- 1
- 6
3
votes
1 answer
How to make node go to bottom with Mermaid FlowChart
I'm drawing a flowchart with Mermaid but it isn't working the way I want.
Here is my code:
flowchart TD
a0[["xml_parsing"]]
a1{{"result = []"}}
a2{"any elements in collection?"}
a3{{"container = next element"}}
a4{{"name = text…
d2h10s
- 33
- 4
3
votes
1 answer
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
description2:Some properties of B
I know Mermaid can…
yode
- 483
- 7
- 16
3
votes
1 answer
how to change the color of arrows in marmaid.js
here is an example of my md file
%%{init: {'securityLevel': 'loose', 'theme': 'base', 'themeVariables': { 'darkMode': false, 'primaryColor': '#ffaacc', 'fontSize': '14px', 'lineColoe': '#0404ff', 'edgeLabelBackground':'#ffffaa'}}}%%
graph LR
…
dongrixinyu
- 172
- 2
- 14