Merge branch 'develop' into next

* develop:
  Update flowchart.md (#4798)
  Update flowchart.md (#4792)
  chore: Update docs
  Added missing integration tests and release version in docs.
  chore: Fix warning formatting
  docs: Disable showValues in sankey example
  Added support for millisecond and second to gantt tickInterval
  Use utf8 encoding in Jupyter example

cypress/integration/rendering/gantt.spec.js

@@ -330,6 +330,48 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram with tick is 2 milliseconds', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   SSS
+        axisFormat   %Lms
+        tickInterval 2millisecond
+        excludes     weekends
+
+        section Section
+        A task           : a1, 000, 6ms
+        Another task     : after a1, 6ms
+        section Another
+        Task in sec      : a2, 006, 3ms
+        another task     : 3ms
+      `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram with tick is 2 seconds', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   ss
+        axisFormat   %Ss
+        tickInterval 2second
+        excludes     weekends
+
+        section Section
+        A task           : a1, 00, 6s
+        Another task     : after a1, 6s
+        section Another
+        Task in sec      : 06, 3s
+        another task     : 3s
+      `,
+      {}
+    );
+  });
+
   it('should render a gantt diagram with tick is 15 minutes', () => {
     imgSnapshotTest(
       `

docs/config/Tutorials.md

@@ -62,10 +62,10 @@ from IPython.display import Image, display
 import matplotlib.pyplot as plt
 
 def mm(graph):
-  graphbytes = graph.encode("ascii")
+    graphbytes = graph.encode("utf8")
-  base64_bytes = base64.b64encode(graphbytes)
+    base64_bytes = base64.b64encode(graphbytes)
-  base64_string = base64_bytes.decode("ascii")
+    base64_string = base64_bytes.decode("ascii")
-  display(Image(url="https://mermaid.ink/img/" + base64_string))
+    display(Image(url="https://mermaid.ink/img/" + base64_string))
 
 mm("""
 graph LR;

docs/syntax/flowchart.md

@@ -860,8 +860,8 @@ flowchart LR
     C-->D
     click A callback "Tooltip for a callback"
     click B "https://www.github.com" "This is a tooltip for a link"
-    click A call callback() "Tooltip for a callback"
+    click C call callback() "Tooltip for a callback"
-    click B href "https://www.github.com" "This is a tooltip for a link"
+    click D href "https://www.github.com" "This is a tooltip for a link"
 ```
 
 ```mermaid
@@ -871,8 +871,8 @@ flowchart LR
     C-->D
     click A callback "Tooltip for a callback"
     click B "https://www.github.com" "This is a tooltip for a link"
-    click A call callback() "Tooltip for a callback"
+    click C call callback() "Tooltip for a callback"
-    click B href "https://www.github.com" "This is a tooltip for a link"
+    click D href "https://www.github.com" "This is a tooltip for a link"
 ```
 
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.

docs/syntax/gantt.md

@@ -241,7 +241,7 @@ The following formatting strings are supported:
 
 More info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>
 
-### Axis ticks
+### Axis ticks (v10.3.0+)
 
 The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
 
@@ -252,7 +252,7 @@ tickInterval 1day
 The pattern is:
 
 ```javascript
-/^([1-9][0-9]*)(minute|hour|day|week|month)$/;
+/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
 ```
 
 More info in: <https://github.com/d3/d3-time#interval_every>
@@ -271,7 +271,7 @@ gantt
   weekday monday
 ```
 
-Support: v10.3.0+
+> **Warning** > `millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
 
 ## Output in compact mode
 

docs/syntax/sankey.md

@@ -8,9 +8,8 @@
 
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
 
-::: warning
+> **Warning**
-This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
+> This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
-:::
 
 The things being connected are called nodes and the connections are called links.
 
@@ -19,6 +18,11 @@ The things being connected are called nodes and the connections are called links
 This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
 
 ```mermaid-example
+---
+config:
+  sankey:
+    showValues: false
+---
 sankey-beta
 
 Agricultural 'waste',Bio-conversion,124.729
@@ -92,6 +96,11 @@ Wind,Electricity grid,289.366
 ```
 
 ```mermaid
+---
+config:
+  sankey:
+    showValues: false
+---
 sankey-beta
 
 Agricultural 'waste',Bio-conversion,124.729

packages/mermaid/src/config.type.ts

@@ -1033,7 +1033,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * Pattern is:
    *
    * ```javascript
-   * /^([1-9][0-9]*)(minute|hour|day|week|month)$/
+   * /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/
    * ```
    *
    */

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -10,6 +10,8 @@ import {
   axisBottom,
   axisTop,
   timeFormat,
+  timeMillisecond,
+  timeSecond,
   timeMinute,
   timeHour,
   timeDay,
@@ -573,7 +575,7 @@ export const draw = function (text, id, version, diagObj) {
       .tickSize(-h + theTopPad + conf.gridLineStartPadding)
       .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
 
-    const reTickInterval = /^([1-9]\d*)(minute|hour|day|week|month)$/;
+    const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/;
     const resultTickInterval = reTickInterval.exec(
       diagObj.db.getTickInterval() || conf.tickInterval
     );
@@ -584,6 +586,12 @@ export const draw = function (text, id, version, diagObj) {
       const weekday = diagObj.db.getWeekday() || conf.weekday;
 
       switch (interval) {
+        case 'millisecond':
+          bottomXAxis.ticks(timeMillisecond.every(every));
+          break;
+        case 'second':
+          bottomXAxis.ticks(timeSecond.every(every));
+          break;
         case 'minute':
           bottomXAxis.ticks(timeMinute.every(every));
           break;
@@ -625,6 +633,12 @@ export const draw = function (text, id, version, diagObj) {
         const weekday = diagObj.db.getWeekday() || conf.weekday;
 
         switch (interval) {
+          case 'millisecond':
+            topXAxis.ticks(timeMillisecond.every(every));
+            break;
+          case 'second':
+            topXAxis.ticks(timeSecond.every(every));
+            break;
           case 'minute':
             topXAxis.ticks(timeMinute.every(every));
             break;

packages/mermaid/src/docs/config/Tutorials.md

@@ -56,10 +56,10 @@ from IPython.display import Image, display
 import matplotlib.pyplot as plt
 
 def mm(graph):
-  graphbytes = graph.encode("ascii")
+    graphbytes = graph.encode("utf8")
-  base64_bytes = base64.b64encode(graphbytes)
+    base64_bytes = base64.b64encode(graphbytes)
-  base64_string = base64_bytes.decode("ascii")
+    base64_string = base64_bytes.decode("ascii")
-  display(Image(url="https://mermaid.ink/img/" + base64_string))
+    display(Image(url="https://mermaid.ink/img/" + base64_string))
 
 mm("""
 graph LR;

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

@@ -554,13 +554,13 @@ flowchart LR
     C-->D
     click A callback "Tooltip for a callback"
     click B "https://www.github.com" "This is a tooltip for a link"
-    click A call callback() "Tooltip for a callback"
+    click C call callback() "Tooltip for a callback"
-    click B href "https://www.github.com" "This is a tooltip for a link"
+    click D href "https://www.github.com" "This is a tooltip for a link"
 ```
 
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
-?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
+?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7).
 
 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
 

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

@@ -173,7 +173,7 @@ The following formatting strings are supported:
 
 More info in: [https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format](https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format)
 
-### Axis ticks
+### Axis ticks (v10.3.0+)
 
 The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
 
@@ -184,7 +184,7 @@ tickInterval 1day
 The pattern is:
 
 ```javascript
-/^([1-9][0-9]*)(minute|hour|day|week|month)$/;
+/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
 ```
 
 More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)
@@ -197,7 +197,9 @@ gantt
   weekday monday
 ```
 
-Support: v10.3.0+
+```warning
+`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
+```
 
 ## Output in compact mode
 

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

@@ -2,9 +2,9 @@
 
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
 
-::: warning
+```warning
 This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
-:::
+```
 
 The things being connected are called nodes and the connections are called links.
 
@@ -13,6 +13,11 @@ The things being connected are called nodes and the connections are called links
 This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
 
 ```mermaid-example
+---
+config:
+  sankey:
+    showValues: false
+---
 sankey-beta
 
 Agricultural 'waste',Bio-conversion,124.729

packages/mermaid/src/schemas/config.schema.yaml

@@ -1510,10 +1510,10 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
           Pattern is:
 
           ```javascript
-          /^([1-9][0-9]*)(minute|hour|day|week|month)$/
+          /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/
           ```
         type: string
-        pattern: ^([1-9][0-9]*)(minute|hour|day|week|month)$
+        pattern: ^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$
       topAxis:
         description: |
           When this flag is set, date labels will be added to the top of the chart