diff --git a/README.md b/README.md index 4e9332c..70b797c 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,8 @@ To start, simply trigger it using `/Draw mermaid diagram`. Then add your mermaid ## Changing background colour +### Option 1 + Same steps as above, but before clicking `Render`, include the colour inside the renderer, e.g. ``` @@ -26,6 +28,17 @@ or {{renderer :mermaid_abc123, #000000}} ``` +### Option 2 + +Define in your plugin settings file. This will apply to **all** mermaid diagrams that you render. + +``` +{ + "theme": '', + "colour": '' +} +``` + # Credits [mermaid.ink](https://github.com/jihchi/mermaid.ink) diff --git a/package.json b/package.json index 061dddc..a1fbb4a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "icon": "./icon.svg" }, "name": "logseq-mermaid-plugin", - "version": "1.0.8", + "version": "1.0.9", "description": "", "main": "dist/index.html", "targets": { diff --git a/src/convert.ts b/src/convert.ts index 70f5358..27ce045 100644 --- a/src/convert.ts +++ b/src/convert.ts @@ -6,7 +6,14 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => { const matchData = mermaidBlock.content.match(/```mermaid(.|\n)*?```/gm); let toDecode = matchData[0]; - toDecode = toDecode.replace('```mermaid', '').replace('```', ''); + if (logseq.settings) { + toDecode = toDecode.replace( + '```mermaid', + `%%{init: { 'theme': ${logseq.settings.theme} } }%%` + ); + } else { + toDecode = toDecode.replace('```mermaid', '').replace('```', ''); + } toDecode = toDecode.replace('\n', ' '); const jsonString = btoa(toDecode); @@ -20,7 +27,19 @@ export const renderMermaid = async (type, payload, colour, mermaidUUID) => { }; const handleEvent = async () => { - if (colour === undefined) { + if (logseq.settings) { + if (logseq.settings.colour.startsWith('#')) { + renderBlock( + `` + ); + } else if (!colour.startsWith('#')) { + renderBlock( + `` + ); + } + } else if (colour === undefined) { renderBlock(``); } else if (colour.startsWith('#')) { renderBlock(