Added support for changing background colour

README.md

@@ -10,6 +10,22 @@ This simple plugin allows you to quickly insert mermaid diagrams in your notes.
 
 If not available in the marketplace, [download the latest release](https://github.com/hkgnp/logseq-mermaid-plugin/releases) and manually load it into Logseq after unzipping.
 
+# Usage
+
+To start, simply trigger it using `/Draw mermaid diagram`. Then add your mermaid syntax in the code block and click `Render`.
+
+## Changing background colour
+
+Same steps as above, but before clicking `Render`, include the colour inside the renderer, e.g.
+
+```
+{{renderer :mermaid_abc123, purple}}
+
+or
+
+{{renderer :mermaid_abc123, #000000}}
+```
+
 # Credits
 
 [mermaid.ink](https://github.com/jihchi/mermaid.ink)

package.json

@@ -5,7 +5,7 @@
     "icon": "./icon.svg"
   },
   "name": "logseq-mermaid-plugin",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "main": "dist/index.html",
   "targets": {

src/convert.ts

@@ -1,6 +1,8 @@
-export const convert = async (data: string) => {
+export const convert = async (data: string, colour: string) => {
   const matchData = data.match(/```mermaid(.|\n)*?```/gm);
 
+  console.log(colour);
+
   let toDecode = matchData[0];
   toDecode = toDecode.replace('```mermaid', '').replace('```', '');
   toDecode = toDecode.replace('\n', ' ');
@@ -11,7 +13,17 @@ export const convert = async (data: string) => {
   await fetch(`https://mermaid.ink/img/${jsonString}`, { method: 'GET' })
     .then((res) => {
       if (res.ok) {
-        status = `<img src="https://mermaid.ink/img/${jsonString}" />`;
+        if (colour === undefined) {
+          status = `<img src="https://mermaid.ink/img/${jsonString}" />`;
+        } else if (colour.startsWith('#')) {
+          status = `<img src="https://mermaid.ink/img/${jsonString}?bgColor=${colour.substring(
+            1
+          )}" />`;
+        } else if (!colour.startsWith('#')) {
+          status = `<img src="https://mermaid.ink/img/${jsonString}?bgColor=!${colour}" />`;
+        } else {
+          status = `<img src="https://mermaid.ink/img/${jsonString}" />`;
+        }
       } else {
         status = `<p>There is an error with your mermaid syntax. Please rectify and render again.</p>`;
       }

src/index.ts

@@ -15,6 +15,7 @@ const main = () => {
     );
 
     const currBlock = await logseq.Editor.getCurrentBlock();
+
     await logseq.Editor.insertBlock(
       currBlock.uuid,
       `\`\`\`mermaid 
@@ -27,7 +28,7 @@ const main = () => {
   });
 
   logseq.App.onMacroRendererSlotted(async ({ slot, payload }) => {
-    const [type] = payload.arguments;
+    const [type, colour] = payload.arguments;
     const id = type.split('_')[1]?.trim();
     const mermaidId = `mermaid_${id}`;
 
@@ -46,7 +47,7 @@ const main = () => {
 
         const mermaidBlock = await logseq.Editor.getBlock(mermaidUUID);
 
-        const outcomeStr = await convert(mermaidBlock.content);
+        const outcomeStr = await convert(mermaidBlock.content, colour);
 
         await logseq.Editor.updateBlock(
           payload.uuid,