mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
docs: add sankey example
This commit is contained in:
Marcel Beck
parent
88d03d4fc6
commit
f0d7a38552
1 changed files with 159 additions and 135 deletions
|
|
@ -43,18 +43,18 @@ graph LR;
|
|||
{{% /tab %}}
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid align="center" zoom="true" */>}}
|
||||
graph LR;
|
||||
If --> Then
|
||||
Then --> Else
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="partial" %}}
|
||||
|
||||
````go
|
||||
```go
|
||||
{{ partial "shortcodes/mermaid.html" (dict
|
||||
"page" .
|
||||
"content" "graph LR;\nIf --> Then\nThen --> Else"
|
||||
|
|
@ -62,7 +62,7 @@ graph LR;
|
|||
"zoom" "true"
|
||||
)}}
|
||||
|
||||
````
|
||||
```
|
||||
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
|
@ -72,7 +72,7 @@ The generated graphs can be be panned by dragging them and zoomed by using the m
|
|||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|-----------------------|------------------|-------------|
|
||||
| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **align** | `center` | Allowed values are `left`, `center` or `right`. |
|
||||
| **zoom** | see notes | Whether the graph is pan- and zoomable.<br><br>If not set the value is determined by the `mermaidZoom` setting of the [site](#global-configuration-file) or the [pages frontmatter](#pages-frontmatter) or `false` if not set at all.<br><br>- `false`: no pan or zoom<br>- `true`: pan and zoom active |
|
||||
| _**<content>**_ | _<empty>_ | Your Mermaid graph. |
|
||||
|
|
@ -93,7 +93,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
|
|||
|
||||
### Global Configuration File
|
||||
|
||||
````toml
|
||||
```toml
|
||||
[params]
|
||||
mermaidInitialize = "{ \"theme\": \"dark\" }"
|
||||
mermaidZoom = true
|
||||
|
|
@ -104,22 +104,22 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
|
|||
# was given BUT Mermaid and Math codefences will not work anymore! So this is a
|
||||
# mandatory setting for your site if you want to use Mermaid codefences
|
||||
guessSyntax = false
|
||||
````
|
||||
```
|
||||
|
||||
### Page's Frontmatter
|
||||
|
||||
````toml
|
||||
```toml
|
||||
+++
|
||||
mermaidInitialize = "{ \"theme\": \"dark\" }"
|
||||
mermaidZoom = true
|
||||
+++
|
||||
````
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Flowchart with YAML-Title
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
---
|
||||
title: Example Diagram
|
||||
|
|
@ -130,12 +130,12 @@ graph LR;
|
|||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
## {{< mermaid >}}
|
||||
|
||||
## title: Example Diagram
|
||||
|
||||
{{< mermaid >}}
|
||||
---
|
||||
title: Example Diagram
|
||||
---
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{<strong>Decision</strong>}
|
||||
|
|
@ -145,7 +145,7 @@ graph LR;
|
|||
|
||||
### Sequence Diagram with Configuration Directive
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
|
||||
sequenceDiagram
|
||||
|
|
@ -158,7 +158,7 @@ sequenceDiagram
|
|||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
|
||||
|
|
@ -201,7 +201,7 @@ classDiagram
|
|||
```
|
||||
````
|
||||
|
||||
````mermaid
|
||||
```mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
|
|
@ -223,11 +223,11 @@ classDiagram
|
|||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
````
|
||||
```
|
||||
|
||||
### State Diagram Aligned to the Right
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid align="right" */>}}
|
||||
stateDiagram-v2
|
||||
open: Open Door
|
||||
|
|
@ -238,7 +238,7 @@ stateDiagram-v2
|
|||
locked --> closed: Unlock
|
||||
closed --> open: Open
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid align="right" >}}
|
||||
stateDiagram-v2
|
||||
|
|
@ -253,7 +253,7 @@ stateDiagram-v2
|
|||
|
||||
### Entity Relationship Model with Non-Default Mermaid Theme
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
%%{init:{"theme":"forest"}}%%
|
||||
erDiagram
|
||||
|
|
@ -266,7 +266,7 @@ erDiagram
|
|||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
%%{init:{"theme":"forest"}}%%
|
||||
|
|
@ -283,7 +283,7 @@ erDiagram
|
|||
|
||||
### User Journey
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
journey
|
||||
title My working day
|
||||
|
|
@ -295,7 +295,7 @@ journey
|
|||
Go downstairs: 5: Me
|
||||
Sit down: 3: Me
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
journey
|
||||
|
|
@ -311,7 +311,7 @@ journey
|
|||
|
||||
### GANTT Chart
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
|
|
@ -329,7 +329,7 @@ gantt
|
|||
Create tests for renderer :2d
|
||||
Add to Mermaid :1d
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
gantt
|
||||
|
|
@ -351,14 +351,14 @@ gantt
|
|||
|
||||
### Pie Chart without Zoom
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid zoom="false" */>}}
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid zoom="false" >}}
|
||||
pie title Pets adopted by volunteers
|
||||
|
|
@ -369,7 +369,7 @@ pie title Pets adopted by volunteers
|
|||
|
||||
### Requirement Diagram
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
requirementDiagram
|
||||
|
||||
|
|
@ -386,7 +386,7 @@ pie title Pets adopted by volunteers
|
|||
|
||||
test_entity - satisfies -> test_req
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
requirementDiagram
|
||||
|
|
@ -403,11 +403,12 @@ pie title Pets adopted by volunteers
|
|||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Git Graph
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
gitGraph
|
||||
commit
|
||||
|
|
@ -421,7 +422,7 @@ gitGraph
|
|||
commit
|
||||
commit
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
gitGraph
|
||||
|
|
@ -439,7 +440,7 @@ gitGraph
|
|||
|
||||
### C4 Diagrams
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
|
|
@ -484,7 +485,7 @@ C4Context
|
|||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
C4Context
|
||||
|
|
@ -529,11 +530,12 @@ C4Context
|
|||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Mindmaps
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
mindmap
|
||||
root((mindmap))
|
||||
|
|
@ -553,7 +555,7 @@ mindmap
|
|||
Pen and paper
|
||||
Mermaid
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
mindmap
|
||||
|
|
@ -577,7 +579,7 @@ mindmap
|
|||
|
||||
### Timeline
|
||||
|
||||
````go
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
|
|
@ -587,7 +589,7 @@ timeline
|
|||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
timeline
|
||||
|
|
@ -598,3 +600,25 @@ timeline
|
|||
2005 : Youtube
|
||||
2006 : Twitter
|
||||
{{< /mermaid >}}
|
||||
|
||||
### Sankey
|
||||
|
||||
```go
|
||||
{{</* mermaid */>}}
|
||||
sankey-beta
|
||||
|
||||
%% source,target,value
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
sankey-beta
|
||||
|
||||
%% source,target,value
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
{{< /mermaid >}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue