docs: build working

package.json

@@ -79,8 +79,7 @@
     "lodash": "^4.17.21",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.1.2",
+    "stylis": "^4.1.2"
-    "vitepress-plugin-mermaid": "^2.0.7"
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
@@ -102,7 +101,6 @@
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
-    "documentation": "13.2.0",
     "esbuild": "^0.15.8",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
@@ -131,6 +129,7 @@
     "typescript": "^4.8.3",
     "unist-util-flatmap": "^1.0.0",
     "vitepress": "^1.0.0-alpha.15",
+    "vitepress-plugin-mermaid": "^2.0.8",
     "vitepress-plugin-search": "^1.0.4-alpha.7",
     "vitest": "^0.23.1"
   },

vdocs/.vitepress/config.ts

@@ -1,5 +1,5 @@
 import { version } from '../../package.json';
-import MermaidMarkdown from './mermaid-markdown-all';
+import ExampleMarkdown from './mermaid-markdown-all';
 import { defineConfig } from 'vitepress';
 
 export default defineConfig({
@@ -7,7 +7,7 @@ export default defineConfig({
   title: 'Mermaid',
   description: 'Create diagrams and visualizations using text and code.',
   base: '/mermaid-docs/',
-  markdown: MermaidMarkdown,
+  markdown: ExampleMarkdown,
   themeConfig: {
     nav: nav(),
 

vdocs/.vitepress/mermaid-markdown-all.ts

@@ -1,5 +1,5 @@
 import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
-const shiki = require('shiki');
+import shiki from 'shiki';
 
 export default {
   config: async (md) => {

vdocs/.vitepress/theme/custom.css

@@ -1,13 +1 @@
-@media (min-width: 1440px) {
+Use this file to add custom css
-  .VPDoc:not(.has-sidebar) .container[data-v-10119189] {
-    max-width: 100%;
-  }
-
-  .VPDoc.has-aside .content-container[data-v-10119189] {
-    max-width: 100%;
-  }
-}
-
-:root {
-  --vp-layout-max-width: 100%;
-}

vdocs/.vitepress/theme/index.ts

@@ -1,6 +1,11 @@
 import DefaultTheme from 'vitepress/theme';
+import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 // import './custom.css';
 
 export default {
   ...DefaultTheme,
+  enhanceApp({ app }) {
+    // register global components
+    app.component('Mermaid', Mermaid);
+  },
 };

vdocs/syntax/flowchart.md

@@ -637,14 +637,22 @@ It is possible to add icons from fontawesome.
 
 The icons are accessed via the syntax fa:#icon class name#.
 
-```mermaid-example
+```mmd
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
+```mermaid
+flowchart TD
+    B[<img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/brands/twitter.svg'> for peace .]
+    B-->C[<img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/solid/ban.svg'> forbidden .]
+    B-->D(<img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/solid/spinner.svg'> .)
+    B-->E(A <img class='fab' src='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/afecf2af5d897b763e5e8e28d46aad2f710ccad6/svgs/solid/camera-retro.svg'> perhaps? .)
+```
+
 ?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
 
 ## Graph declarations with spaces between vertices and link and without semicolon
@@ -675,3 +683,17 @@ mermaid.flowchartConfig = {
     width: 100%
 }
 ```
+
+<style>
+.fa, .fab, .fal, .far, .fas {
+    width: 16px;
+    height: 16px;
+    filter: opacity(0.5);
+}
+
+.dark .fa, .dark .fab, .dark .fal, .dark .far, .dark .fas {
+    width: 16px;
+    height: 16px;
+    filter: invert(1) opacity(0.5);
+}
+</style>

vdocs/vite.config.ts

@@ -1,11 +1,35 @@
+import { node } from 'stylis';
 import { defineConfig } from 'vite';
-import { SearchPlugin } from 'vitepress-plugin-search';
+import path from 'path';
+// import { SearchPlugin } from 'vitepress-plugin-search';
+
+const virtualModuleId = 'virtual:mermaid-config';
+const resolvedVirtualModuleId = '\0' + virtualModuleId;
 
 export default defineConfig({
-  plugins: [SearchPlugin()],
+  plugins: [
+    //  SearchPlugin(),
+    {
+      name: 'fix-virtual',
+
+      async resolveId(id) {
+        if (id === virtualModuleId) {
+          return resolvedVirtualModuleId;
+        }
+      },
+      async load(this, id) {
+        if (id === resolvedVirtualModuleId) {
+          return `export default ${JSON.stringify({
+            securityLevel: 'loose',
+            startOnLoad: false,
+          })};`;
+        }
+      },
+    },
+  ],
   resolve: {
     alias: {
-      mermaid: 'https://unpkg.com/mermaid@9.1.7/dist/mermaid.esm.min.mjs',
+      mermaid: path.join(__dirname, '../dist/mermaid.esm.min.mjs'), // Use this one to build
     },
   },
 });