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
3
votes
1 answer
Mermaid DiagrammeR journey
How can I solve this problem. I added the following line of code in my *.rmd file:
DiagrammeR::mermaid("
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go…
SebastianS
- 477
- 7
- 14
3
votes
1 answer
Installing mermaid on svelte
I'm trying to install Mermaid with Svelte to make graphs. So I did the following:
npm install mermaid
Then I get the following:
npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.
+ mermaid@8.5.2
updated 1…
Evgeniya
- 43
- 3
3
votes
1 answer
Change gitlab markdown mermaid diagram size
Is there a way to set the size of diagram (i.e. flow chart) created with mermaid in Gitlab markdown? The default is just too large!
My markdown:
graph TD;
A[User click payment] --> B(Load Payment Gateway) --> C[User pay] --> D(Redirect to…
Osh Mansor
- 1,232
- 2
- 20
- 42
3
votes
1 answer
How to get graphs to render in Mermaid + Jekyll / GitLab Pages?
I have a GitLab Pages project and trying to render graphs using Mermaid.
In the head.html I included this line ...
And then placed the mermaid.js…
Ender
- 1,652
- 2
- 25
- 50
3
votes
1 answer
How to add mermaid diagrams to a rocket.chat instance?
There is something compelling in the integration of mermaid syntax in markdown text, since it is quite "markdownish". I got the idea that I would like to type my own mermaid diagram in a rocket.chat window and see it interpreted on the fly.
I have…
fralau
- 3,279
- 3
- 28
- 41
3
votes
0 answers
Mermaid.js with Node.js - Dynamically generation
I am working with Mermaid.js to general a Class Diagram for my hobby project.
I am facing a very basic issue, which I cannot figure out how should I approach it.
Basically, I have the structure generated, but when I push it to the view, it is…
lancegoh
- 624
- 1
- 6
- 16
3
votes
0 answers
How can I underline specific text in a node of Mermaid Markdown in GitLab?
When using mermaid in a README.md in gitlab, one can create a node containing text, seperated by newlines, like this.
```mermaid
A(List
Item One
Item Two
Item Three) ``` My question is how could I underline just one section of this…
Item One
Item Two
Item Three) ``` My question is how could I underline just one section of this…
Joey Gough
- 2,753
- 2
- 21
- 42
3
votes
1 answer
With Mermaid flowchart, I want to change the size of Note
I use Vim with the mermaid flowchart plugin. The code I'm trying to fix is below.
sequenceDiagram
A ->> B: Hello!
Note right of A: AAAAAAAAAAAABBBBBBBBBBBCCCCCCCCC
The resulting flowchart is here:
If I use to align the sentence,…
Arnami_rei
- 31
- 2
3
votes
4 answers
How to replace mermaid diagrams with images, keeping them in markdown format to provide easy preview in TFS/Azure DevOps Server?
The company I work in decided to store requirements in markdown format, in order to achieve simplicity, reference-ability, and previewing in TFS/Azure DevOps Server directly. Question is in previewing part in TFS/Azure Dev Ops Server. As I've found,…
Van Ng
- 773
- 1
- 7
- 17
3
votes
1 answer
Line connection (instead of arrow) in mermaid
I'm trying to create a mermaid chart in R. The syntax seems to be quite straightforward - however I haven't found a possibility to make line connections between two shapes without an arrow head.
In this example:
mermaid("
graph LR
…
j_5chneider
- 390
- 5
- 15
3
votes
0 answers
How to require third-party js package when developing Jupyter Notebook extension
I want to write an extension of Jupyter Notebook extension for mermaid. Or more common, how to webpack an npm package to Jupyter Notebook Extension.
But when I include the mermaid package in main.js, encounter the following error:
utils.js:62 Failed…
Honghe.Wu
- 5,899
- 6
- 36
- 47
3
votes
1 answer
Is it possible to style the color of the font?
I would like to change the default black color of the font to white. I tried to add this to the styling section of my graph:
style request-rejected fill:#e74c3c,color:#FFFFFF;
The background is correctly changed to #e74c3c but the font stays black.…
WoJ
- 27,165
- 48
- 180
- 345
3
votes
3 answers
Could not find phantomjs at the specified path
I'm trying to get started with Mermaid CLI but when I try to run it against my source file it says it can't find phantomjs. (I'm running Win 7 64.)
C:\Users\Chris\Documents>mermaid test.mermaid
You had errors in your syntax. Use --help for…
Chris
- 1,313
- 2
- 13
- 26
2
votes
1 answer
Add bullet points in mermaid diagram
I would like to add bullet points like these:
This is a bullet point
in a node of a mermaid diagram. We could use a - as list, but I would like to have the bullet. Here is some reproducible code:
flowchart LR
A[Node 1] --> B[Node 2:…
Quinten
- 35,235
- 5
- 20
- 53
2
votes
1 answer
mermaid API Syntax error in graph - cytoscape.umd.js - Cannot read properties of undefined (reading 'h')
I create the syntax for a mermaid mindmap diagram from my data (from an array) using Javascript. The diagram renders beautifully in https://mermaid.live/edit.
I use the mermaid API with "await mermaid.renderAsync". (code attached).
The problem now…
Ralf Bordé
- 333
- 4
- 18