diff --git a/.npmrc b/.npmrc index 289684302..4c2f52b3b 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1,2 @@ auto-install-peers=true strict-peer-dependencies=false -use-inline-specifiers-lockfile-format=true diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 9bc6d3056..1423d008c 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:660](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L660) +[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662) ## Functions diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index c2c04f750..c79f12b23 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -183,8 +183,6 @@ flowchart LR ### A hexagon node -Code: - ```mermaid-example flowchart LR id1{{This is the text in the box}} diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 58b12313d..f3db4bb59 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -8,7 +8,7 @@ > 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. 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 ### An example of a timeline. @@ -213,7 +213,7 @@ However, if there is no section defined, then we have two possibilities: ``` -Note that this is no, section 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. @@ -257,7 +257,7 @@ let us look at same example, where we have disabled the multiColor option. ### Customizing Color scheme -You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. +You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. In case you have more than 12 sections, the color scheme will start to repeat. 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. diff --git a/package.json b/package.json index 2da802bae..ca642e890 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.0.2", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@7.30.0", + "packageManager": "pnpm@7.30.1", "keywords": [ "diagram", "markdown", diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 42c7cbf5b..8e73f597b 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -122,9 +122,7 @@ flowchart LR ### A hexagon node -Code: - -```mmd +```mermaid-example flowchart LR id1{{This is the text in the box}} ``` diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index ef48d2b61..4f2fc705b 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -2,7 +2,7 @@ > 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. 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 ### An example of a timeline. @@ -139,7 +139,7 @@ However, if there is no section defined, then we have two possibilities: ``` -Note that this is no, section 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. @@ -172,7 +172,7 @@ let us look at same example, where we have disabled the multiColor option. ### Customizing Color scheme -You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. +You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on. In case you have more than 12 sections, the color scheme will start to repeat. 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. diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index a2ce827db..4344b3d38 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -399,6 +399,9 @@ const render = async function ( // clean up text CRLFs text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;; + // eslint-disable-next-line unicorn/better-regex + text = text.replace(/\s*%%[^{\ninit].*\n/gm, '\n'); // remove comments from text to avoid issues with parser + const idSelector = '#' + id; const iFrameID = 'i' + id; const iFrameID_selector = '#' + iFrameID;