docs: small improvements

packages/mermaid/.lintstagedrc.json

@@ -1,6 +1,6 @@
 {
-  "packages/mermaid/docs/**": ["pnpm run docs:build --git"],
-  "packages/mermaid/docs.mts": ["pnpm run docs:build --git"],
+  "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
+  "packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"],
   "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
   "*.jison": ["pnpm run lint:jison"]
 }

packages/mermaid/docs/.vitepress/theme/custom.css

@@ -1,13 +0,0 @@
-@media (min-width: 1440px) {
-  .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%;
-}

packages/mermaid/docs/edit.md

@@ -1,7 +0,0 @@
----
-layout: home
-
-title: Live Mermaid
----
-
-<iframe id="editor" src="https://mermaid.live" style="position: fixed;left: 0px;bottom: 0px;right: 0px;top: 80px;width: 100%;height: calc(100% - 80px);"></iframe>

packages/mermaid/package.json

@@ -34,12 +34,12 @@
     "predocs:build": "rimraf docs/.vitepress/dist",
     "docs:build": "ts-node-esm src/docs.mts",
     "docs:verify": "pnpm docs:build --verify",
-    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --hideInPageTOC --namedAnchors --out docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
+    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
     "predocs:dev": "pnpm docs:code",
-    "docs:dev": "vitepress dev docs",
+    "docs:dev": "vitepress dev src/docs",
     "predocs:bundle": "pnpm docs:code",
-    "docs:bundle": "vitepress build docs",
-    "docs:serve": "vitepress serve docs",
+    "docs:bundle": "vitepress build src/docs",
+    "docs:serve": "vitepress serve src/docs",
     "release": "pnpm build",
     "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
@@ -77,11 +77,7 @@
     "khroma": "^2.0.0",
     "lodash": "^4.17.21",
     "moment-mini": "^2.24.0",
-    "non-layered-tidy-tree-layout": "^2.0.2",
-    "shiki": "^0.11.1",
-    "stylis": "^4.1.2",
-    "typedoc": "^0.23.16",
-    "typedoc-plugin-markdown": "^3.13.6"
+    "non-layered-tidy-tree-layout": "^2.0.2"
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
@@ -130,7 +126,11 @@
     "unist-util-flatmap": "^1.0.0",
     "vitepress": "^1.0.0-alpha.19",
     "vitepress-plugin-mermaid": "^2.0.8",
-    "vitepress-plugin-search": "^1.0.4-alpha.11"
+    "vitepress-plugin-search": "^1.0.4-alpha.11",
+    "shiki": "^0.11.1",
+    "stylis": "^4.1.2",
+    "typedoc": "^0.23.16",
+    "typedoc-plugin-markdown": "^3.13.6"
   },
   "resolutions": {
     "d3": "^7.0.0"

packages/mermaid/src/docs.mts

@@ -47,7 +47,7 @@ const MERMAID_MAJOR_VERSION = (
 
 // These paths are from the root of the mono-repo, not from the
 // mermaid sub-directory
-const SOURCE_DOCS_DIR = 'docs';
+const SOURCE_DOCS_DIR = 'src/docs';
 const FINAL_DOCS_DIR = '../../docs';
 
 const AUTOGENERATED_TEXT = `# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in ${SOURCE_DOCS_DIR}.`;

packages/mermaid/src/docs/.vitepress/config.ts

@@ -1,4 +1,4 @@
-import { version } from '../../package.json';
+import { version } from '../../../package.json';
 import MermaidMarkdown from './mermaid-markdown-all';
 import { defineConfig } from 'vitepress';
 
@@ -8,9 +8,12 @@ export default defineConfig({
   description: 'Create diagrams and visualizations using text and code.',
   base: '/mermaid-docs/',
   markdown: MermaidMarkdown,
-  ignoreDeadLinks: true, //TODO: try to fixe those in autogenerated docs
   themeConfig: {
     nav: nav(),
+    editLink: {
+      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/docs/:path',
+      text: 'Edit this page on GitHub',
+    },
 
     sidebar: {
       '/': sidebarAll(),
@@ -53,7 +56,7 @@ function nav() {
     },
     {
       text: '💻 Live Editor',
-      link: '/edit',
+      link: 'https://mermaid.live',
     },
   ];
 }

packages/mermaid/src/docs/.vitepress/theme/custom.css

@@ -0,0 +1,17 @@
+:root {
+  --vp-c-brand: #ff3670;
+  --vp-c-brand-light: #ff5e8c;
+  --vp-c-brand-lighter: #ff85a8;
+  --vp-c-brand-lightest: #ff9bb7;
+  --vp-c-brand-dark: #bd34fe;
+  --vp-c-brand-darker: #9339bd;
+  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%);
+  --vp-home-hero-image-filter: blur(72px);
+}

packages/mermaid/src/docs/.vitepress/theme/index.ts

@@ -1,4 +1,5 @@
 import DefaultTheme from 'vitepress/theme';
+// @ts-ignore
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
 

packages/mermaid/src/docs/CHANGELOG.md

@@ -11,10 +11,10 @@ All changes are in descending order, beginning with the newest (latest) version.
 🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
 📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)
 
-This version brings with it a system for [dynamic and integrated configuration of the diagram themes](../config/theming.md).
+This version brings with it a system for [dynamic and integrated configuration of the diagram themes](config/theming.md).
 The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
 
-Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md).
+Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](config/8.6.0_docs.md).
 
 **These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**
 

packages/mermaid/src/docs/index.md

@@ -9,7 +9,7 @@ hero:
   text: Diagramming and charting tool
   tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
   image:
-    src: /header.png
+    src: /mermaid-logo.svg
     alt: Mermaid
   actions:
     - theme: brand
@@ -105,6 +105,7 @@ const members = [
   .image-container .image-src {
     margin: 1rem auto;
     max-width: 100%;
+    width: 100%;
   }
 
   .dark .image-src{

packages/mermaid/src/docs/intro/index.md

@@ -131,7 +131,7 @@ erDiagram
 
 ```
 
-### [User Journey Diagram](../syntax/user-journey.md)
+### [User Journey Diagram](../syntax/userJourney.md)
 
 ```mermaid-example
 journey

packages/mermaid/src/docs/public/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

packages/mermaid/src/docs/public/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "App",
+  "icons": [
+    {
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

packages/mermaid/src/docs/public/mermaid-logo.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 491 491" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <!-- <path d="M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" style="fill:rgb(255,54,112);"/> -->
+    <path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" style="fill:white;fill-rule:nonzero;"/>
+</svg>

packages/mermaid/src/docs/syntax/flowchart.md

@@ -207,7 +207,7 @@ flowchart LR
 ### Dotted link
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
    A-.->B;
 ```
 
@@ -449,7 +449,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -617,7 +617,7 @@ below:
 **Example definition**
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
@@ -641,7 +641,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 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?)
 ```
 

packages/mermaid/src/docs/syntax/gantt.md

@@ -275,7 +275,7 @@ todayMarker off
 It is possible to adjust the margins for rendering the gantt diagram.
 
 This is done by defining the `ganttConfig` part of the configuration object.
-How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.html) page.
+How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI) page.
 
 mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
 

packages/mermaid/src/docs/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, searchForWorkspaceRoot } from 'vite';
 import path from 'path';
+// @ts-ignore: still in alpha
 import { SearchPlugin } from 'vitepress-plugin-search';
 
 const virtualModuleId = 'virtual:mermaid-config';
@@ -29,7 +30,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      mermaid: path.join(__dirname, '../dist/mermaid.esm.min.mjs'), // Use this one to build
+      mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
     },
   },
   server: {