Skip to content

Mermaid

= ("[Website](" + this.url + ")") | = ("[Source](" + this.source + ")") | = ("[Documentation](" + this.docs + ")") | mermaid.live | My examples
= ("> " + this.desc-short)
Graph types

Tools🔗

  • |20mermaid-cli: Command line tool for the Mermaid library
1
mmdc -i input.md -o output.svg -t dark -b transparent

Config🔗

Examples🔗

Issues

  • connecting a node in a subgraph breaks the subgraph’s direction

Flow-Chart🔗

simple graph with internal links

graph LR

A[Biology]
B[Chemistry]

A --> B

class A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z internal-link;

different node types, subgraphs, connections and a clickable external link

graph LR
a(a) --> b[b]
subgraph sg1[" "]
  direction TB
  c((c)) --> d[[d]]
  sg1a{<a>Obsidian</a>} <--> sg1b{{DataView}}
end
a -.-> sg1
sg1 --> e[(e)]

click sg1a "obsidian://open?file=Markdown"
class sg1a external-link;

dead1(("*")) --> id1>This is the text in the box]

Sequence🔗

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Git🔗

gitGraph
  commit
  commit id: "important fix"

Integration🔗