From d2ed52461e40fe74ddb20893a6d40dbb66e729f1 Mon Sep 17 00:00:00 2001 From: Jonas Haag Date: Sun, 6 Aug 2023 13:44:09 +0200 Subject: [PATCH 1/8] Use utf8 encoding in Jupyter example mermaid.ink can render some UTF-8 characters --- packages/mermaid/src/docs/config/Tutorials.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/docs/config/Tutorials.md b/packages/mermaid/src/docs/config/Tutorials.md index c6db9dacf..2da336ab5 100644 --- a/packages/mermaid/src/docs/config/Tutorials.md +++ b/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") - base64_bytes = base64.b64encode(graphbytes) - base64_string = base64_bytes.decode("ascii") - display(Image(url="https://mermaid.ink/img/" + base64_string)) + graphbytes = graph.encode("utf8") + base64_bytes = base64.b64encode(graphbytes) + base64_string = base64_bytes.decode("ascii") + display(Image(url="https://mermaid.ink/img/" + base64_string)) mm(""" graph LR; From 8f340094d9913a01637f5ccd40484cccb1bdfebc Mon Sep 17 00:00:00 2001 From: Thomas Ingram Date: Sun, 27 Aug 2023 15:57:17 +1000 Subject: [PATCH 2/8] Added support for millisecond and second to gantt tickInterval --- packages/mermaid/src/config.type.ts | 2 +- .../mermaid/src/diagrams/gantt/ganttRenderer.js | 16 +++++++++++++++- packages/mermaid/src/docs/syntax/gantt.md | 2 +- packages/mermaid/src/schemas/config.schema.yaml | 4 ++-- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index a4bf6cca8..ca55d9af4 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1048,7 +1048,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)$/ * ``` * */ diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 522f59e2c..935ecc928 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/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; diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 6ddd011f6..2d7af6a26 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -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) diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index c0d239fb6..6f01d5715 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1524,10 +1524,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 From f6325f69067cc6c1c127b69e21075ff1eb1bbc08 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 28 Aug 2023 12:30:39 +0530 Subject: [PATCH 3/8] docs: Disable showValues in sankey example --- docs/syntax/sankey.md | 10 ++++++++++ packages/mermaid/src/docs/syntax/sankey.md | 5 +++++ 2 files changed, 15 insertions(+) diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md index 6f9e14d82..9b9fe2766 100644 --- a/docs/syntax/sankey.md +++ b/docs/syntax/sankey.md @@ -19,6 +19,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 +97,11 @@ Wind,Electricity grid,289.366 ``` ```mermaid +--- +config: + sankey: + showValues: false +--- sankey-beta Agricultural 'waste',Bio-conversion,124.729 diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index c5e7244c6..c4db0646f 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/packages/mermaid/src/docs/syntax/sankey.md @@ -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 From 02517e8a7d5bf527289f5db64fd13252344aaf49 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 28 Aug 2023 12:31:40 +0530 Subject: [PATCH 4/8] chore: Fix warning formatting --- docs/syntax/sankey.md | 5 ++--- packages/mermaid/src/docs/syntax/sankey.md | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md index 9b9fe2766..bcbc22795 100644 --- a/docs/syntax/sankey.md +++ b/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 -This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future. -::: +> **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. diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md index c4db0646f..93cc020a8 100644 --- a/packages/mermaid/src/docs/syntax/sankey.md +++ b/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. From 4efac6721dc3660878df997811a3a3ff6064ba66 Mon Sep 17 00:00:00 2001 From: Thomas Ingram Date: Mon, 28 Aug 2023 20:17:15 +1000 Subject: [PATCH 5/8] Added missing integration tests and release version in docs. --- cypress/integration/rendering/gantt.spec.js | 42 +++++++++++++++++++++ docs/syntax/gantt.md | 6 +-- packages/mermaid/src/docs/syntax/gantt.md | 6 ++- 3 files changed, 49 insertions(+), 5 deletions(-) diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 33d3ac9e1..7c1690952 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/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( ` diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 8ad438fb1..33c2740e5 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -241,7 +241,7 @@ The following formatting strings are supported: More info in: -### 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: @@ -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 diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 2d7af6a26..a0cebc560 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/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`. @@ -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 From bcd03151e8e4832a045d240daed398c7418b1481 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 6 Sep 2023 22:09:15 +0530 Subject: [PATCH 6/8] chore: Update docs --- docs/config/Tutorials.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/config/Tutorials.md b/docs/config/Tutorials.md index 8f6d7e1ab..cdfb74d92 100644 --- a/docs/config/Tutorials.md +++ b/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") - base64_bytes = base64.b64encode(graphbytes) - base64_string = base64_bytes.decode("ascii") - display(Image(url="https://mermaid.ink/img/" + base64_string)) + graphbytes = graph.encode("utf8") + base64_bytes = base64.b64encode(graphbytes) + base64_string = base64_bytes.decode("ascii") + display(Image(url="https://mermaid.ink/img/" + base64_string)) mm(""" graph LR; From 53dee702929ed4f82f70804b48c5a321ea7b9762 Mon Sep 17 00:00:00 2001 From: Oscar Andersson Date: Wed, 6 Sep 2023 19:34:20 +0200 Subject: [PATCH 7/8] Update flowchart.md (#4792) * Update flowchart.md Update from mermaid 8.4.8 to 10.4.0 for jsfiddle * Update flowchart.md * Update flowchart.md --- packages/mermaid/src/docs/syntax/flowchart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index a49e974ab..b0f1b9f0a 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -560,7 +560,7 @@ flowchart LR > **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): From 2eb9afa2f2b3fd490300ae46074023ab4a47bfc7 Mon Sep 17 00:00:00 2001 From: Douglas Blank Date: Wed, 6 Sep 2023 13:44:35 -0400 Subject: [PATCH 8/8] Update flowchart.md (#4798) * Update flowchart.md Fixed typos * docs: Fix proper doc * docs: Fix npmjs link --------- Co-authored-by: Sidharth Vinod --- docs/intro/index.md | 2 +- docs/syntax/flowchart.md | 8 ++++---- packages/mermaid/src/docs/intro/index.md | 2 +- packages/mermaid/src/docs/syntax/flowchart.md | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/intro/index.md b/docs/intro/index.md index 0197d7950..974003fd6 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -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 diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index ee635d451..4e68c53a9 100644 --- a/docs/syntax/flowchart.md +++ b/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 B href "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + 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 B href "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + 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. diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md index 8410ef1cb..84fec41f8 100644 --- a/packages/mermaid/src/docs/intro/index.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -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 diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 01a33cf40..00aa677a6 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -554,8 +554,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 B href "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + 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.