diff --git a/WRITING-DOCUMENTATION.md b/WRITING-DOCUMENTATION.md
index b8f3bdc7a..9063c3754 100644
--- a/WRITING-DOCUMENTATION.md
+++ b/WRITING-DOCUMENTATION.md
@@ -53,6 +53,8 @@ This flowchart would render like the following in the docs:
 
 ![Mermaid flowchart example](/assets/images/diagrams/mermaid-example.png)
 
+You can use [https://mermaid.live/edit](https://mermaid.live/edit) to generate diagrams and see the rendered output before adding it to docs.
+
 **Note:** Currently, Mermaid isn't supported in navtabs.
 
 ## Cutting a new release
diff --git a/app/_assets/styles/custom/base/_type-and-content.scss b/app/_assets/styles/custom/base/_type-and-content.scss
index 2cd45b2dc..b8ec7d441 100644
--- a/app/_assets/styles/custom/base/_type-and-content.scss
+++ b/app/_assets/styles/custom/base/_type-and-content.scss
@@ -90,7 +90,11 @@ div[class*='language-'] {
   pre[class*='language-'],
   div[class*='language-'] {
     background-color: $codeBgColor;
-
+    
+    &.mermaid {
+      background-color: unset;
+    }
+    
     code {
       font-size: 0.9rem;
       line-height: 1.5;