diff options
author | Christoph Cullmann <cullmann@kde.org> | 2022-10-21 21:01:11 +0200 |
---|---|---|
committer | Christoph Cullmann <cullmann@kde.org> | 2022-10-21 21:01:11 +0200 |
commit | 582a8a33aff644a6b07534aaf677973abc6f154c (patch) | |
tree | 069a34670b1b91041ef9f3fcb73192dd05c60963 /themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md | |
parent | 038eabdda56dbfdbbba4328ac035cc4d77e8d80d (diff) |
use different theme that is a lot slimer
Diffstat (limited to 'themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md')
-rw-r--r-- | themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md | 361 |
1 files changed, 0 insertions, 361 deletions
diff --git a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md b/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md deleted file mode 100644 index 97f66a0..0000000 --- a/themes/LoveIt/exampleSite/content/posts/theme-documentation-mermaid-shortcode/index.en.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -weight: 5 -title: "Theme Documentation - mermaid Shortcode" -date: 2020-03-03T15:29:41+08:00 -lastmod: 2020-03-03T15:29:41+08:00 -draft: false -author: "Dillon" -authorLink: "https://dillonzq.com" -description: "The mermaid shortcode supports diagrams in Hugo with Mermaid library." -images: [] -resources: -- name: "featured-image" - src: "featured-image.png" - -tags: ["shortcodes"] -categories: ["documentation"] - -hiddenFromHomePage: true ---- - -{{< version 0.2.11 changed >}} - -The `mermaid` shortcode supports diagrams in Hugo with [Mermaid](https://mermaidjs.github.io/) library. - -<!--more--> - -**Mermaid** is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown. - -Just insert your mermaid code in the `mermaid` shortcode and that’s it. - -## Flowchart {#flowchart} - -Example **flowchart** `mermaid` input: - -```markdown -{{</* mermaid */>}} -graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -{{< /mermaid >}} - -## Sequence Diagram {#sequence-diagram} - -Example **sequence diagram** `mermaid` input: - -```markdown -{{</* 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! -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< 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! -{{< /mermaid >}} - -## Gantt {#gantt} - -Example **Gantt** `mermaid` input: - -```markdown -{{</* mermaid */>}} -gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram to mermaid -excludes weekdays 2014-01-10 - -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 -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram to mermaid -excludes weekdays 2014-01-10 - -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 -{{< /mermaid >}} - -## Class Diagram {#class-diagram} - -Example **class diagram** `mermaid` input: - -```markdown -{{</* mermaid */>}} -classDiagram - Animal <|-- Duck - Animal <|-- Fish - Animal <|-- Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -classDiagram - Animal <|-- Duck - Animal <|-- Fish - Animal <|-- Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } -{{< /mermaid >}} - -## State Diagram {#state-diagram} - -Example **state diagram** `mermaid` input: - -```markdown -{{</* mermaid */>}} -stateDiagram-v2 - [*] --> Still - Still --> [*] - Still --> Moving - Moving --> Still - Moving --> Crash - Crash --> [*] -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -stateDiagram-v2 - [*] --> Still - Still --> [*] - Still --> Moving - Moving --> Still - Moving --> Crash - Crash --> [*] -{{< /mermaid >}} - -## Git Graph {#git-graph} - -Example **git graph** `mermaid` input: - -```markdown -{{</* mermaid */>}} -gitGraph - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -gitGraph - commit - commit - branch develop - checkout develop - commit - commit - checkout main - merge develop - commit - commit -{{< /mermaid >}} - -## Entity Relationship Diagram {#entity-relationship-diagram} - -Example **entity-relationship diagram** `mermaid` input: - -```markdown -{{</* mermaid */>}} -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses -{{< /mermaid >}} - -## User Journey {#user-journey} - -Example **user journey** `mermaid` input: - -```markdown -{{</* 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: 5: Me -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< 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: 5: Me -{{< /mermaid >}} - -## Pie Chart {#pie-chart} - -Example **pie chart** `mermaid` input: - -```markdown -{{</* mermaid */>}} -pie - "Dogs" : 386 - "Cats" : 85 - "Rats" : 15 -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -pie - "Dogs" : 386 - "Cats" : 85 - "Rats" : 15 -{{< /mermaid >}} - -## Requirement Diagram {#requirement-diagram} - -Example **requirement diagram** `mermaid` input: - -```markdown -{{</* mermaid */>}} -requirementDiagram - -requirement test_req { -id: 1 -text: the test text. -risk: high -verifymethod: test -} - -element test_entity { -type: simulation -} - -test_entity - satisfies -> test_req -{{</* /mermaid */>}} -``` - -The rendered output looks like this: - -{{< mermaid >}} -requirementDiagram - -requirement test_req { -id: 1 -text: the test text. -risk: high -verifymethod: test -} - -element test_entity { -type: simulation -} - -test_entity - satisfies -> test_req -{{< /mermaid >}} |