Adding support for mermaid directives and themeVariables

README.md

@@ -43,6 +43,32 @@ graph TD;
 
 - `markdown-mermaid.languages` — Configures language ids for Mermaid code blocks. The default is `["mermaid"]`.
 
+- `markdown-mermaid.directives` — Configures directives and `themeVariables`. 
+(See [directives](https://mermaid.js.org/config/directives.html), [themeVariables](https://mermaid.js.org/config/theming.html)).
+Use `"debug": true` to display directives being sent to `mermaid.initialize()`.  When `themeVariables` is set, any theme is overridden with `"theme": "base"`.
+
+Example (add to `setttings.json`):
+```json
+{
+    "markdown-mermaid.directives": {
+        "sequence": {
+            "mirrorActors": false,
+        },
+        "themeVariables": {
+            "primaryColor": "#BB2528",
+            "primaryTextColor": "#fff",
+            "primaryBorderColor": "#7C0000",
+            "lineColor": "#F8B229",
+            "secondaryColor": "#006100",
+            "tertiaryColor": "#fff"
+        },
+        "debug": true,
+    }
+}
+```
+
+![A mermaid diagram with directives and themeVariables](https://github.com/frankieliu/vscode-markdown-mermaid/blob/adding-mermaid-config/docs/sequenceDiagramWithDirectives.png?raw=true)
+
 ### Using custom CSS in the Markdown Preview
 
 You can use the built-in functionality to add custom CSS. More info can be found in the [markdown.styles documentation](https://code.visualstudio.com/Docs/languages/markdown#_using-your-own-css)

src/markdownPreview/index.ts

@@ -3,21 +3,11 @@
  * 
  * This runs in the markdown preview's webview.
  */
-import mermaid, { MermaidConfig } from 'mermaid';
-import { registerMermaidAddons, renderMermaidBlocksInElement } from '../shared-mermaid';
+import mermaid from 'mermaid';
+import { loadMermaidConfig, registerMermaidAddons, renderMermaidBlocksInElement } from '../shared-mermaid';
 
 function init() { 
-    const configSpan = document.getElementById('markdown-mermaid');
-    const darkModeTheme = configSpan?.dataset.darkModeTheme;
-    const lightModeTheme = configSpan?.dataset.lightModeTheme;
-
-    const config: MermaidConfig = {
-        startOnLoad: false,
-        theme: (document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
-            ? darkModeTheme ?? 'dark'
-            : lightModeTheme ?? 'default' ) as MermaidConfig['theme'],
-    };
-
+    const config= loadMermaidConfig();
     mermaid.initialize(config);
     registerMermaidAddons();
 

src/shared-mermaid/index.ts

@@ -92,10 +92,14 @@ export function loadMermaidConfig(): MermaidConfig {
     const darkModeTheme = configSpan?.dataset.darkModeTheme;
     const lightModeTheme = configSpan?.dataset.lightModeTheme;
 
+    const directives = JSON.parse(configSpan?.dataset.directives ?? '');
+
     return {
         startOnLoad: false,
         theme: (document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
             ? darkModeTheme ?? 'dark'
             : lightModeTheme ?? 'default') as MermaidConfig['theme'],
+
+        ...directives,
     };
 }

src/vscode-extension/themeing.ts

@@ -18,11 +18,23 @@ function sanitizeMermaidTheme(theme: string | undefined) {
 export function injectMermaidTheme(md: MarkdownIt) {
     const render = md.renderer.render;
     md.renderer.render = function (...args) {
-        const darkModeTheme = sanitizeMermaidTheme(vscode.workspace.getConfiguration(configSection).get('darkModeTheme'));
-        const lightModeTheme = sanitizeMermaidTheme(vscode.workspace.getConfiguration(configSection).get('lightModeTheme'));
+        const config = vscode.workspace.getConfiguration(configSection);
+
+        const darkModeTheme = sanitizeMermaidTheme(config.get('darkModeTheme'));
+        const lightModeTheme = sanitizeMermaidTheme(config.get('lightModeTheme'));
+
+        let directivesAttr = '';
+        try {
+            const rawDirectives = config.get<object>("directives", {});
+            directivesAttr = JSON.stringify(rawDirectives);
+        } catch (e) {
+            console.error('Failed to serialize mermaid directives', e);
+        }
+
         return `<span id="${configSection}" aria-hidden="true"
                     data-dark-mode-theme="${darkModeTheme}"
-                    data-light-mode-theme="${lightModeTheme}"></span>
+                    data-light-mode-theme="${lightModeTheme}"
+                    data-directives='${directivesAttr.replaceAll(`'`, '&apos;')}'></span>
                 ${render.apply(md.renderer, args)}`;
     };
     return md;

src/vscode-extension/tsconfig.json

@@ -3,7 +3,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": [
-            "es2020"
+            "es2022"
         ],
         "sourceMap": true
     },