diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index d25c6425e..4f66bd770 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -26,18 +26,6 @@ erDiagram PRODUCT ||--o{ ORDER-ITEM : "ordered in" ``` -```mermaid -erDiagram - CUSTOMER }|..|{ DELIVERY-ADDRESS : has - CUSTOMER ||--o{ ORDER : places - CUSTOMER ||--o{ INVOICE : "liable for" - DELIVERY-ADDRESS ||--o{ ORDER : receives - INVOICE ||--|{ ORDER : covers - ORDER ||--|{ ORDER-ITEM : includes - PRODUCT-CATEGORY ||--|{ PRODUCT : contains - PRODUCT ||--o{ ORDER-ITEM : "ordered in" -``` - The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax. ## Diagram Breaking diff --git a/package.json b/package.json index de5d6ab9d..e527b3ce5 100644 --- a/package.json +++ b/package.json @@ -128,9 +128,9 @@ "ts-node": "^10.9.1", "typescript": "^4.8.3", "unist-util-flatmap": "^1.0.0", - "vitepress": "^1.0.0-alpha.15", + "vitepress": "^1.0.0-alpha.16", "vitepress-plugin-mermaid": "^2.0.8", - "vitepress-plugin-search": "^1.0.4-alpha.7", + "vitepress-plugin-search": "^1.0.4-alpha.8", "vitest": "^0.23.1" }, "resolutions": { diff --git a/vdocs/.vitepress/theme/custom.css b/vdocs/.vitepress/theme/custom.css index 2e457d61a..a158d7e6d 100644 --- a/vdocs/.vitepress/theme/custom.css +++ b/vdocs/.vitepress/theme/custom.css @@ -1 +1,6 @@ -Use this file to add custom css \ No newline at end of file +/* Use this file to add custom css */ + +/* TODO: Remove after vitepress-plugin-search next release */ +.search-item-icon { + font-family: none; +} diff --git a/vdocs/.vitepress/theme/index.ts b/vdocs/.vitepress/theme/index.ts index 832876fae..7093a1643 100644 --- a/vdocs/.vitepress/theme/index.ts +++ b/vdocs/.vitepress/theme/index.ts @@ -1,6 +1,6 @@ import DefaultTheme from 'vitepress/theme'; import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue'; -// import './custom.css'; +import './custom.css'; export default { ...DefaultTheme, diff --git a/vdocs/config/theming.md b/vdocs/config/theming.md index 0a56555b9..16bb2ef95 100644 --- a/vdocs/config/theming.md +++ b/vdocs/config/theming.md @@ -40,15 +40,15 @@ mermaidAPI.initialize({ When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array. ```mmd -%%{init: {'theme':'base'}}%% +%%{init: {'theme':'neutral'}}%% graph TD a --> b ``` -Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default: +Here is an example of how `%%init%%` can set the theme to 'neutral', this assumes that `themeVariables` are set to default: ```mermaid-example -%%{init: {'theme':'base'}}%% +%%{init: {'theme':'neutral'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -251,12 +251,12 @@ The Theming Engine does not admit color codes and will only accept proper color # Examples: When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good. -In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md) +In the following examples, the directive `init` is used, with the `theme` being declared as `neutral`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md) ### Flowchart ```mmd -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -274,7 +274,7 @@ In the following examples, the directive `init` is used, with the `theme` being ``` ```mermaid -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -294,7 +294,7 @@ In the following examples, the directive `init` is used, with the `theme` being ### Flowchart (beta) ```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%% flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} @@ -314,7 +314,7 @@ In the following examples, the directive `init` is used, with the `theme` being ### Sequence diagram ```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%% sequenceDiagram autonumber par Action 1 @@ -335,7 +335,7 @@ In the following examples, the directive `init` is used, with the `theme` being ### Class diagram ```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%% classDiagram Animal "1" <|-- Duck @@ -395,7 +395,7 @@ gantt ### State diagram ```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%% stateDiagram [*] --> Active @@ -427,7 +427,7 @@ gantt ### State diagram (beta) ```mermaid-example -%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% +%%{init: {'securityLevel': 'loose', 'theme':'neutral'}}%% stateDiagram-v2 [*] --> Active diff --git a/vdocs/vite.config.ts b/vdocs/vite.config.ts index dd7ef907a..bc8852691 100644 --- a/vdocs/vite.config.ts +++ b/vdocs/vite.config.ts @@ -1,15 +1,15 @@ -import { node } from 'stylis'; import { defineConfig } from 'vite'; import path from 'path'; -// import { SearchPlugin } from 'vitepress-plugin-search'; +import { SearchPlugin } from 'vitepress-plugin-search'; const virtualModuleId = 'virtual:mermaid-config'; const resolvedVirtualModuleId = '\0' + virtualModuleId; export default defineConfig({ plugins: [ - // SearchPlugin(), + SearchPlugin(), { + // TODO: will be fixed in the next vitepress release. name: 'fix-virtual', async resolveId(id) { diff --git a/yarn.lock b/yarn.lock index 20d1671d5..3255917c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7174,15 +7174,15 @@ vitepress-plugin-mermaid@^2.0.8: resolved "https://registry.yarnpkg.com/vitepress-plugin-mermaid/-/vitepress-plugin-mermaid-2.0.8.tgz#7a2447d9fa5835fdc00195859d7864d35aeb19a9" integrity sha512-ywWxTeg9kMv7ZPf/igCBF4ZHhWZAyRtbPnA12ICQuNK2AMp7r5IHOfnuX1EJQf8gNdsh8bcvvSvm8Ll92fdOTw== -vitepress-plugin-search@^1.0.4-alpha.7: - version "1.0.4-alpha.7" - resolved "https://registry.yarnpkg.com/vitepress-plugin-search/-/vitepress-plugin-search-1.0.4-alpha.7.tgz#b0514b5fdb94fb6449465d9ab3207dc68cfc1333" - integrity sha512-2Ice0wP93lQRVFh9U0atZLMoGggik0BtFsz+CuuWVlUhHkw7qxgRwtGarTRKijht4G8gRQ0N6Qrw56pcCGXoYw== +vitepress-plugin-search@^1.0.4-alpha.8: + version "1.0.4-alpha.8" + resolved "https://registry.yarnpkg.com/vitepress-plugin-search/-/vitepress-plugin-search-1.0.4-alpha.8.tgz#4ede5085e9176744e90c9e0c4a4828c1fcdd904f" + integrity sha512-ej27VG/cQrr325eYu8ZtTtWrGoHjqOVTw6UHWOmV1htAnGhxdh5sDlUQk/O+/yVy0BSTCGKCRqvVuvhHv0MrEA== -vitepress@^1.0.0-alpha.15: - version "1.0.0-alpha.15" - resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-alpha.15.tgz#26ff8a8b5bae298ac6e47e5fec20d873a3a5960a" - integrity sha512-+pHJQCpnv0wVgLRyonisrj7Y77PVhbns2nTLxV9GkH3T+RTY/W2JmRatzBg5WciMaPyO8Ms6F3YElO5PULVv3w== +vitepress@^1.0.0-alpha.16: + version "1.0.0-alpha.16" + resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-1.0.0-alpha.16.tgz#792936bdbece6e4d8c88598e09a063b52dd81f24" + integrity sha512-IXW3jA2Y9BsoYlpVuVcAy2XEu1wuoq2xmPvSDPVFrh8HV+oVpuvbPUCHqG6smEcu86xw3g4JjreqAwPlpPn6gw== dependencies: "@docsearch/css" "^3.2.1" "@docsearch/js" "^3.2.1"