diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md index 15bf5fe1af..cf76806f4b 100644 --- a/exampleSite/content/shortcodes/mermaid.en.md +++ b/exampleSite/content/shortcodes/mermaid.en.md @@ -7,8 +7,8 @@ The `mermaid` shortcode generates diagrams and flowcharts from text, in a simila {{< mermaid align="center">}} graph LR; -If --> Then -Then --> Else + If --> Then + Then --> Else {{< /mermaid >}} {{% notice note %}} @@ -43,18 +43,18 @@ graph LR; {{% /tab %}} {{% tab title="shortcode" %}} -```go +````go {{}} graph LR; If --> Then Then --> Else {{}} -``` +```` {{% /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 >}} @@ -71,11 +71,11 @@ 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.

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.

- `false`: no pan or zoom
- `true`: pan and zoom active | -| _**<content>**_ | _<empty>_ | Your Mermaid graph. | +| Name | Default | Notes | +|-----------------------|------------------|-------------| +| **align** | `center` | Allowed values are `left`, `center` or `right`. | +| **zoom** | see notes | Whether the graph is pan- and zoomable.

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.

- `false`: no pan or zoom
- `true`: pan and zoom active | +| _**<content>**_ | _<empty>_ | Your Mermaid graph. | ## Configuration @@ -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 {{}} --- title: Example Diagram @@ -130,22 +130,22 @@ graph LR; C -->|One| D[Result one] C -->|Two| E[Result two] {{}} -``` - -## {{< mermaid >}} - -## title: Example Diagram +```` +{{< mermaid >}} +--- +title: Example Diagram +--- graph LR; -A[Hard edge] -->|Link text| B(Round edge) -B --> C{Decision} -C -->|One| D[Result one] -C -->|Two| E[Result two] + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] {{< /mermaid >}} ### Sequence Diagram with Configuration Directive -```go +````go {{}} %%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%% sequenceDiagram @@ -158,19 +158,19 @@ sequenceDiagram John->>Bob: How about you? Bob-->>John: Jolly good! {{}} -``` +```` {{< mermaid >}} %%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%% sequenceDiagram -Alice->>John: Hello John, how are you? -loop Healthcheck -John->>John: Fight against hypochondria -end -Note right of John: Rational thoughts! -John-->>Alice: Great! -John->>Bob: How about you? -Bob-->>John: Jolly good! + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! {{< /mermaid >}} ### Class Diagram with Codefence Syntax @@ -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 {{}} stateDiagram-v2 open: Open Door @@ -238,22 +238,22 @@ stateDiagram-v2 locked --> closed: Unlock closed --> open: Open {{}} -``` +```` {{< mermaid align="right" >}} stateDiagram-v2 -open: Open Door -closed: Closed Door -locked: Locked Door -open --> closed: Close -closed --> locked: Lock -locked --> closed: Unlock -closed --> open: Open + open: Open Door + closed: Closed Door + locked: Locked Door + open --> closed: Close + closed --> locked: Lock + locked --> closed: Unlock + closed --> open: Open {{< /mermaid >}} ### Entity Relationship Model with Non-Default Mermaid Theme -```go +````go {{}} %%{init:{"theme":"forest"}}%% erDiagram @@ -266,24 +266,24 @@ erDiagram PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in" {{}} -``` +```` {{< mermaid >}} %%{init:{"theme":"forest"}}%% erDiagram -CUSTOMER }|..|{ DELIVERY-ADDRESS : has -CUSTOMER ||--o{ ORDER : places -CUSTOMER ||--o{ INVOICE : "liable for" -DELIVERY-ADDRESS ||--o{ ORDER : receives -INVOICE ||--|{ ORDER : covers -ORDER ||--|{ ORDER-ITEM : includes -PRODUCT-CATEGORY ||--|{ PRODUCT : contains -PRODUCT ||--o{ ORDER-ITEM : "ordered in" + CUSTOMER }|..|{ DELIVERY-ADDRESS : has + CUSTOMER ||--o{ ORDER : places + CUSTOMER ||--o{ INVOICE : "liable for" + DELIVERY-ADDRESS ||--o{ ORDER : receives + INVOICE ||--|{ ORDER : covers + ORDER ||--|{ ORDER-ITEM : includes + PRODUCT-CATEGORY ||--|{ PRODUCT : contains + PRODUCT ||--o{ ORDER-ITEM : "ordered in" {{< /mermaid >}} ### User Journey -```go +````go {{}} journey title My working day @@ -295,23 +295,23 @@ journey Go downstairs: 5: Me Sit down: 3: Me {{}} -``` +```` {{< mermaid >}} 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: 3: Me + 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: 3: Me {{< /mermaid >}} ### GANTT Chart -```go +````go {{}} gantt dateFormat YYYY-MM-DD @@ -329,47 +329,47 @@ gantt Create tests for renderer :2d Add to Mermaid :1d {{}} -``` +```` {{< mermaid >}} gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram functionality to Mermaid -section A section -Completed task :done, des1, 2014-01-06,2014-01-08 -Active task :active, des2, 2014-01-09, 3d -Future task : des3, after des2, 5d -Future task2 : des4, after des3, 5d -section Critical tasks -Completed task in the critical line :crit, done, 2014-01-06,24h -Implement parser and jison :crit, done, after des1, 2d -Create tests for parser :crit, active, 3d -Future task in critical line :crit, 5d -Create tests for renderer :2d -Add to Mermaid :1d + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to Mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to Mermaid :1d {{< /mermaid >}} ### Pie Chart without Zoom -```go +````go {{}} pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 {{}} -``` +```` {{< mermaid zoom="false" >}} pie title Pets adopted by volunteers -"Dogs" : 386 -"Cats" : 85 -"Rats" : 15 + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 {{< /mermaid >}} ### Requirement Diagram -```go +````go {{}} requirementDiagram @@ -386,10 +386,10 @@ pie title Pets adopted by volunteers test_entity - satisfies -> test_req {{}} -``` +```` {{< mermaid >}} -requirementDiagram + requirementDiagram requirement test_req { id: 1 @@ -403,12 +403,11 @@ requirementDiagram } test_entity - satisfies -> test_req - {{< /mermaid >}} ### Git Graph -```go +````go {{}} gitGraph commit @@ -422,25 +421,25 @@ gitGraph commit commit {{}} -``` +```` {{< mermaid >}} gitGraph -commit -commit -branch develop -checkout develop -commit -commit -checkout main -merge develop -commit -commit + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit {{< /mermaid >}} ### C4 Diagrams -```go +````go {{}} C4Context title System Context diagram for Internet Banking System @@ -485,15 +484,15 @@ C4Context UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") {{}} -``` +```` {{< mermaid >}} C4Context -title System Context diagram for Internet Banking System -Enterprise_Boundary(b0, "BankBoundary0") { -Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") -Person(customerB, "Banking Customer B") -Person_Ext(customerC, "Banking Customer C", "desc") + title System Context diagram for Internet Banking System + Enterprise_Boundary(b0, "BankBoundary0") { + Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") + Person(customerB, "Banking Customer B") + Person_Ext(customerC, "Banking Customer C", "desc") Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") @@ -530,12 +529,11 @@ Person_Ext(customerC, "Banking Customer C", "desc") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") - {{< /mermaid >}} ### Mindmaps -```go +````go {{}} mindmap root((mindmap)) @@ -555,31 +553,31 @@ mindmap Pen and paper Mermaid {{}} -``` +```` {{< 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 + 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 {{< /mermaid >}} ### Timeline -```go +````go {{}} timeline title History of Social Media Platform @@ -589,21 +587,21 @@ timeline 2005 : Youtube 2006 : Twitter {{}} -``` +```` {{< mermaid >}} timeline -title History of Social Media Platform -2002 : LinkedIn -2004 : Facebook -: Google -2005 : Youtube -2006 : Twitter + title History of Social Media Platform + 2002 : LinkedIn + 2004 : Facebook + : Google + 2005 : Youtube + 2006 : Twitter {{< /mermaid >}} ### Sankey -```go +````go {{}} sankey-beta @@ -612,7 +610,7 @@ Electricity grid,Over generation / exports,104.453 Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 {{}} -``` +```` {{< mermaid >}} sankey-beta