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
2
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
- 21
- 2
2
votes
1 answer
Can I draw flow chart in MarkDown with in page link?
I'm on Windows 10, editing MarkDown files with VS-Code.
I would like to draw a flow chart like graph and adding in page links to nodes in the graph.
I read through the documentation of both mermaid and flowchat.js, they only provide the net link…
Shore
- 559
- 2
- 12
2
votes
1 answer
Why mermaid graph not appear in GitLab?
I create markdown text as tutorial says, bu ti is not rendered, but text is shown, what is wrong?
János
- 27,206
- 24
- 130
- 270
2
votes
2 answers
How can I prevent an Angular 8+ component from executing until an Input property is set and a ViewChild is ready
I've written an Angular component for rendering mermaid graphs using the mermaid npm package.
It works as-is (see below), but I would like to find a way of using it without the parent component needing to include an *ngIf (to prevent it trying to…
Tom Robinson
- 7,700
- 8
- 55
- 91
2
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,096
- 2
- 13
- 33
2
votes
0 answers
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
- 21
- 2
2
votes
1 answer
renderDiagrammeR mermaid diagram size in a Shiny Document
I am trying to embed the DiagrammeR example from Gantt charts with R into a Shiny document. There are two problems I am trying to solve:
1) Make the font in the textAreaInput Courier New, and preferably smaller size. (I got this solution an hour…
mysteRious
- 3,487
- 2
- 11
- 25
2
votes
0 answers
Am I able to use css (or more specifically zoom in) on mermaid flow charts in markdown somehow?
I've tried to use a div tag as so:
encompassing the mermaid chart's "```" quotes but nothing happens.
I'm essentially trying to use css on the chart based on the solution to this post…
DED
- 175
- 10
2
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
- 298
- 3
- 13
2
votes
1 answer
Exporting as image from mermaid (Gantt)
I'm having an issue trying to export the Gantt chart as a png or any other image format. The Viewer within RStudio shows me the Gantt is rendered. It also gives me the option to save as an image, but I'm finding the image is very pixelated when you…
engineerchange
- 349
- 1
- 5
- 21
2
votes
1 answer
Simple mermaid graph fails
I tried to run the example from the mermaid site (a working copy is on codepen.io):
WoJ
- 19,312
- 30
- 122
- 230
1
vote
1 answer
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.transform import AutoStructify
def setup(app):
…
user3313834
- 5,701
- 4
- 40
- 76
1
vote
1 answer
Render Laravel blade template as string without escaped chars and line breaks?
I've a pretty complicated blade layout, it's not strictly HTML as I'm using it to construct code for mermaid diagrams (https://mermaid-js.github.io/).
The code is generating fine, but when I render the blade template to a string it outputs with…
f7n
- 990
- 2
- 11
- 27
1
vote
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
- 389
- 5
- 10
1
vote
1 answer
Can I control the direction of flowcharts in Markdown (drawn with Mermaid)?
```mermaid
graph LR
A-->B-->C-->D-->E-->F;
```mermaid
graph TD
A-->B-->C-->D-->E-->F;
I like to draw simple diagram in Markdown with mermaid. But it seems that flowcharts can only be top-to-bottom or left-to-right. Can I have more subtle control…
Paw in Data
- 816
- 2
- 12