marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-18 11:44:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-08-25 14:26:27 +02:00
parent 47af4760bc 1bfa1a8c88
commit 8ef5f38861
17 changed files with 71 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docker-compose.yml
View File

@@ -5,9 +5,9 @@ services:
stdin_open: true
tty: true
working_dir: /mermaid
mem_limit: '2G'
mem_limit: '4G'
environment:
- NODE_OPTIONS=--max_old_space_size=2048
- NODE_OPTIONS=--max_old_space_size=4096
volumes:
- ./:/mermaid
- root_cache:/root/.cache

2
docs/config/Tutorials.md
View File

@@ -32,7 +32,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati
## Mermaid with HTML
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
Examples are provided in [Getting Started](../intro/getting-started.md)
**CodePen Examples:**

4
docs/config/n00b-advanced.md → docs/config/advanced.md
View File

@@ -2,9 +2,9 @@
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/n00b-advanced.md](../../packages/mermaid/src/docs/config/n00b-advanced.md).
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/advanced.md](../../packages/mermaid/src/docs/config/advanced.md).
# Advanced n00b mermaid (Coming soon..)
# Advanced mermaid (Coming soon..)
## splitting mermaid code from html

2
docs/config/usage.md
View File

@@ -41,7 +41,7 @@ pnpm add mermaid
**Hosting mermaid on a web page:**
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
The easiest way to integrate mermaid on a web page requires two elements:

6
docs/intro/n00b-gettingStarted.md → docs/intro/getting-started.md
View File

@@ -2,13 +2,13 @@
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-gettingStarted.md](../../packages/mermaid/src/docs/intro/n00b-gettingStarted.md).
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/getting-started.md](../../packages/mermaid/src/docs/intro/getting-started.md).
# A Mermaid User-Guide for Beginners
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](syntax-reference.md) would be of great help to the beginner.
> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
@@ -53,7 +53,7 @@ graph TD
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
![Code,Config and Preview](./img/Code-Preview-Config.png)

10
docs/intro/index.md
View File

