Big documentation rewrite, move docs to example site

2026-05-16 23:04:27 +02:00
parent bcce6e25c3
commit c59c9192a8
54 changed files with 1219 additions and 3162 deletions
@@ -1,186 +1,69 @@
-# Mermaid Chart
+# Mermaid

-[MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text.
+Render diagrams and charts with [Mermaid](https://mermaid.js.org/). The library is loaded automatically on first use.

-{{% hint info %}}
-**Override Mermaid initialization config**  
-To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid,
-create a `mermaid.json` file in your `assets` folder!
-{{% /hint %}}
+> [!TIP]
+> Override Mermaid initialization by creating `assets/mermaid.json` in your project.

-## Example
+## Syntax
+
+Use fenced code blocks (recommended) or the shortcode
+
+````tpl
+```mermaid
+graph LR
+    A --> B
+```
+````
+
+```tpl
+{{</* mermaid [class="..."] */>}}
+graph LR
+    A --> B
+{{</* /mermaid */>}}
+```
+
+## Examples

 {{% columns %}}
- ````tpl
-  ```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
-  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.
-  ```
-{{% /columns %}}
-
-{{% columns %}}
- ```tpl
-  {{</* mermaid [class="..."] >}}
-  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 */>}}
+  flowchart TD
+      A[Content Files] --> B[Hugo Build]
+      B --> C[HTML Output]
+      B --> D[Search Index]
+      B --> E[RSS Feed]
+  ```
+
+  ```mermaid
+  sequenceDiagram
+      Browser->>Hugo: Request page
+      Hugo->>Theme: Apply template
+      Theme->>Browser: Rendered HTML
+      Browser->>Browser: Load shortcodes
+  ```
+
+- ```mermaid
+  pie title Theme Assets
+      "SCSS" : 8
+      "HTML Templates" : 30
+      "JavaScript" : 3
+      "i18n Files" : 35
+  ```
+
+  ```mermaid
+  gitGraph
+     commit id: "init"
+     commit id: "add theme"
+     branch feature
+     checkout feature
+     commit id: "add docs"
+     commit id: "add config"
+     checkout main
+     merge feature
+     commit id: "deploy"
  ```

- {{< 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 >}}
 {{% /columns %}}

-## Diagrams
-Explore more diagrams and syntax on Mermaid [documentation page](https://mermaid.js.org/syntax/flowchart.html).
-
-{{% columns %}}
-
-```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
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice-)John: See you later!
-```
-
-```mermaid
---
-title: Animal example
---
-classDiagram
-    note "From Duck till Zebra"
-    Animal <|-- Duck
-    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
-    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
---
-title: Simple sample
---
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-
-<--->
-
-```mermaid
---
-title: Example Git diagram
---
-gitGraph
-   commit
-   commit
-   branch develop
-   checkout develop
-   commit
-   commit
-   checkout main
-   merge develop
-   commit
-   commit
-```
-
-```mermaid
-gantt
-    title A Gantt Diagram
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d
-```
-
-```mermaid
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-```
-
-```mermaid
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-```
-
-{{% /columns %}}
+Explore more diagram types on the [Mermaid documentation](https://mermaid.js.org/syntax/flowchart.html).