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
5
votes
2 answers
How to adjust padding inside mermaid node?
When I create mermaid flowcharts the horizontal padding between the text and the node border is big so that the nodes look unreasonably wide. There, furthermore, is this strange empty line below the text. All in all it does not look very balanced.…
Cutú Chiqueño
- 855
- 1
- 10
- 24
5
votes
2 answers
DiagrammeR/mermaid flowchart in Rmarkdown file with output format PDF/LaTex
I would like to include a mermaid diagram in a PDF generated with R markdown.
According to this post, mermaid creates an HTML widget as output.
Unfortunately, the answer provided there for xaringan slides does not work for PDFs generated in R…
mavericks
- 1,005
- 17
- 42
5
votes
1 answer
Using UML in doxygen markdown page
I am using doxygen for my personal project and desire to use any type of UML language on page created by myself (markdown page). I do not mean to use it in code (it does work), but on a document created by myself, refer to example underneath:
#…
Black
- 312
- 2
- 15
5
votes
3 answers
Export mermaid chart from DiagrammeR
I'm attempting to export a Gantt chart from mermaid to a file through R. I'd be happy with any file format, but SVG or PNG would be preferable. I'm trying to automate this, so simply pressing export through the GUI is not an option.
Here's my…
LemenDrop
- 160
- 1
- 3
- 11
5
votes
1 answer
Angular 4 compatible with Mermaid js?
I am looking for diagram Javascript library to create some kind of top level dynamic block diagram for my angular project. Can anyone pls tell me if mermaid is compatible to work with Angular 4?
Also pls let me know if there are any other good…
Vasudev Deshpande
- 65
- 1
- 10
5
votes
1 answer
Styling mermaid diagrams with DiagrammeR
I'm using the DiagrammeR package in R to render a flowchart with mermaid:
graph LR
A[text]-->B[a very, very, very, very, very, very, very, very, long text]
style A fill:red, font-size:50px
Looking at the compiled XML, this produces:
#mermaidChart0…
user2987808
- 1,387
- 1
- 12
- 28
4
votes
1 answer
How can you generate Mermaid from plantuml?
I have to transfer plantuml diagrams to mermaid diagrams. Is there a way to somehow generate mermaid diagrams from plantuml diagrams? Thanks for answer
I've tried search it but nobody ever asked it here
Theromantus
- 41
- 1
- 3
4
votes
1 answer
I am getting this error: MermaidExtension.extendMarkdown() missing 1 required positional argument: 'md_globals'
This was working not too long ago (probably inadvertently upgraded a library somewhere.) All of my libraries are up to date.
Here is the stack trace:
File "C:\Users\jorda\Documents\projects\python\poolBoy\flaskApp.py", line 422, in about
html…
jordanthompson
- 888
- 1
- 12
- 29
4
votes
1 answer
How to add a link in mermaid websequence diagram
I have a mermaid websequence diagram snippet in jekyll blog
```mermaid
sequenceDiagram
actor User
participant ABC
User->>ABC: Hello <-- i want this to be a hyperlink to a section on the same page
i tried this, but doesn't…
Da_Vicki
- 91
- 1
- 8
4
votes
2 answers
Strange output when converting SVG to PDF javascript mermaid.js example
I'm trying to output this SVG to a pdf. The SVG is generated by mermaid.js
I found an existing answer on stack for converting SVG to PDF. This answer defined a function downloadPDF which converts SVG to PDF and triggers the PDF download.
When I run…
Frank
- 952
- 1
- 9
- 23
4
votes
1 answer
Mermaid Subgraphs Laid Out Inconsistently
I'm using Mermaid to create a flowchart with subgraphs.
This works okay, except the layout works differently than I expected.
With an LR layout, the subgraphs are laid out top-down, as are the nodes inside each subgraph:
Kevin Workman
- 41,537
- 9
- 68
- 107
4
votes
1 answer
How to stop links from covering subgraph titles with Mermaid graphs?
I'm using Mermaid in Obsidian and Wordpress. In both, the following short diagram has the connecting arrows covering the title:
Is there any way to fix this without CSS or changing to horizontal?
Ian Hyzy
- 481
- 5
- 26
4
votes
0 answers
Change mermaid theme preview on VSCode
I use mermaid for make diagrams in basic markdown documents and I want to change the default theme to the neutral theme. I use VSCode and Markdown enhanced preview extension. I tried to change the mermaid_config.js file adding "theme": "neutral".…
user13157078
- 45
- 6
4
votes
1 answer
Global or document-wide styles in Mermaid
I have a document in which I am creating a number of flow charts which share a common legend of styles and colors for their items. For example:
graph TB
classDef client fill:#D5E8D4,stroke:#82B366,color:#000000;
classDef utility…
Eric Sondergard
- 565
- 5
- 22
4
votes
3 answers
Mermaid diagram with scrollbars in Azure DevOps wiki
I am creating a big sequence diagram in Azure Devops wiki, as soon as the number of nodes and interactions increase in Mermaid diagram, it is becoming difficult to view. is there a possibility to fix the diagram size with scroll bars?
user155489
- 143
- 12