From 7416ec9eb0e4b24f4bb60308888765e784c705fd Mon Sep 17 00:00:00 2001
From: weru <fromweru@gmail.com>
Date: Thu, 15 Apr 2021 14:36:18 +0000
Subject: [PATCH] add examples
---
exampleSite/content/docs/compose/shortcodes.md | 236 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 235 insertions(+), 1 deletions(-)
diff --git a/exampleSite/content/docs/compose/shortcodes.md b/exampleSite/content/docs/compose/shortcodes.md
index 8e0fcbe..58b2421 100644
--- a/exampleSite/content/docs/compose/shortcodes.md
+++ b/exampleSite/content/docs/compose/shortcodes.md
@@ -161,4 +161,238 @@
{{< tip "warning" >}}
Something of **interest** the user should be careful about
-{{< /tip >}}
\ No newline at end of file
+{{< /tip >}}
+
+### Mermaid
+
+[Mermaid](https://mermaidjs.github.io/) is library that helps you generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown.
+
+With compose theme, you can use mermaid using this shortcode as follows:
+
+**Syntax**
+
+```tpl
+{{</* 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 */>}}
+```
+
+**Result**
+
+{{< 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 >}}
+
+{{< mermaid >}}
+flowchart TB
+ c1-->a2
+ subgraph one
+ a1-->a2
+ end
+ subgraph two
+ b1-->b2
+ end
+ subgraph three
+ c1-->c2
+ end
+ one --> two
+ three --> two
+ two --> c2
+{{< /mermaid >}}
+
+{{< mermaid >}}
+graph LR;
+ A-->B;
+ B-->C;
+ C-->D;
+ D-->E;
+ click A "http://www.github.com" _blank
+ click B "http://www.github.com" "Open this in a new tab" _blank
+ click C href "http://www.github.com" _blank
+ click D href "http://www.github.com" "Open this in a new tab" _blank
+{{< /mermaid >}}
+
+{{< mermaid >}}
+graph TB
+ sq[Square shape] --> ci((Circle shape))
+
+ subgraph A
+ od>Odd shape]-- Two line<br/>edge comment --> ro
+ di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
+ di==>ro2(Rounded square shape)
+ end
+
+ %% Notice that no text in shape are added here instead that is appended further down
+ e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+ %% Comments after double percent signs
+ e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+ cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+ classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+ classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+ class sq,e green
+ class di orange
+{{< /mermaid >}}
+
+{{< mermaid >}}
+graph TD
+ B["fa:fa-twitter for peace"]
+ B-->C[fa:fa-ban forbidden]
+ B-->D(fa:fa-spinner);
+ B-->E(A fa:fa-camera-retro perhaps?);
+{{< /mermaid >}}
+
+{{< 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 >}}
+
+{{< 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 >}}
+
+{{< mermaid >}}
+stateDiagram-v2
+ [*] --> Still
+ Still --> [*]
+
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+{{< /mermaid >}}
+
+{{< mermaid >}}
+stateDiagram-v2
+ [*] --> Active
+
+ state Active {
+ [*] --> NumLockOff
+ NumLockOff --> NumLockOn : EvNumLockPressed
+ NumLockOn --> NumLockOff : EvNumLockPressed
+ --
+ [*] --> CapsLockOff
+ CapsLockOff --> CapsLockOn : EvCapsLockPressed
+ CapsLockOn --> CapsLockOff : EvCapsLockPressed
+ --
+ [*] --> ScrollLockOff
+ ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+ ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+ }
+{{< /mermaid >}}
+
+{{< mermaid >}}
+stateDiagram-v2
+ State1: The state with a note
+ note right of State1
+ Important information! You can write
+ notes.
+ end note
+ State1 --> State2
+ note left of State2 : This is the note to the left.
+{{< /mermaid >}}
+
+{{< mermaid >}}
+erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+{{< /mermaid >}}
+
+{{< 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 >}}
+
+{{< mermaid >}}
+gantt
+ dateFormat YYYY-MM-DD
+ title Adding GANTT diagram functionality to mermaid
+ excludes weekends
+ %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+ 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
+
+ section Documentation
+ Describe gantt syntax :active, a1, after des1, 3d
+ Add gantt diagram to demo page :after a1 , 20h
+ Add another diagram to demo page :doc1, after a1 , 48h
+
+ section Last section
+ Describe gantt syntax :after doc1, 3d
+ Add gantt diagram to demo page :20h
+ Add another diagram to demo page :48h
+{{< /mermaid >}}
+
+{{< mermaid >}}
+pie
+ title Key elements in Product X
+ "Calcium" : 42.96
+ "Potassium" : 50.05
+ "Magnesium" : 10.01
+ "Iron" : 5
+{{< /mermaid >}}
\ No newline at end of file
--
Gitblit v1.10.0