allow to set a class for parent div container

Author: dominikcz

docs/.vitepress/config.js

@@ -5,6 +5,9 @@ import { version } from "../../package.json";
 
 export default withMermaid(
   defineConfig({
+    // mermaidPlugin: {
+    //   class: "mermaid my-class", // set additional css classes for parent container 
+    // },
     lang: "en-US",
     title: "VitePress Plugin Mermaid",
     description: "Mermaid support for vitepress",

docs/guide/getting-started.md

@@ -31,11 +31,13 @@ export default withMermaid({
     mermaid: {
       // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
     },
+    // optionally set additional config for plugin itself with MermaidPluginConfig
+    mermaidPlugin: {
+      class: "mermaid my-class", // set additional css classes for parent container 
+    },
 });
 ```
 
-Use in any Markdown file
-
 Code with ```mmd
 
 ```mmd

src/Mermaid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-html="svg" class="mermaid"></div>
+  <div v-html="svg" :class="props.class"></div>
 </template>
 
 <script setup>
@@ -27,6 +27,11 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  class:{
+    type: String,
+    required: false,
+    default: "mermaid",
+  }
 });
 
 const svg = ref(null);

src/index.ts

@@ -1,6 +1,6 @@
 import { type UserConfig } from "vitepress";
 import { MermaidMarkdown } from "./mermaid-markdown";
-import { MermaidPlugin } from "./mermaid-plugin";
+import { MermaidPlugin, MermaidPluginConfig } from "./mermaid-plugin";
 import { MermaidConfig } from "mermaid/dist/config.type";
 
 export { MermaidMarkdown } from "./mermaid-markdown";
@@ -11,14 +11,15 @@ export { UserConfig };
 declare module "vitepress" {
   interface UserConfig {
     mermaid?: MermaidConfig;
+    mermaidPlugin?: MermaidPluginConfig;
   }
 }
 
 export const withMermaid = (config: UserConfig) => {
   if (!config.markdown) config.markdown = {};
   const markdownConfigOriginal = config.markdown.config || (() => {});
   config.markdown.config = (...args) => {
-    MermaidMarkdown(...args);
+    MermaidMarkdown(...args, config.mermaidPlugin);
     markdownConfigOriginal(...args);
   };
 

src/mermaid-markdown.ts

@@ -1,4 +1,4 @@
-export const MermaidMarkdown = (md) => {
+export const MermaidMarkdown = (md, pluginOptions) => {
   const sum = (o) => {
     function pad(hash, len) {
       while (hash.length < len) {
@@ -61,10 +61,11 @@ export const MermaidMarkdown = (md) => {
     if (token.info.trim() === "mermaid") {
       try {
         const key = index;
+        const cssClass = pluginOptions?.class || 'mermaid';
         return `
       <Suspense> 
       <template #default>
-      <Mermaid id="mermaid-${key}"  graph="${encodeURIComponent(
+      <Mermaid id="mermaid-${key}" class="${cssClass}" graph="${encodeURIComponent(
           token.content
         )}"></Mermaid>
       </template>

src/mermaid-plugin.ts

@@ -9,6 +9,11 @@ interface MermaidPluginOptions extends MermaidConfig {
   externalDiagrams: ExternalDiagramDefinition[];
 }
 
+// Additional configuration for plugin itself. Separate model, not to risk name conflicts with future MermaidConfig options
+export interface MermaidPluginConfig {
+  class?: string;  
+}
+
 const DEFAULT_OPTIONS: MermaidConfig = {
   //We set loose as default here because is needed to load images
   securityLevel: "loose",