diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt index 0e0881db96..6d26357f8f 100644 --- a/.cspell/code-terms.txt +++ b/.cspell/code-terms.txt @@ -63,6 +63,7 @@ Kaufmann keyify LABELPOS LABELTYPE +lcov LEFTOF Lexa linebreak diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index f20204a714..cfd22a2935 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -12,7 +12,7 @@ Describe the way your implementation works or what design decisions you made if Make sure you -- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) +- [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html) - [ ] :computer: have added necessary unit/e2e tests. -- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/contributing.md#update-documentation) is used for all new features. +- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features. - [ ] :bookmark: targeted `develop` branch diff --git a/.node-version b/.node-version index 7ea6a59d34..ee09fac75c 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -v20.11.0 +v20.11.1 diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 9633bed665..4923342e4a 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -2,7 +2,7 @@ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", - "zixuanchen.vitest-explorer", + "vitest.explorer", "luniclynx.bison" ] } diff --git a/README.md b/README.md index c392244cc8..8544e09800 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Try Live Editor previews of future releases: Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! +Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! ## Table of content @@ -53,7 +53,7 @@ Try Live Editor previews of future releases: docs - live editor] +### Flowchart [docs - live editor] ``` flowchart LR @@ -115,7 +115,8 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` -### Sequence diagram [docs - live editor] +### Sequence diagram [docs - live editor] + ``` sequenceDiagram @@ -141,7 +142,7 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` -### Gantt chart [docs - live editor] +### Gantt chart [docs - live editor] ``` gantt @@ -165,7 +166,7 @@ gantt Parallel 4 : des6, after des4, 1d ``` -### Class diagram [docs - live editor] +### Class diagram [docs - live editor] ``` classDiagram @@ -207,7 +208,7 @@ class Class10 { ``` -### State diagram [docs - live editor] +### State diagram [docs - live editor] ``` stateDiagram-v2 @@ -229,7 +230,7 @@ Moving --> Crash Crash --> [*] ``` -### Pie chart [docs - live editor] +### Pie chart [docs - live editor] ``` pie @@ -247,7 +248,7 @@ pie ### Git graph [experimental - live editor] -### Bar chart (using gantt chart) [docs - live editor] +### Bar chart (using gantt chart) [docs - live editor] ``` gantt @@ -285,7 +286,7 @@ gantt 5 : 0, 5 ``` -### User Journey diagram [docs - live editor] +### User Journey diagram [docs - live editor] ``` journey @@ -311,7 +312,7 @@ gantt Sit down: 3: Me ``` -### C4 diagram [docs] +### C4 diagram [docs] ``` C4Context @@ -405,7 +406,7 @@ The above command generates files into the `dist` folder and publishes them to < Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out. -Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md) +Detailed information about how to contribute can be found in the [contribution guide](https://mermaid.js.org/community/contributing.html) ## Security and safe diagrams diff --git a/README.zh-CN.md b/README.zh-CN.md index 073728b73f..942f54bff9 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -43,7 +43,7 @@ Mermaid **感谢所有参与进来提交 PR，解答疑问的人们! 🙏** -Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! +Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out! ## 关于 Mermaid @@ -57,20 +57,20 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。
-你可以访问 [教程](./docs/ecosystem/tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 +你可以访问 [教程](https://mermaid.js.org/ecosystem/tutorials.html) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](https://mermaid.js.org/ecosystem/integrations-community.html) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。 -如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/ecosystem/tutorials.md). +如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](https://mermaid.js.org/intro/getting-started.html), [用法](https://mermaid.js.org/config/usage.html) 和 [教程](https://mermaid.js.org/ecosystem/tutorials.html). ## 示例 -**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。** +**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid.js.org/intro/syntax-reference.html) 查看详情。** -### 流程图 [文档 - live editor] +### 流程图 [文档 - live editor] ``` flowchart LR @@ -88,7 +88,7 @@ C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` -### 时序图 [文档 - live editor] +### 时序图 [文档 - live editor] ``` sequenceDiagram @@ -114,7 +114,7 @@ John->>Bob: How about you? Bob-->>John: Jolly good! ``` -### 甘特图 [文档 - live editor] +### 甘特图 [文档 - live editor] ``` gantt @@ -138,7 +138,7 @@ gantt Parallel 4 : des6, after des4, 1d ``` -### 类图 [文档 - live editor] +### 类图 [文档 - live editor] ``` classDiagram @@ -178,7 +178,7 @@ class Class10 { } ``` -### 状态图 [[docs - live editor] +### 状态图 [docs - live editor] ``` stateDiagram-v2 @@ -200,7 +200,7 @@ Moving --> Crash Crash --> [*] ``` -### 饼图 [文档 - live editor] +### 饼图 [文档 - live editor] ``` pie @@ -218,7 +218,7 @@ pie ### Git 图 [实验特性 - live editor] -### 用户体验旅程图 [文档 - live editor] +### 用户体验旅程图 [文档 - live editor] ``` journey @@ -244,7 +244,7 @@ pie Sit down: 3: Me ``` -### C4 图 [文档] +### C4 图 [文档] ``` C4Context @@ -338,7 +338,7 @@ npm publish Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 [这个 issue](https://github.com/mermaid-js/mermaid/issues/866)。 -关于如何贡献的详细信息可以在 [贡献指南](CONTRIBUTING.md) 中找到。 +关于如何贡献的详细信息可以在 [贡献指南](https://mermaid.js.org/community/contributing.html) 中找到。 ## 安全 diff --git a/docker-compose.yml b/docker-compose.yml index 90546a4d64..8c88b94dcb 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -8,7 +8,7 @@ services: tty: true working_dir: /mermaid mem_limit: '8G' - entrypoint: '/mermaid/docker-entrypoint.sh' + entrypoint: docker-entrypoint.sh environment: - NODE_OPTIONS=--max_old_space_size=8192 volumes: diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 3e3c6ad5b4..288b8992c7 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -8,9 +8,9 @@ > Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part. -"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia +"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline). -### An example of a timeline. +### An example of a timeline ```mermaid-example timeline @@ -58,7 +58,7 @@ or : {event} ``` -NOTE: Both time period and event are simple text, and not limited to numbers. +**NOTE**: Both time period and event are simple text, and not limited to numbers. Let us look at the syntax for the example above. @@ -104,7 +104,7 @@ timeline Industry 3.0 : Electronics, Computers, Automation section 21st century Industry 4.0 : Internet, Robotics, Internet of Things - Industry 5.0 : Artificial intelligence, Big data,3D printing + Industry 5.0 : Artificial intelligence, Big data, 3D printing ``` ```mermaid @@ -116,7 +116,7 @@ timeline Industry 3.0 : Electronics, Computers, Automation section 21st century Industry 4.0 : Internet, Robotics, Internet of Things - Industry 5.0 : Artificial intelligence, Big data,3D printing + Industry 5.0 : Artificial intelligence, Big data, 3D printing ``` As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined. @@ -213,7 +213,7 @@ However, if there is no section defined, then we have two possibilities: ``` -Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme. +**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme. 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme. @@ -262,7 +262,7 @@ In case you have more than 12 sections, the color scheme will start to repeat. If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables. -NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. +**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. Example: @@ -461,7 +461,7 @@ Let's put them to use, and see how our sample diagram looks in different themes: 2010 : Pinterest ``` -## Integrating with your library/website. +## Integrating with your library/website Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward. diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index feb3213704..15cdc6a09c 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -221,7 +221,7 @@ gantt ``` ```warning -`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION +`millisecond` and `second` support was added in v10.3.0 ``` ## Output in compact mode diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index 1d590c1445..165fd62607 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -2,9 +2,9 @@ > Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part. -"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia +"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline). -### An example of a timeline. +### An example of a timeline ```mermaid timeline @@ -42,7 +42,7 @@ or : {event} ``` -NOTE: Both time period and event are simple text, and not limited to numbers. +**NOTE**: Both time period and event are simple text, and not limited to numbers. Let us look at the syntax for the example above. @@ -79,7 +79,7 @@ timeline Industry 3.0 : Electronics, Computers, Automation section 21st century Industry 4.0 : Internet, Robotics, Internet of Things - Industry 5.0 : Artificial intelligence, Big data,3D printing + Industry 5.0 : Artificial intelligence, Big data, 3D printing ``` As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined. @@ -139,7 +139,7 @@ However, if there is no section defined, then we have two possibilities: ``` -Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme. +**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme. 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme. @@ -177,7 +177,7 @@ In case you have more than 12 sections, the color scheme will start to repeat. If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables. -NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. +**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. Example: @@ -293,7 +293,7 @@ Let's put them to use, and see how our sample diagram looks in different themes: 2010 : Pinterest ``` -## Integrating with your library/website. +## Integrating with your library/website Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.