forked from drowl87/hextra_mirror
1c7962494d
fix: hide lang switch if site is not multilingual docs: update getting started page fix: ordered list style chore: update hugo icon feat: add icon shortcode page docs: add markdown and configuration pages docs: add diagrams page docs: add more content fix: mermaid background and add image styling chore: update templates chore: update hugo stats
53 lines
1.1 KiB
Markdown
53 lines
1.1 KiB
Markdown
---
|
|
title: Diagrams
|
|
weight: 6
|
|
---
|
|
|
|
Currently, Hextra supports [Mermaid](#mermaid) for diagrams.
|
|
|
|
<!--more-->
|
|
|
|
## Mermaid
|
|
|
|
[Mermaid](https://github.com/mermaid-js/mermaid#readme) is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more.
|
|
|
|
Using Mermaid in Hextra is as simple as writing a code block with language set `mermaid`:
|
|
|
|
````markdown
|
|
```mermaid
|
|
graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;
|
|
```
|
|
````
|
|
|
|
will be rendered as:
|
|
|
|
```mermaid
|
|
graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;
|
|
```
|
|
|
|
Sequence diagram:
|
|
|
|
```mermaid
|
|
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!
|
|
```
|
|
|
|
For more information, please refer to [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/).
|