Add sentence about live Mermaid editor to README, try to fix Mermaid …

…styling Signed-off-by: Diana <[email protected]>
kumahq · Dec 7, 2023 · 93f4b6c · 93f4b6c
1 parent b864d75
commit 93f4b6c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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;