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
69
votes
2 answers

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{ }-->D[Stir 10 mins at 500 r/min] D[Stir 10 mins at 500…
Scientist
  • 1,061
  • 2
  • 13
  • 30
46
votes
4 answers

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) working as text within a node. For illustration…
Mark Madej
  • 1,752
  • 1
  • 14
  • 19
40
votes
2 answers

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, hopefully yours too): --- title: "Untitled" author:…
PavoDive
  • 6,322
  • 2
  • 29
  • 55
27
votes
7 answers

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 and forest works). How can I set theme when I…
RandomCoder
  • 6,606
  • 6
  • 22
  • 28
25
votes
4 answers

How to add a link in a mermaid node description?

I would like, to the graph below,
…
WoJ
  • 27,165
  • 48
  • 180
  • 345
24
votes
5 answers

How to install Mermaid to render flowcharts in markdown?

I'm trying to render a flowchart in a markdown file using Mermaid. I have a ReadMe.md file in my GitHub repository, and I'd like to include a basic flowchart to help describe the contents. But I can't figure out how to get it to work. Would…
AlexP
  • 577
  • 1
  • 4
  • 15
20
votes
3 answers

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?
neves
  • 33,186
  • 27
  • 159
  • 192
17
votes
2 answers

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 left-to-right. Can I have more subtle control over the direction so the…
Paw in Data
  • 1,262
  • 2
  • 14
  • 32
17
votes
2 answers

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 renders fine, but how do I add spaces the text? For…
Matt
  • 967
  • 2
  • 9
  • 23
16
votes
9 answers

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 -->D ``` and add some js on my _layouts/post.html to somehow…
wooohooo
  • 576
  • 1
  • 4
  • 15
15
votes
2 answers

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 PERSON className; or classDef default…
Rick Van Boxstael
  • 151
  • 1
  • 3
15
votes
2 answers

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} C{1:1}-->D[Stir 10 mins at 500 r/min] D[Stir 10…
Scientist
  • 1,061
  • 2
  • 13
  • 30
13
votes
2 answers

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 extensions (I have disabled everything I can),…
Edgar Brown
  • 253
  • 2
  • 11
13
votes
5 answers

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 because the arrow requires both input and output nodes. Is there a…
TiFr3D
  • 459
  • 1
  • 4
  • 11
13
votes
1 answer

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 created a quite primitive parser that is included in…
Jon Nagra
  • 1,538
  • 1
  • 16
  • 36
1
2 3
…
18 19