@@ -10,7 +10,7 @@
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference.md).
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](syntax-reference.md).
<img src="/header.png" alt="" />
@@ -44,7 +44,7 @@ Mermaid allows even non-programmers to easily create detailed and diagrams throu
[Tutorials](../config/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/n00b-gettingStarted.md) and [Usage](../config/usage.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
@@ -284,9 +284,9 @@ quadrantChart
## Installation
**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**
**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
**It would also be helpful to learn more about mermaid's [Syntax](./syntax-reference.md).**
### CDN
@@ -402,7 +402,7 @@ Update version number in `package.json`.
npm publish
```
The above command generates files into the `dist` folder and publishes them to [npmjs.org](npmjs.org).
The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
## Security and safe diagrams

12
docs/intro/n00b-syntaxReference.md → docs/intro/syntax-reference.md
View File

@@ -2,7 +2,7 @@
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-syntaxReference.md](../../packages/mermaid/src/docs/intro/n00b-syntaxReference.md).
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/syntax-reference.md](../../packages/mermaid/src/docs/intro/syntax-reference.md).
# Diagram Syntax
@@ -42,7 +42,7 @@ erDiagram
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
The [Getting Started](./getting-started.md) section can also provide some practical examples of mermaid syntax.
## Diagram Breaking
@@ -66,20 +66,20 @@ Configuration is the third part of Mermaid, after deployment and syntax. It deal
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes.
This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./getting-started.md) methods.
### Configuration Section in the [Live Editor](https://mermaid.live).
Here you can edit certain values to change the behavior and appearance of the diagram.
### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api),
### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
Used when Mermaid is called via an API, or through a `<script>` tag.
### [Directives](../config/directives.md),
### [Directives](../config/directives.md)
Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
### [Theme Manipulation](../config/theming.md):
### [Theme Manipulation](../config/theming.md)
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.

6
packages/mermaid/src/docs/.vitepress/config.ts
View File

@@ -109,8 +109,8 @@ function sidebarAll() {
collapsed: false,
items: [
{ text: 'About Mermaid', link: '/intro/' },
{ text: 'Getting Started', link: '/intro/n00b-gettingStarted' },
{ text: 'Syntax and Configuration', link: '/intro/n00b-syntaxReference' },
{ text: 'Getting Started', link: '/intro/getting-started' },
{ text: 'Syntax and Configuration', link: '/intro/syntax-reference' },
],
},
...sidebarSyntax(),
@@ -167,7 +167,7 @@ function sidebarConfig() {
{ text: 'Theming', link: '/config/theming' },
{ text: 'Accessibility', link: '/config/accessibility' },
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
{ text: 'Advanced usage', link: '/config/n00b-advanced' },
{ text: 'Advanced usage', link: '/config/advanced' },
{ text: 'FAQ', link: '/config/faq' },
],
},

13
packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
View File

@@ -19,8 +19,17 @@ test.each([
'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more', // with multiple params
'syntax/flowchart.html#my-id',
],
['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/n00b-advanced.html'], // without .md
['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/n00b-advanced.html'], // with .md
['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/advanced.html'], // without .md
['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/advanced.html'], // with .md
['https://mermaid-js.github.io/mermaid/#/n00b-gettingstarted', 'intro/getting-started.html'],
['https://mermaid-js.github.io/mermaid/#/n00b-gettingstarted.md', 'intro/getting-started.html'],
['https://mermaid-js.github.io/mermaid/#/n00b-overview', 'intro/getting-started.html'],
['https://mermaid-js.github.io/mermaid/#/n00b-overview.md', 'intro/getting-started.html'],
['https://mermaid-js.github.io/mermaid/#/n00b-syntaxreference', 'intro/syntax-reference.html'],
['https://mermaid-js.github.io/mermaid/#/n00b-syntaxreference.md', 'intro/syntax-reference.html'],
['https://mermaid-js.github.io/mermaid/#/quickstart', 'intro/getting-started.html'],
['https://mermaid-js.github.io/mermaid/#/quickstart.md', 'intro/getting-started.html'],
[
'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle', // with id, without .md
'syntax/flowchart.html#a-node-in-the-form-of-a-circle',

26
packages/mermaid/src/docs/.vitepress/theme/redirect.ts
View File

@@ -25,9 +25,13 @@ const getBaseFile = (url: URL): Redirect => {
};
/**
* Used to redirect old documentation pages to corresponding new pages.
* Used to redirect old (pre-vitepress) documentation pages to corresponding new pages.
* The key is the old documentation ID, and the value is the new documentation path.
* No key should be added here as it already has all the old documentation IDs.
* If you are changing a documentation page, you should update the corresponding value here, and add an entry in the urlRedirectMap below.
*/
const idRedirectMap: Record<string, string> = {
// ID of the old documentation page: Path of the new documentation page
'8.6.0_docs': '',
accessibility: 'config/theming',
breakingchanges: '',
@@ -50,15 +54,14 @@ const idRedirectMap: Record<string, string> = {
mermaidcli: 'config/mermaidCLI',
mindmap: 'syntax/mindmap',
'more-pages': '',
'n00b-advanced': 'config/n00b-advanced',
'n00b-gettingstarted': 'intro/n00b-gettingStarted',
'n00b-overview': 'intro/n00b-gettingStarted',
'community/n00b-overview': 'intro/n00b-gettingStarted',
'n00b-syntaxreference': 'intro/n00b-syntaxReference',
'n00b-advanced': 'config/advanced',
'n00b-gettingstarted': 'intro/getting-started',
'n00b-overview': 'intro/getting-started',
'n00b-syntaxreference': 'intro/syntax-reference',
newdiagram: 'community/newDiagram',
pie: 'syntax/pie',
plugins: '',
quickstart: 'intro/n00b-gettingStarted',
quickstart: 'intro/getting-started',
requirementdiagram: 'syntax/requirementDiagram',
security: 'community/security',
sequencediagram: 'syntax/sequenceDiagram',
@@ -74,10 +77,19 @@ const idRedirectMap: Record<string, string> = {
/**
* Used to redirect pages that have been moved in the vitepress site.
* No keys should be deleted from here.
* If you are changing a documentation page, you should update the corresponding value here,
* and update the entry in the idRedirectMap above if it was present
* (No need to add new keys in idRedirectMap).
*/
const urlRedirectMap: Record<string, string> = {
// Old URL: New URL
'/misc/faq.html': 'configure/faq.html',
'/syntax/c4c.html': 'syntax/c4.html',
'/config/n00b-advanced.html': 'config/advanced',
'/intro/n00b-gettingStarted.html': 'intro/getting-started',
'/intro/n00b-syntaxReference.html': 'intro/syntax-reference',
'/community/n00b-overview.html': 'intro/getting-started',
};
/**

2
packages/mermaid/src/docs/config/Tutorials.md
View File

@@ -26,7 +26,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati
## Mermaid with HTML
Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)
Examples are provided in [Getting Started](../intro/getting-started.md)
**CodePen Examples:**

2
packages/mermaid/src/docs/config/n00b-advanced.md → packages/mermaid/src/docs/config/advanced.md
View File

@@ -1,4 +1,4 @@
# Advanced n00b mermaid (Coming soon..)
# Advanced mermaid (Coming soon..)
## splitting mermaid code from html

2
packages/mermaid/src/docs/config/usage.md
View File

@@ -35,7 +35,7 @@ pnpm add mermaid
**Hosting mermaid on a web page:**
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)
> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
The easiest way to integrate mermaid on a web page requires two elements:

4
packages/mermaid/src/docs/intro/n00b-gettingStarted.md → packages/mermaid/src/docs/intro/getting-started.md
View File

@@ -2,7 +2,7 @@
Mermaid is composed of three parts: Deployment, Syntax and Configuration.
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.
This section talks about the different ways to deploy Mermaid. Learning the [Syntax](syntax-reference.md) would be of great help to the beginner.
> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
@@ -36,7 +36,7 @@ graph TD
In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
![Code,Config and Preview](./img/Code-Preview-Config.png)

10
packages/mermaid/src/docs/intro/index.md
View File

@@ -4,7 +4,7 @@
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference.md).
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](syntax-reference.md).
<img src="/header.png" alt="" />
@@ -39,7 +39,7 @@ Mermaid allows even non-programmers to easily create detailed and diagrams throu
[Tutorials](../config/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/n00b-gettingStarted.md) and [Usage](../config/usage.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
@@ -59,9 +59,9 @@ In our release process we rely heavily on visual regression tests using [applito
## Installation
**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**
**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
**It would also be helpful to learn more about mermaid's [Syntax](./syntax-reference.md).**
### CDN
@@ -179,7 +179,7 @@ Update version number in `package.json`.
npm publish
```
The above command generates files into the `dist` folder and publishes them to [npmjs.org](npmjs.org).
The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/).
## Security and safe diagrams

