ux: update for dark mode

assets/scss/common/_dark.scss

@@ -246,6 +246,11 @@ body.dark code:not(.hljs):not(.language-mermaid) {
   color: $body-color-dark;
 }
 
+body.dark .mermaid,
+body.dark pre code.language-mermaid {
+  background: $white;
+}
+
 body.dark blockquote {
   border-left: 3px solid $border-dark;
 }

content/docs/prologue/quick-start.md

@@ -19,7 +19,7 @@ function myFunction(p1, p2) {
 }
 ```
 
-## Flow
+## Flowchart
 
 ### Shortcode
 
@@ -61,7 +61,7 @@ graph TD
   C -->|Two| E[Result 2]
 ```
 
-## Sequence
+## Sequence diagram
 
 {{< mermaid >}}
 sequenceDiagram
@@ -75,22 +75,7 @@ sequenceDiagram
   Bob-->>John: Jolly good!
 {{< /mermaid >}}
 
-## Gantt
+## Class diagram
-
-{{< 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
 
 {{< mermaid >}}
 classDiagram
@@ -111,7 +96,7 @@ classDiagram
   }
 {{< /mermaid >}}
 
-## State
+## State diagram
 
 {{< mermaid >}}
 stateDiagram-v2
@@ -123,18 +108,16 @@ stateDiagram-v2
   Crash --> [*]
 {{< /mermaid >}}
 
-## Pie
+## Entity Relationship Diagram
 
 {{< mermaid >}}
-pie
+erDiagram
-  title Key elements in Product X
+  CUSTOMER ||--o{ ORDER : places
-  "Calcium" : 42.96
+  ORDER ||--|{ LINE-ITEM : contains
-  "Potassium" : 50.05
+  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-  "Magnesium" : 10.01
-  "Iron" :  5
 {{< /mermaid >}}
 
-## User Journey
+## User Journey Diagram
 
 {{< mermaid >}}
 journey
@@ -148,6 +131,52 @@ journey
     Sit down: 3: Me
 {{< /mermaid >}}
 
+## Gantt chart
+
+{{< 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 >}}
+
+## Pie chart
+
+{{< mermaid >}}
+pie
+  title Key elements in Product X
+  "Calcium" : 42.96
+  "Potassium" : 50.05
+  "Magnesium" : 10.01
+  "Iron" :  5
+{{< /mermaid >}}
+
+## Requirement Diagram
+
+```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
+
+```
+
 ## Requirements
 
 Doks uses npm to centralize dependency management, making it [easy to update]({{< relref "how-to-update" >}}) resources, build tooling, plugins, and build scripts:

layouts/shortcodes/mermaid.html

@@ -4,5 +4,5 @@
     {{ replaceRE "(```\\s+$)" "" $data -}}
   </div>
 {{ else -}}
-  {{ errorf "Set `mermaid = true` in `./config/_default/params.toml`" }}
+  {{ errorf "Failed to process mermaid shortcode(s). Set `mermaid = true` in `./config/_default/params.toml`." }}
 {{ end -}}