final small fixes

exampleSite/content/samples/diagrams-flowcharts.md

@@ -14,6 +14,7 @@ The examples below are a small selection taken from the [official Mermaid docs](
 
 ## Flowchart
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -30,9 +31,11 @@ F
 G
 end
 {{< /mermaid >}}
+</div>
 
 ## Sequence diagram
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -50,9 +53,11 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
+</div>
 
 ## Class diagram
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -76,9 +81,11 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
+</div>
 
 ## Entity relationship diagram
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 erDiagram
 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -90,3 +97,5 @@ ORDER ||--|{ ORDER-ITEM : includes
 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 {{< /mermaid >}}
+</div>
+