Added ability to use a local server

README.md

@@ -1,9 +1,10 @@
 [[:gift_heart: Sponsor this project on Github](https://github.com/sponsors/hkgnp) or [:coffee: Get me a coffee](https://www.buymeacoffee.com/hkgnp.dev) if you like this plugin!
 
-> Warning ⚠: This plugin uploads your diagrams to an external service for rendering. Do not use this plugin if you are not comfortable with this. 
+> Important! ⚠: This plugin will send your mermaid code to an [ external server ](https://mermaid.ink) **if** you do not set up your own local mermaid.ink server. Instructions for setting up your own local mermaid.ink server can be found below.
+
 # Overviewr
 
-This simple plugin allows you to quickly insert mermaid diagrams in your notes.
+This simple plugin allows you to quickly insert mermaid diagrams in your notes, using either an external server or you have the option of setting up your own local one.
 
 ![](/screenshots/demo.gif)
 
@@ -33,24 +34,6 @@ or
 
 Define in your plugin settings file. This will apply to **all** mermaid diagrams that you render.
 
-```
-%%{init: {'theme': 'dark'}}%%
-flowchart LR
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Three| E[Result 2]
-```
-
-```
-%%{init: {'theme': 'dark'}}%%
-flowchart LR
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Three| E[Result 2]
-```
-
 ```
 {
     "config": {
@@ -69,6 +52,15 @@ or
 }
 ```
 
+# Using with your own local mermaid.ink server
+
+1. Go to your terminal and navigate to where you would like to save the server files to, e.g. `cd ~/My\ Documents`
+2. Enter `git clone https://github.com/jihchi/mermaid.ink && cd mermaid.ink && npm i && npm start` (This assumes that you already have NodeJS installed).
+3. By default, your local mermaid.ink server will be running on port `3000`. This can be changed if you know what you are doing.
+4. In Logseq, go to your plugin settings, and enter `3000`. Close the settings box.
+   ![](/screenshots/mermaid-settings.png)
+5. Proceed to draw your mermaid diagrams as per the [instructions above](https://github.com/hkgnp/logseq-mermaid-plugin#usage), and the images will be generated locally.
+
 # Credits
 
 [mermaid.ink](https://github.com/jihchi/mermaid.ink)

package.json

@@ -5,7 +5,7 @@
     "icon": "./icon.svg"
   },
   "name": "logseq-mermaid-plugin",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "",
   "main": "dist/index.html",
   "targets": {
@@ -19,11 +19,11 @@
   "author": "hkgnp",
   "license": "MIT",
   "dependencies": {
-    "@logseq/libs": "^0.0.1-alpha.34",
+    "@logseq/libs": "^0.0.1-alpha.35",
-    "buffer": "^6.0.3",
     "js-base64": "^3.7.2"
   },
   "devDependencies": {
+    "buffer": "^6.0.3",
     "parcel": "^2.2.0"
   }
 }

src/callSettings.ts

@@ -0,0 +1,16 @@
+import { SettingSchemaDesc } from "@logseq/libs/dist/LSPlugin";
+
+export const callSettings = () => {
+  const settings: SettingSchemaDesc[] = [
+    {
+      key: "port",
+      type: "number",
+      default: "",
+      description:
+        "If you are using a local mermaid.ink server, indicate the port number that mermaid.ink is running on. If you want to use https://mermaid.ink, then leave this field blank.",
+      title: "Port number",
+    },
+  ];
+
+  logseq.useSettingsSchema(settings);
+};

src/convert.ts

@@ -1,6 +1,12 @@
-import { toBase64 } from 'js-base64';
+import { BlockUUID } from "@logseq/libs/dist/LSPlugin.user";
+import { toBase64 } from "js-base64";
 
-export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
+export const renderMermaid = async (
+  type: string,
+  payload: { uuid: string },
+  colour: string,
+  mermaidUUID: BlockUUID
+) => {
   await logseq.Editor.editBlock(payload.uuid);
   await logseq.Editor.exitEditingMode();
 
@@ -14,9 +20,9 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
     toDecode = toDecode.slice(0, 10) + initStr + toDecode.slice(10);
   }
 
-  toDecode = toDecode.replace('```mermaid', '').replace('```', '');
+  toDecode = toDecode.replace("```mermaid", "").replace("```", "");
 
-  toDecode = toDecode.replace('\n', ' ');
+  toDecode = toDecode.replace("\n", " ");
 
   const jsonString = toBase64(toDecode, true);
 
@@ -29,40 +35,61 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => {
   };
 
   const handleEvent = async () => {
+    const handlePort = () => {
+      const { port } = logseq.settings;
+      if (port) {
+        return `http://localhost:${port}`;
+      } else {
+        return `https://mermaid.ink`;
+      }
+    };
+
     if (logseq.settings.config) {
       const { colour } = logseq.settings.config;
-
+      // If mermaid config exists
-      if (colour.startsWith('#')) {
+      if (colour.startsWith("#")) {
+        // If colour is a hexadecimal colour
         renderBlock(
-          `<img src="https://mermaid.ink/img/${jsonString}?bgColor=${colour.substring(
+          `<img src="${handlePort()}/img/${jsonString}?bgColor=${colour.substring(
             1
           )}" />`
         );
-      } else if (!logseq.settings.colour.startsWith('#')) {
+      } else if (!colour.startsWith("#")) {
+        // If colour is a plain colour description, e.g. blue
         renderBlock(
-          `<img src="https://mermaid.ink/img/${jsonString}?bgColor=!${colour}" />`
+          `<img src="${handlePort()}/img/${jsonString}?bgColor=!${colour}" />`
-        );
-      }
-    } else if (colour === undefined) {
-      renderBlock(`<img src="https://mermaid.ink/img/${jsonString}" />`);
-    } else if (colour.startsWith('#')) {
-      renderBlock(
-        `<img src="https://mermaid.ink/img/${jsonString}?bgColor=${colour.substring(
-          1
-        )}" />`
-      );
-    } else if (!colour.startsWith('#')) {
-      renderBlock(
-        `<img src="https://mermaid.ink/img/${jsonString}?bgColor=!${colour}" />`
         );
       } else {
-      renderBlock(`<img src="https://mermaid.ink/img/${jsonString}" />`);
+        // If error in config
+        renderBlock(`<img src="${handlePort()}/img/${jsonString}" />`);
+      }
+    } else if (colour) {
+      // If it is a local change of colour
+      if (colour.startsWith("#")) {
+        // If colour is a hexadecimal colour
+        renderBlock(
+          `<img src="${handlePort()}/img/${jsonString}?bgColor=${colour.substring(
+            1
+          )}" />`
+        );
+      } else if (!colour.startsWith("#")) {
+        // If colour is a plain colour description, e.g. blue
+        renderBlock(
+          `<img src="${handlePort()}/img/${jsonString}?bgColor=!${colour}" />`
+        );
+      } else {
+        // If error in config
+        renderBlock(`<img src="${handlePort()}/img/${jsonString}" />`);
+      }
+    } else {
+      // If mermaid config does not exist
+      renderBlock(`<img src="${handlePort()}/img/${jsonString}" />`);
     }
   };
 
   const handleError = () => {
     renderBlock(
-      '<p>There is an error with your mermaid syntax. Please rectify and render again.</p>'
+      "<p>There is an error with your mermaid syntax. Please rectify and render again.</p>"
     );
   };
 

src/index.ts

@@ -1,15 +1,18 @@
-import '@logseq/libs';
+import "@logseq/libs";
-import { renderMermaid } from './convert';
+import { callSettings } from "./callSettings";
+import { renderMermaid } from "./convert";
 
 const uniqueIdentifier = () =>
   Math.random()
     .toString(36)
-    .replace(/[^a-z]+/g, '');
+    .replace(/[^a-z]+/g, "");
 
 const main = () => {
-  console.log('logseq-mermaid-plugin loaded');
+  console.log("logseq-mermaid-plugin loaded");
 
-  logseq.Editor.registerSlashCommand('Draw mermaid diagram', async () => {
+  callSettings();
+
+  logseq.Editor.registerSlashCommand("Draw mermaid diagram", async () => {
     await logseq.Editor.insertAtEditingCursor(
       `{{renderer :mermaid_${uniqueIdentifier()}}}`
     );
@@ -29,16 +32,16 @@ const main = () => {
 
   logseq.App.onMacroRendererSlotted(async ({ slot, payload }) => {
     const [type, colour] = payload.arguments;
-    const id = type.split('_')[1]?.trim();
+    const id = type.split("_")[1]?.trim();
     const mermaidId = `mermaid_${id}`;
 
-    if (!type.startsWith(':mermaid_')) return;
+    if (!type.startsWith(":mermaid_")) return;
 
     const dataBlock = await logseq.Editor.getBlock(payload.uuid, {
       includeChildren: true,
     });
 
-    const mermaidUUID = dataBlock.children[0]['uuid'];
+    const mermaidUUID = dataBlock.children[0]["uuid"];
 
     logseq.provideModel({
       async show() {