Elephant provides support for charts, using wiki syntax and Mermaid.
<script type="text/javascript" src="/_internal/js/mermaid/mermaid.min.js"></script>
Notice that the mermaid macro requires the raw tag enclosing its content. Raw tag ensures the chart script isn't modified by the wiki compiler.
pie showData title Pets adopted by volunteers
"Dogs" : 386.45
"Cats" : 85.12
"Hamsters" : 15.45
@w{mermaid(style="text-align:center")}
[raw]
pie showData title Pets adopted by volunteers
"Dogs" : 386.45
"Cats" : 85.12
"Hamsters" : 15.45
[/raw]
@w{/mermaid}
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
@w{mermaid(style="text-align:center")}
[raw]
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
[/raw]
@w{/mermaid}
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
@w{mermaid(style="text-align:center")}
[raw]
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
[/raw]
@w{/mermaid}
--- title: Example Git diagram --- gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit
@w{mermaid(style="text-align:center")}
[raw]
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
[/raw]
@w{/mermaid}
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
@w{mermaid(style="text-align:center")}
[raw]
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
[/raw]
@w{/mermaid}
| English | 09/01/26 12:04 | Lluís Turró Cutiller |