Have you ever wanted to include a flowchart, pie chart or other even more complex diagram in a post? With a new function I’ve just enabled you might be able to do that more easily. The function allows the Mermaid graphing language to be used in Discourse posts. As you can see from the examples below it’s possible to create some quite complex charts with just a few lines of text.
The following two links give more details on how the Mermaid language is used.
Basic overview of creating flowcharts using Mermaid (ckeditor.com)
The examples below show the text used to create the chart that follows, e.g. this text…
```mermaid height=200,auto
graph TD;
A → B;
```
…creates this chart…
graph TD;
A --> B;
```mermaid height=200,auto
pie title Weather-Watch
“Time spent looking for posts” : 85
“Time spent reading posts” : 10
“Time spent writing posts” : 5
```
pie title Weather-Watch
"Time spent looking for posts" : 85
"Time spent reading posts" : 10
"Time spent writing posts" : 5
```mermaid height=450,auto
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob–>>John: How about you John?
Bob–x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.
Bob–>Alice: Checking with John…
Alice->John: Yes… John, how are you?
```
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```mermaid height=200,auto
graph LR
A[Square Rect] – Link text → B((Circle))
A → C(Round Rect)
B → D{Rhombus}
C → D
```
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```mermaid height=400,auto
graph TB
sq[Square shape] → ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```mermaid height=550,auto
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good 
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```mermaid height=550,auto
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail…
John–>>Alice: Great!
John->>Bob: How about you?
Bob–>>John: Jolly good!
```
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```mermaid height=750,auto
sequenceDiagram
participant web as Web Browser
participant blog as Blog Service
participant account as Account Service
participant mail as Mail Service
participant db as Storage
Note over web,db: The user must be logged in to submit blog posts
web->>+account: Logs in using credentials
account->>db: Query stored accounts
db->>account: Respond with query result
alt Credentials not found
account->>web: Invalid credentials
else Credentials found
account->>-web: Successfully logged in
Note over web,db: When the user is authenticated, they can now submit new posts
web->>+blog: Submit new post
blog->>db: Store post data
par Notifications
blog--)mail: Send mail to blog subscribers
blog--)db: Store in-site notifications
and Response
blog-->>-web: Successfully posted
end
end
```
sequenceDiagram
participant web as Web Browser
participant blog as Blog Service
participant account as Account Service
participant mail as Mail Service
participant db as Storage
Note over web,db: The user must be logged in to submit blog posts
web->>+account: Logs in using credentials
account->>db: Query stored accounts
db->>account: Respond with query result
alt Credentials not found
account->>web: Invalid credentials
else Credentials found
account->>-web: Successfully logged in
Note over web,db: When the user is authenticated, they can now submit new posts
web->>+blog: Submit new post
blog->>db: Store post data
par Notifications
blog--)mail: Send mail to blog subscribers
blog--)db: Store in-site notifications
and Response
blog-->>-web: Successfully posted
end
end
```mermaid height=350,auto
gitGraph:
commit “Ashish”
branch newbranch
checkout newbranch
commit id:“1111”
commit tag:“test”
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
```
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
```mermaid height=350,auto
flowchart TD;
1–>2;
2–>3;
2–>3;
3–>4;
```
flowchart TD;
1-->2;
2-->3;
2-->3;
3-->4;
```mermaid height=350,auto
graph TD;
A–>B;
A–>C;
B–>E;
C–>E;
```
graph TD;
A-->B;
A-->C;
B-->E;
C-->E;
```mermaid height=200,auto
flowchart LR
A[Start]–>B[Do you have coffee beans?]
B–>|Yes|C[Grind the coffee beans]
B–>|No|D[Buy ground coffee beans]
C–>E[Add coffee grounds to filter]
D–>E
E–>F[Add hot water to filter]
F–>G[Enjoy!]
```
flowchart LR
A[Start]-->B[Do you have coffee beans?]
B-->|Yes|C[Grind the coffee beans]
B-->|No|D[Buy ground coffee beans]
C-->E[Add coffee grounds to filter]
D-->E
E-->F[Add hot water to filter]
F-->G[Enjoy!]
```mermaid height=400,auto
flowchart TB
a1–>c1
subgraph A
a1–>a2
end
subgraph B
b1–>b2
end
subgraph C
c1–>c2
end
```
flowchart TB
a1-->c1
subgraph A
a1-->a2
end
subgraph B
b1-->b2
end
subgraph C
c1-->c2
end
```mermaid height=750,auto
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness
and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness <br/> and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```mermaid height=500,auto
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach → High Reach
y-axis Low Engagement → High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```mermaid height=600,auto
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
End of examples