nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

docs: add sankey example

Browse source
This commit is contained in:
Marcel Beck 2023-07-28 20:01:40 +02:00
parent 88d03d4fc6
commit f0d7a38552
1 changed files with 159 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

294
exampleSite/content/shortcodes/mermaid.en.md
View file

@ -7,8 +7,8 @@ The `mermaid` shortcode generates diagrams and flowcharts from text, in a simila
{{< mermaid align="center">}} {{< mermaid align="center">}}
graph LR; graph LR;
If --> Then If --> Then
Then --> Else Then --> Else
{{< /mermaid >}} {{< /mermaid >}}
{{% notice note %}} {{% notice note %}}
@ -43,18 +43,18 @@ graph LR;
{{% /tab %}} {{% /tab %}}
{{% tab title="shortcode" %}} {{% tab title="shortcode" %}}
````go ```go
{{</* mermaid align="center" zoom="true" */>}} {{</* mermaid align="center" zoom="true" */>}}
graph LR; graph LR;
If --> Then If --> Then
Then --> Else Then --> Else
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{% /tab %}} {{% /tab %}}
{{% tab title="partial" %}} {{% tab title="partial" %}}
````go ```go
{{ partial "shortcodes/mermaid.html" (dict {{ partial "shortcodes/mermaid.html" (dict
"page" . "page" .
"content" "graph LR;\nIf --> Then\nThen --> Else" "content" "graph LR;\nIf --> Then\nThen --> Else"
@ -62,7 +62,7 @@ graph LR;
"zoom" "true" "zoom" "true"
)}} )}}
```` ```
{{% /tab %}} {{% /tab %}}
{{< /tabs >}} {{< /tabs >}}
@ -71,11 +71,11 @@ The generated graphs can be be panned by dragging them and zoomed by using the m
### Parameter ### Parameter
| Name | Default | Notes | | Name | Default | Notes |
|-----------------------|------------------|-------------| | --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **align** | `center` | Allowed values are `left`, `center` or `right`. | | **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 | | **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 |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Your Mermaid graph. | | _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Your Mermaid graph. |
## Configuration ## Configuration
@ -93,7 +93,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
### Global Configuration File ### Global Configuration File
````toml ```toml
[params] [params]
mermaidInitialize = "{ \"theme\": \"dark\" }" mermaidInitialize = "{ \"theme\": \"dark\" }"
mermaidZoom = true 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 # 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 # mandatory setting for your site if you want to use Mermaid codefences
guessSyntax = false guessSyntax = false
```` ```
### Page's Frontmatter ### Page's Frontmatter
````toml ```toml
+++ +++
mermaidInitialize = "{ \"theme\": \"dark\" }" mermaidInitialize = "{ \"theme\": \"dark\" }"
mermaidZoom = true mermaidZoom = true
+++ +++
```` ```
## Examples ## Examples
### Flowchart with YAML-Title ### Flowchart with YAML-Title
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
--- ---
title: Example Diagram title: Example Diagram
@ -130,22 +130,22 @@ graph LR;
C -->|One| D[Result one] C -->|One| D[Result one]
C -->|Two| E[Result two] C -->|Two| E[Result two]
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
## {{< mermaid >}}
## title: Example Diagram
{{< mermaid >}}
---
title: Example Diagram
---
graph LR; graph LR;
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>} B --> C{<strong>Decision</strong>}
C -->|One| D[Result one] C -->|One| D[Result one]
C -->|Two| E[Result two] C -->|Two| E[Result two]
{{< /mermaid >}} {{< /mermaid >}}
### Sequence Diagram with Configuration Directive ### Sequence Diagram with Configuration Directive
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%% %%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
sequenceDiagram sequenceDiagram
@ -158,19 +158,19 @@ sequenceDiagram
John->>Bob: How about you? John->>Bob: How about you?
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%% %%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
sequenceDiagram sequenceDiagram
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
loop Healthcheck loop Healthcheck
John->>John: Fight against hypochondria John->>John: Fight against hypochondria
end end
Note right of John: Rational thoughts! Note right of John: Rational thoughts!
John-->>Alice: Great! John-->>Alice: Great!
John->>Bob: How about you? John->>Bob: How about you?
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
{{< /mermaid >}} {{< /mermaid >}}
### Class Diagram with Codefence Syntax ### Class Diagram with Codefence Syntax
@ -201,7 +201,7 @@ classDiagram
``` ```
```` ````
````mermaid ```mermaid
classDiagram classDiagram
Animal <|-- Duck Animal <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@ -223,11 +223,11 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
```` ```
### State Diagram Aligned to the Right ### State Diagram Aligned to the Right
````go ```go
{{</* mermaid align="right" */>}} {{</* mermaid align="right" */>}}
stateDiagram-v2 stateDiagram-v2
open: Open Door open: Open Door
@ -238,22 +238,22 @@ stateDiagram-v2
locked --> closed: Unlock locked --> closed: Unlock
closed --> open: Open closed --> open: Open
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid align="right" >}} {{< mermaid align="right" >}}
stateDiagram-v2 stateDiagram-v2
open: Open Door open: Open Door
closed: Closed Door closed: Closed Door
locked: Locked Door locked: Locked Door
open --> closed: Close open --> closed: Close
closed --> locked: Lock closed --> locked: Lock
locked --> closed: Unlock locked --> closed: Unlock
closed --> open: Open closed --> open: Open
{{< /mermaid >}} {{< /mermaid >}}
### Entity Relationship Model with Non-Default Mermaid Theme ### Entity Relationship Model with Non-Default Mermaid Theme
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
%%{init:{"theme":"forest"}}%% %%{init:{"theme":"forest"}}%%
erDiagram erDiagram
@ -266,24 +266,24 @@ erDiagram
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
%%{init:{"theme":"forest"}}%% %%{init:{"theme":"forest"}}%%
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for" CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
{{< /mermaid >}} {{< /mermaid >}}
### User Journey ### User Journey
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
journey journey
title My working day title My working day
@ -295,23 +295,23 @@ journey
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 3: Me Sit down: 3: Me
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
journey journey
title My working day title My working day
section Go to work section Go to work
Make tea: 5: Me Make tea: 5: Me
Go upstairs: 3: Me Go upstairs: 3: Me
Do work: 1: Me, Cat Do work: 1: Me, Cat
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 3: Me Sit down: 3: Me
{{< /mermaid >}} {{< /mermaid >}}
### GANTT Chart ### GANTT Chart
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@ -329,47 +329,47 @@ gantt
Create tests for renderer :2d Create tests for renderer :2d
Add to Mermaid :1d Add to Mermaid :1d
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to Mermaid title Adding GANTT diagram functionality to Mermaid
section A section section A section
Completed task :done, des1, 2014-01-06,2014-01-08 Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d Future task2 : des4, after des3, 5d
section Critical tasks section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d Future task in critical line :crit, 5d
Create tests for renderer :2d Create tests for renderer :2d
Add to Mermaid :1d Add to Mermaid :1d
{{< /mermaid >}} {{< /mermaid >}}
### Pie Chart without Zoom ### Pie Chart without Zoom
````go ```go
{{</* mermaid zoom="false" */>}} {{</* mermaid zoom="false" */>}}
pie title Pets adopted by volunteers pie title Pets adopted by volunteers
"Dogs" : 386 "Dogs" : 386
"Cats" : 85 "Cats" : 85
"Rats" : 15 "Rats" : 15
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid zoom="false" >}} {{< mermaid zoom="false" >}}
pie title Pets adopted by volunteers pie title Pets adopted by volunteers
"Dogs" : 386 "Dogs" : 386
"Cats" : 85 "Cats" : 85
"Rats" : 15 "Rats" : 15
{{< /mermaid >}} {{< /mermaid >}}
### Requirement Diagram ### Requirement Diagram
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
requirementDiagram requirementDiagram
@ -386,10 +386,10 @@ pie title Pets adopted by volunteers
test_entity - satisfies -> test_req test_entity - satisfies -> test_req
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
id: 1 id: 1
@ -403,11 +403,12 @@ pie title Pets adopted by volunteers
} }
test_entity - satisfies -> test_req test_entity - satisfies -> test_req
{{< /mermaid >}} {{< /mermaid >}}
### Git Graph ### Git Graph
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
gitGraph gitGraph
commit commit
@ -421,25 +422,25 @@ gitGraph
commit commit
commit commit
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
gitGraph gitGraph
commit commit
commit commit
branch develop branch develop
checkout develop checkout develop
commit commit
commit commit
checkout main checkout main
merge develop merge develop
commit commit
commit commit
{{< /mermaid >}} {{< /mermaid >}}
### C4 Diagrams ### C4 Diagrams
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
C4Context C4Context
title System Context diagram for Internet Banking System title System Context diagram for Internet Banking System
@ -484,15 +485,15 @@ C4Context
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
C4Context C4Context
title System Context diagram for Internet Banking System title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") { Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B") Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc") Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.") Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
@ -529,11 +530,12 @@ C4Context
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
{{< /mermaid >}} {{< /mermaid >}}
### Mindmaps ### Mindmaps
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
mindmap mindmap
root((mindmap)) root((mindmap))
@ -553,31 +555,31 @@ mindmap
Pen and paper Pen and paper
Mermaid Mermaid
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
mindmap mindmap
root((mindmap)) root((mindmap))
Origins Origins
Long history Long history
::icon(fa fa-book) ::icon(fa fa-book)
Popularisation Popularisation
British popular psychology author Tony Buzan British popular psychology author Tony Buzan
Research Research
On effectiveness<br/>and features On effectiveness<br/>and features
On Automatic creation On Automatic creation
Uses Uses
Creative techniques Creative techniques
Strategic planning Strategic planning
Argument mapping Argument mapping
Tools Tools
Pen and paper Pen and paper
Mermaid Mermaid
{{< /mermaid >}} {{< /mermaid >}}
### Timeline ### Timeline
````go ```go
{{</* mermaid */>}} {{</* mermaid */>}}
timeline timeline
title History of Social Media Platform title History of Social Media Platform
@ -587,14 +589,36 @@ timeline
2005 : Youtube 2005 : Youtube
2006 : Twitter 2006 : Twitter
{{</* /mermaid */>}} {{</* /mermaid */>}}
```` ```
{{< mermaid >}} {{< mermaid >}}
timeline timeline
title History of Social Media Platform title History of Social Media Platform
2002 : LinkedIn 2002 : LinkedIn
2004 : Facebook 2004 : Facebook
: Google : Google
2005 : Youtube 2005 : Youtube
2006 : Twitter 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 >}} {{< /mermaid >}}