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
12
votes
1 answer

How to wrap text automatically in a Mermaid flowchart node?

Is there a way to set a max width for text within a Mermaid flowchart node, such that it automatically wraps? For example - how would I get the first graph to look like the second graph, without painstakingly inserting manual line breaks:
Jack Deeth
  • 3,062
  • 3
  • 24
  • 39
12
votes
2 answers

I am unable to add hyperlinks to a mermaid flowchart within the wiki functionality of gitlab

I want to use my flowchart as a table of contents that also represents the progression of parallel events vaguely in chronological order and their relation to one another. I know to create these charts using markdown. By adding the "click" line for…
DED
  • 391
  • 2
  • 12
12
votes
0 answers

Mermaid JS wrap links from far right to far left

Working with Mermaid js to make flowcharts and can't seem to find a way to wrap links around to a new "line" so to speak. Docs and Googling haven't gotten me anywhere. Does anyone know if it is possible to create a link to replace the red line?
Dave_750
  • 1,225
  • 1
  • 13
  • 28
12
votes
3 answers

Mermaid - How to connect subgraphs in markdown?

I'm using Mermaid in markdown. I can't figure out how to connect subgraphs. Given the program below, I need to be able to connect one and two with an arrow. - ```mermaid graph LR; subgraph one main---MainMenu …
GMHDBJD
  • 149
  • 1
  • 2
  • 9
10
votes
4 answers

How to style a Mermaid subgraph's title?

How to style the title in a Mermaid subgraph? I would like to make the font larger and add some blank space between the title and the first node beneath it. I tried adding some
's after the title but that pushed the title above the boundary of…
Tony_Henrich
  • 42,411
  • 75
  • 239
  • 374
10
votes
2 answers

How to align text in Mermaid flowchart node?

I would like to align text in a Mermaid flowchart node so the Thinkpad and iPad will line up. I tried to insert a \t before them but they just got rendered as text. flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me…
Ray Cheng
  • 12,230
  • 14
  • 74
  • 137
10
votes
6 answers

Which version of mermaid is supported in Azure DevOps Wikis

Which version of mermaid is currently supported in AzureDevOps. In the official docs it only mentions some diagrams that are supported. I was really loosing a lot of time because I was using features that are not supported by Azure DevOps. I now…
Marko
  • 929
  • 9
  • 27
10
votes
3 answers

How do you specify Mermaid configuration within Gitlab Markdown?

In Gitlab, I've been able to render an Entity Relationship Diagram with Mermaid in a Markdown file as specified here. This is the Markdown I used: ```mermaid erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER :…
John D
  • 467
  • 1
  • 5
  • 10
10
votes
2 answers

How can I change font / colors in mermaid.js Gantt

I recently discovered mermaid.js which is great to design graphs and Gantts. I'm using the live editor (https://mermaid-js.github.io/mermaid-live-editor/) and it's quite easy. But how can I simply change the text font and its size, colors of the…
Tomane
  • 373
  • 2
  • 4
  • 13
10
votes
6 answers

add boxes / containers in mermaid sequence diagram

I'm making sequence diagrams with Mermaid, and I find the loop feature very cool, drawing a labeled rectangle around a loop with this code chunk: sequenceDiagram loop Title Alice->>Bob: Hello John, how are you? Bob->>Alice:…
agenis
  • 8,069
  • 5
  • 53
  • 102
10
votes
1 answer

Mermaid change position of nodes / options Anyway to fix nodes' position

I'm trying to draw a flow chart in html. The flow must be configured as below. I've tried it in Mermaid like this
graph LR …
Juhyun Park
  • 141
  • 1
  • 12
10
votes
2 answers

How to change label width in mermaid Gantt chart

I'm trying to use DiagrammeR to create a Gantt chart, as per this answer. But if the section names are too long they spill into the chart. Here's an example. library(DiagrammeR) mermaid(" gantt dateFormat YYYY-MM-DD title Project timeline …
dww
  • 30,425
  • 5
  • 68
  • 111
10
votes
2 answers

How to embed an image in a node with "mermaid.js"

Is there any way to embed a picture with mermaid.js in a flow diagram graph node? I tried:
graph LR A() --> B
codie
  • 343
  • 4
  • 12
10
votes
1 answer

How to include DiagrammeR/mermaid flowchart in a Rmarkdown file

I have an R markdown file: --- title: "Untitled" author: "Me" output: html_document --- ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) ``` ## R Markdown This is an R Markdown document. As well as a DiagrammeR/mermaid chart: graph…
Oneira
  • 1,365
  • 1
  • 14
  • 28
9
votes
0 answers

Is there an option to include external file in Mermaid Markdown?

I would like the ability to include external .mmd file inside markdown file, but can't find any documentation on including external files. I'm using VSCode Markdown with Mermaid extension, it is working properly when the markdown embed mermaid…
Dudi Patimer
  • 181
  • 1
  • 4
1
2
3
…
18 19