Stack Overflow
Stack Overflow

Questions tagged [mermaid]

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.

273 questions
9
votes
2 answers

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 in the block. I want to be able to change the…
Boris
  • 351
  • 1
  • 3
  • 11
9
votes
3 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
2 answers

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 -.-> mmm But actually I want the node ccc and node ddd to be aligned…
yode
  • 483
  • 7
  • 16
8
votes
0 answers

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 to ask on SO. The class diagrams I am trying to…
Jeff
  • 3,829
  • 1
  • 31
  • 49
8
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
  • 1,005
  • 17
  • 42
7
votes
0 answers

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 system allows you to specify a custom theme inline…
Orion Edwards
  • 121,657
  • 64
  • 239
  • 328
7
votes
1 answer

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 Rider?
eddex
  • 1,622
  • 1
  • 15
  • 37
6
votes
0 answers

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. Unfortunately, the result, in a Jupyter Notebook file,…
dudung
  • 499
  • 2
  • 17
6
votes
1 answer

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 there is any configuration which can allow to accept…
Rajnikant
  • 2,176
  • 24
  • 23
6
votes
2 answers

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 truncated as showed in follow: ```mermaid graph…
Shore
  • 827
  • 9
  • 24
6
votes
1 answer

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 task :done, des1,…
pgcudahy
  • 1,542
  • 13
  • 36
6
votes
0 answers

How to save DiagrammeR Gantt graph as svg file

I would like to know how to save a Gantt diagram that was generated with the mermaid function of DiagrammeR as an SVG file. Take as example the following Gantt diagram from this post: Gantt charts with…
Yatrosin
  • 341
  • 2
  • 15
6
votes
1 answer

Mermaid Gantt chart not showing up in R markdown tab

I was hoping for input on embedding Gantt charts into an R markdown file. I'm using the Mermaid function in the DiagrammeR package to make Gantt charts. I'd like to have the different plots separated into tabs in the markdown file. However, the…
AlexP
  • 577
  • 1
  • 4
  • 15
5
votes
2 answers

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 looks like the below and the styles are becoming…
Pez Cuckow
  • 14,048
  • 16
  • 80
  • 130
5
votes
3 answers

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
  • 7,327
  • 12
  • 56
  • 99
1 2
3
…
18 19