10
packages/mermaid/src/docs/intro/n00b-syntaxReference.md → packages/mermaid/src/docs/intro/syntax-reference.md
View File

@@ -24,7 +24,7 @@ erDiagram
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
The [Getting Started](./getting-started.md) section can also provide some practical examples of mermaid syntax.
## Diagram Breaking
@@ -48,20 +48,20 @@ Configuration is the third part of Mermaid, after deployment and syntax. It deal
If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes.
This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./getting-started.md) methods.
### Configuration Section in the [Live Editor](https://mermaid.live).
Here you can edit certain values to change the behavior and appearance of the diagram.
### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api),
### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
Used when Mermaid is called via an API, or through a `<script>` tag.
### [Directives](../config/directives.md),
### [Directives](../config/directives.md)
Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
### [Theme Manipulation](../config/theming.md):
### [Theme Manipulation](../config/theming.md)
An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.

7
pnpm-lock.yaml generated
View File

@@ -3995,7 +3995,7 @@ packages:
tslib:
optional: true
dependencies:
'@rollup/pluginutils': 5.0.2(rollup@2.79.1)
'@rollup/pluginutils': 5.0.2
resolve: 1.22.2
typescript: 5.1.3
dev: true
@@ -4012,7 +4012,7 @@ packages:
rollup: 2.79.1
dev: true
/@rollup/pluginutils@5.0.2(rollup@2.79.1):
/@rollup/pluginutils@5.0.2:
resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
engines: {node: '>=14.0.0'}
peerDependencies:
@@ -4024,7 +4024,6 @@ packages:
'@types/estree': 1.0.0
estree-walker: 2.0.2
picomatch: 2.3.1
rollup: 2.79.1
dev: true
/@rollup/pluginutils@5.0.3(rollup@2.79.1):
@@ -15000,7 +14999,7 @@ packages:
optional: true
dependencies:
'@antfu/utils': 0.7.5
'@rollup/pluginutils': 5.0.2(rollup@2.79.1)
'@rollup/pluginutils': 5.0.3(rollup@2.79.1)
chokidar: 3.5.3
debug: 4.3.4(supports-color@8.1.1)
fast-glob: 3.3.1