From 82ac6675357276d249f45b1b6e691285ed03c5d6 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Mon, 14 Nov 2022 10:03:24 +0100 Subject: [PATCH 01/11] Service functions added --- packages/mermaid/src/diagrams/pie/amonts.csv | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 packages/mermaid/src/diagrams/pie/amonts.csv diff --git a/packages/mermaid/src/diagrams/pie/amonts.csv b/packages/mermaid/src/diagrams/pie/amonts.csv new file mode 100644 index 000000000..25cf919dd --- /dev/null +++ b/packages/mermaid/src/diagrams/pie/amonts.csv @@ -0,0 +1,10 @@ +name,amounts +Foo, 33 +Rishab, 12 +Alexis, 41 +Tom, 16 +Courtney, 59 +Christina, 38 +Jack, 21 +Mickey, 25 +Paul, 30 From cdba2b4ac81947f5751de10311de2dfbe52c738e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 20 Dec 2022 10:56:39 +0530 Subject: [PATCH 02/11] Update CDN links --- README.md | 2 +- README.zh-CN.md | 2 +- docs/config/8.6.0_docs.md | 2 +- docs/config/usage.md | 2 +- docs/intro/index.md | 6 +++--- packages/mermaid/README.md | 2 +- packages/mermaid/README.zh-CN.md | 2 +- packages/mermaid/src/docs/config/8.6.0_docs.md | 2 +- packages/mermaid/src/docs/config/usage.md | 2 +- packages/mermaid/src/docs/intro/index.md | 6 +++--- 10 files changed, 14 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 9a500283c..ad98ee8bf 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include- For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md). -๐ŸŒ [CDN](https://unpkg.com/mermaid/) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [Changelog](./docs/CHANGELOG.md) +๐ŸŒ [CDN](https://www.jsdelivr.com/package/npm/mermaid) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [Changelog](./docs/CHANGELOG.md) In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests. diff --git a/README.zh-CN.md b/README.zh-CN.md index 4bdbc4ae7..415b4bf3e 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -28,7 +28,7 @@ Mermaid ็”š่‡ณ่ƒฝ่ฎฉ้ž็จ‹ๅบๅ‘˜ไนŸ่ƒฝ้€š่ฟ‡ [Mermaid Live Editor](https://merma ๅฆ‚ๆžœๆƒณ่ฆๆŸฅ็œ‹ๅ…ณไบŽ Mermaid ๆ›ด่ฏฆ็ป†็š„ไป‹็ปๅŠๅŸบ็ก€ไฝฟ็”จๆ–นๅผ๏ผŒๅฏไปฅๆŸฅ็œ‹ [ๅ…ฅ้—จๆŒ‡ๅผ•](./docs/community/n00b-overview.md), [็”จๆณ•](./docs/config/usage.md) ๅ’Œ [ๆ•™็จ‹](./docs/config/Tutorials.md). -๐ŸŒ [CDN](https://unpkg.com/mermaid/) | ๐Ÿ“– [ๆ–‡ๆกฃ](https://mermaidjs.github.io) | ๐Ÿ™Œ [่ดก็Œฎ](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [ๆ›ดๆ–ฐๆ—ฅๅฟ—](./docs/CHANGELOG.md) +๐ŸŒ [CDN](https://www.jsdelivr.com/package/npm/mermaid) | ๐Ÿ“– [ๆ–‡ๆกฃ](https://mermaidjs.github.io) | ๐Ÿ™Œ [่ดก็Œฎ](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [ๆ›ดๆ–ฐๆ—ฅๅฟ—](./docs/CHANGELOG.md) diff --git a/docs/config/8.6.0_docs.md b/docs/config/8.6.0_docs.md index abd158712..0b1d64112 100644 --- a/docs/config/8.6.0_docs.md +++ b/docs/config/8.6.0_docs.md @@ -8,7 +8,7 @@ ## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) -## [CDN](https://unpkg.com/mermaid/) +## [CDN](https://www.jsdelivr.com/package/npm/mermaid) With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation. diff --git a/docs/config/usage.md b/docs/config/usage.md index 476806d8f..59fc37c40 100644 --- a/docs/config/usage.md +++ b/docs/config/usage.md @@ -12,7 +12,7 @@ Diagrams can be re-rendered/modified by modifying their descriptions. ### CDN - + Please note that you can switch versions through the dropdown box at the top right. diff --git a/docs/intro/index.md b/docs/intro/index.md index 5aa068e27..25b3a5564 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -35,7 +35,7 @@ Use Mermaid with your favorite applications, check out the list of [Integrations For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md). -๐ŸŒ [CDN](https://unpkg.com/mermaid/) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](../community/development.md) | ๐Ÿ”Œ [Plug-Ins](../misc/integrations.md) +๐ŸŒ [CDN](https://www.jsdelivr.com/package/npm/mermaid) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](../community/development.md) | ๐Ÿ”Œ [Plug-Ins](../misc/integrations.md) > ๐Ÿ–– Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866). @@ -243,13 +243,13 @@ journey ### CDN - https://unpkg.com/mermaid@/dist/ + https://cdn.jsdelivr.net/npm@/dist/ To select a version: Replace `` with the desired version number. -Latest Version: +Latest Version: ## Deploying Mermaid diff --git a/packages/mermaid/README.md b/packages/mermaid/README.md index e6c7db608..d453d2ec0 100644 --- a/packages/mermaid/README.md +++ b/packages/mermaid/README.md @@ -33,7 +33,7 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include- For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md). -๐ŸŒ [CDN](https://unpkg.com/mermaid/) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [Changelog](./docs/CHANGELOG.md) +๐ŸŒ [CDN](https://www.jsdelivr.com/package/npm/mermaid) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [Changelog](./docs/CHANGELOG.md) In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests. diff --git a/packages/mermaid/README.zh-CN.md b/packages/mermaid/README.zh-CN.md index 0ccef27e4..2e91ffcc0 100644 --- a/packages/mermaid/README.zh-CN.md +++ b/packages/mermaid/README.zh-CN.md @@ -28,7 +28,7 @@ Mermaid ็”š่‡ณ่ƒฝ่ฎฉ้ž็จ‹ๅบๅ‘˜ไนŸ่ƒฝ้€š่ฟ‡ [Mermaid Live Editor](https://merma ๅฆ‚ๆžœๆƒณ่ฆๆŸฅ็œ‹ๅ…ณไบŽ Mermaid ๆ›ด่ฏฆ็ป†็š„ไป‹็ปๅŠๅŸบ็ก€ไฝฟ็”จๆ–นๅผ๏ผŒๅฏไปฅๆŸฅ็œ‹ [ๅ…ฅ้—จๆŒ‡ๅผ•](./docs/n00b-overview.md), [็”จๆณ•](./docs/usage.md) ๅ’Œ [ๆ•™็จ‹](./docs/Tutorials.md). -๐ŸŒ [CDN](https://unpkg.com/mermaid/) | ๐Ÿ“– [ๆ–‡ๆกฃ](https://mermaidjs.github.io) | ๐Ÿ™Œ [่ดก็Œฎ](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [ๆ›ดๆ–ฐๆ—ฅๅฟ—](./docs/CHANGELOG.md) +๐ŸŒ [CDN](https://www.jsdelivr.com/package/npm/mermaid) | ๐Ÿ“– [ๆ–‡ๆกฃ](https://mermaidjs.github.io) | ๐Ÿ™Œ [่ดก็Œฎ](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | ๐Ÿ“œ [ๆ›ดๆ–ฐๆ—ฅๅฟ—](./docs/CHANGELOG.md) diff --git a/packages/mermaid/src/docs/config/8.6.0_docs.md b/packages/mermaid/src/docs/config/8.6.0_docs.md index bc19e08d5..7b470eab8 100644 --- a/packages/mermaid/src/docs/config/8.6.0_docs.md +++ b/packages/mermaid/src/docs/config/8.6.0_docs.md @@ -2,7 +2,7 @@ ## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) -## [CDN](https://unpkg.com/mermaid/) +## [CDN](https://www.jsdelivr.com/package/npm/mermaid) With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation. diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md index 3eac4ad6f..4aff83632 100644 --- a/packages/mermaid/src/docs/config/usage.md +++ b/packages/mermaid/src/docs/config/usage.md @@ -6,7 +6,7 @@ Diagrams can be re-rendered/modified by modifying their descriptions. ### CDN -[https://unpkg.com/mermaid/](https://unpkg.com/mermaid/) +[https://www.jsdelivr.com/package/npm/mermaid](https://www.jsdelivr.com/package/npm/mermaid) Please note that you can switch versions through the dropdown box at the top right. diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md index df1aa3b62..5783b802f 100644 --- a/packages/mermaid/src/docs/intro/index.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -30,7 +30,7 @@ Use Mermaid with your favorite applications, check out the list of [Integrations For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md). -๐ŸŒ [CDN](https://unpkg.com/mermaid/) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](../community/development.md) | ๐Ÿ”Œ [Plug-Ins](../misc/integrations.md) +๐ŸŒ [CDN](https://www.jsdelivr.com/package/npm/mermaid) | ๐Ÿ“– [Documentation](https://mermaidjs.github.io) | ๐Ÿ™Œ [Contribution](../community/development.md) | ๐Ÿ”Œ [Plug-Ins](../misc/integrations.md) > ๐Ÿ–– Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866). @@ -55,14 +55,14 @@ In our release process we rely heavily on visual regression tests using [applito ### CDN ``` -https://unpkg.com/mermaid@/dist/ +@/dist/ ``` To select a version: Replace `` with the desired version number. -Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/) +Latest Version: [/mermaid@](/mermaid@) ## Deploying Mermaid From 74df4a7a68364428e17b8332aff09e8e9a0f07dc Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 8 Feb 2023 17:42:58 +0100 Subject: [PATCH 03/11] Mind map coming in from the cold. A lazy loaded diagram in the same way as timeline. --- .vite/build.ts | 10 +- .vite/server.ts | 2 +- .../other/external-diagrams.spec.js | 4 +- ...=> external-diagrams-example-diagram.html} | 32 +--- cypress/platform/knsv2.html | 12 +- cypress/platform/knsv3.html | 142 +++++++++--------- cypress/platform/viewer.js | 4 +- package.json | 2 +- packages/mermaid-example-diagram/Readme.md | 3 - packages/mermaid-example-diagram/package.json | 39 +++-- .../mermaid-example-diagram/src/detector.ts | 22 +-- .../src/diagram-definition.ts | 2 - .../src/exampleDiagram.spec.js | 14 +- .../src/mermaidUtils.ts | 32 ++-- .../mermaid-example-diagram/tsconfig.json | 1 + packages/mermaid-mindmap/package.json | 65 -------- packages/mermaid-mindmap/src/mermaidUtils.ts | 59 -------- packages/mermaid-mindmap/tsconfig.json | 10 -- packages/mermaid/package.json | 4 + .../mermaid/src/diagram-api/detectType.ts | 5 +- .../src/diagram-api/diagram-orchestration.ts | 5 +- .../src/diagrams/mindmap}/detector.ts | 3 +- .../diagrams/mindmap}/diagram-definition.ts | 2 - .../src/diagrams/mindmap}/mindmap.spec.js | 14 +- .../src/diagrams/mindmap}/mindmapDb.js | 7 +- .../src/diagrams/mindmap}/mindmapRenderer.js | 4 +- .../diagrams/mindmap}/parser/mindmap.jison | 0 .../src/diagrams/mindmap}/styles.js | 0 .../src/diagrams/mindmap}/svgDraw.js | 0 .../src/diagrams/mindmap}/types/index.d.ts | 0 .../src/docs/.vitepress/theme/mermaid.ts | 4 +- packages/mermaid/src/docs/vite.config.ts | 4 +- pnpm-lock.yaml | 41 +++-- tests/webpack/package.json | 2 +- 34 files changed, 206 insertions(+), 344 deletions(-) rename cypress/platform/{external-diagrams-mindmap.html => external-diagrams-example-diagram.html} (60%) delete mode 100644 packages/mermaid-example-diagram/Readme.md delete mode 100644 packages/mermaid-mindmap/package.json delete mode 100644 packages/mermaid-mindmap/src/mermaidUtils.ts delete mode 100644 packages/mermaid-mindmap/tsconfig.json rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/detector.ts (81%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/diagram-definition.ts (84%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/mindmap.spec.js (98%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/mindmapDb.js (93%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/mindmapRenderer.js (97%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/parser/mindmap.jison (100%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/styles.js (100%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/svgDraw.js (100%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/types/index.d.ts (100%) diff --git a/.vite/build.ts b/.vite/build.ts index 019461c49..c9d44219f 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -36,9 +36,9 @@ const packageOptions = { packageName: 'mermaid', file: 'mermaid.ts', }, - 'mermaid-mindmap': { - name: 'mermaid-mindmap', - packageName: 'mermaid-mindmap', + 'mermaid-example-diagram': { + name: 'mermaid-example-diagram', + packageName: 'mermaid-example-diagram', file: 'detector.ts', }, }; @@ -114,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) if (watch && config.build) { config.build.watch = { - include: ['packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**'], + include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'], }; } @@ -139,7 +139,7 @@ const main = async () => { if (watch) { build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' })); if (!mermaidOnly) { - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); } } else if (visualize) { await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' })); diff --git a/.vite/server.ts b/.vite/server.ts index aced396ec..0f1fef91d 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -22,7 +22,7 @@ async function createServer() { app.use(cors); app.use(express.static('./packages/mermaid/dist')); // app.use(express.static('./packages/mermaid-example-diagram/dist')); - app.use(express.static('./packages/mermaid-mindmap/dist')); + app.use(express.static('./packages/mermaid-example-diagram/dist')); app.use(vite.middlewares); app.use(express.static('demos')); app.use(express.static('cypress/platform')); diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index be69dfc98..c94235162 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -2,8 +2,8 @@ import { urlSnapshotTest } from '../../helpers/util'; describe('mermaid', () => { describe('registerDiagram', () => { - it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => { - const url = 'http://localhost:9000/external-diagrams-mindmap.html'; + it('should work on @mermaid-js/mermaid-example-diagram', () => { + const url = 'http://localhost:9000/external-diagrams-example-diagram.html'; urlSnapshotTest(url, {}, false, false); }); }); diff --git a/cypress/platform/external-diagrams-mindmap.html b/cypress/platform/external-diagrams-example-diagram.html similarity index 60% rename from cypress/platform/external-diagrams-mindmap.html rename to cypress/platform/external-diagrams-example-diagram.html index e445a7627..9d2cad778 100644 --- a/cypress/platform/external-diagrams-mindmap.html +++ b/cypress/platform/external-diagrams-example-diagram.html @@ -2,34 +2,8 @@

Should correctly load a third-party diagram using registerDiagram

-mindmap
-  root
-    A
-    B
-    C
-    D
-    E
-    A2
-    B2
-    C2
-    D2
-    E2
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand
child 6)) - ::icon(mdi mdi-fire) - gc7((grand
grand
child 8)) +example-diagram
- @@ -37,11 +11,11 @@ mindmap diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 01b49435f..4d7db84f7 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -1,5 +1,5 @@ import mermaid2 from '../../packages/mermaid/src/mermaid'; -import mindmap from '../../packages/mermaid-mindmap/src/detector'; +import externalExample from '../../packages/mermaid-example-diagram/src/detector'; function b64ToUtf8(str) { return decodeURIComponent(escape(window.atob(str))); @@ -44,7 +44,7 @@ const contentLoaded = async function () { document.getElementsByTagName('body')[0].appendChild(div); } - await mermaid2.registerExternalDiagrams([mindmap]); + await mermaid2.registerExternalDiagrams([externalExample]); mermaid2.initialize(graphObj.mermaid); await mermaid2.init(); markRendered(); diff --git a/package.json b/package.json index e7cb9bdf0..c96f2c8d7 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "build:vite": "ts-node-esm --transpileOnly .vite/build.ts", "build:mermaid": "pnpm build:vite --mermaid", "build:viz": "pnpm build:mermaid --visualize", - "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly", + "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagran/tsconfig.json --emitDeclarationOnly", "build:watch": "pnpm build:vite --watch", "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", diff --git a/packages/mermaid-example-diagram/Readme.md b/packages/mermaid-example-diagram/Readme.md deleted file mode 100644 index 38056e3c7..000000000 --- a/packages/mermaid-example-diagram/Readme.md +++ /dev/null @@ -1,3 +0,0 @@ -### Do not refer this package. It is not ready. - -### Refer mermaid-mindmap instead. diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json index 8e958806a..c4d3a57cc 100644 --- a/packages/mermaid-example-diagram/package.json +++ b/packages/mermaid-example-diagram/package.json @@ -1,36 +1,25 @@ { "name": "@mermaid-js/mermaid-example-diagram", - "version": "9.2.0-rc2", - "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", - "main": "dist/mermaid-mindmap.core.mjs", - "module": "dist/mermaid-mindmap.core.mjs", + "version": "9.3.0", + "description": "Example of external diagram module for MermaidJS.", + "module": "dist/mermaid-example-diagram.core.mjs", + "types": "dist/detector.d.ts", "type": "module", "exports": { ".": { - "require": "./dist/mermaid-example-diagram.min.js", - "import": "./dist/mermaid-example-diagram.core.mjs" + "import": "./dist/mermaid-example-diagram.core.mjs", + "types": "./dist/detector.d.ts" }, "./*": "./*" }, "keywords": [ "diagram", "markdown", - "mindmap", + "example", "mermaid" ], "scripts": { - "clean": "rimraf dist", - "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly", - "build:watch": "yarn build:code --watch", - "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"", - "build": "yarn clean; yarn build:esbuild", - "dev": "node .esbuild/serve.cjs", - "release": "yarn build", - "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .", - "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .", - "lint:jison": "ts-node-esm src/jison/lint.mts", - "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"", - "todo-pre-commit": "lint-staged" + "prepublishOnly": "pnpm -w run build" }, "repository": { "type": "git", @@ -48,9 +37,19 @@ "page" ] }, - "dependencies": {}, + "dependencies": { + "@braintree/sanitize-url": "^6.0.0", + "cytoscape": "^3.23.0", + "cytoscape-cose-bilkent": "^4.1.0", + "cytoscape-fcose": "^2.1.0", + "d3": "^7.0.0", + "khroma": "^2.0.0", + "non-layered-tidy-tree-layout": "^2.0.2" + }, "devDependencies": { + "@types/cytoscape": "^3.19.9", "concurrently": "^7.5.0", + "mermaid": "workspace:*", "rimraf": "^3.0.2" }, "resolutions": { diff --git a/packages/mermaid-example-diagram/src/detector.ts b/packages/mermaid-example-diagram/src/detector.ts index d30b99fba..fdf7345bb 100644 --- a/packages/mermaid-example-diagram/src/detector.ts +++ b/packages/mermaid-example-diagram/src/detector.ts @@ -1,18 +1,20 @@ -// @ts-ignore: TODO Fix ts errors -export const id = 'example-diagram'; +import type { ExternalDiagramDefinition } from 'mermaid'; -/** - * Detector function that will be called by mermaid to determine if the diagram is this type of diagram. - * - * @param txt - The diagram text will be passed to the detector - * @returns True if the diagram text matches a diagram of this type - */ +const id = 'example-diagram'; -export const detector = (txt: string) => { +const detector = (txt: string) => { return txt.match(/^\s*example-diagram/) !== null; }; -export const loadDiagram = async () => { +const loader = async () => { const { diagram } = await import('./diagram-definition'); return { id, diagram }; }; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid-example-diagram/src/diagram-definition.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts index 95f7cc11d..c31b3d6e7 100644 --- a/packages/mermaid-example-diagram/src/diagram-definition.ts +++ b/packages/mermaid-example-diagram/src/diagram-definition.ts @@ -12,5 +12,3 @@ export const diagram = { styles, injectUtils, }; - -export { detector, id } from './detector'; diff --git a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js index db539aac0..96c8cd5b2 100644 --- a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js +++ b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js @@ -1,5 +1,17 @@ import { parser } from './parser/exampleDiagram'; -import db from './exampleDiagramDb'; +import * as db from './exampleDiagramDb'; +import { injectUtils } from './mermaidUtils'; +// Todo fix utils functions for tests +import { + log, + setLogLevel, + getConfig, + sanitizeText, + setupGraphViewBox, +} from '../../mermaid/src/diagram-api/diagramAPI'; + +injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox); + describe('when parsing an info graph it', function () { let ex; beforeEach(function () { diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts index 9ba66be5a..44cc85f73 100644 --- a/packages/mermaid-example-diagram/src/mermaidUtils.ts +++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts @@ -1,4 +1,8 @@ -const warning = () => null; +const warning = (s: string) => { + // Todo remove debug code + // eslint-disable-next-line no-console + console.error('Log function was called before initialization', s); +}; export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; @@ -19,13 +23,11 @@ export const log: Record = { error: warning, fatal: warning, }; + export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; export let getConfig: () => object; export let sanitizeText: (str: string) => string; -export let commonDb: any; -/** - * Placeholder for the real function that will be injected by mermaid. - */ +export let commonDb: () => object; // eslint-disable @typescript-eslint/no-explicit-any export let setupGraphViewbox: ( graph: any, @@ -34,25 +36,15 @@ export let setupGraphViewbox: ( useMaxWidth: boolean ) => void; -/** - * Function called by mermaid that injects utility functions that help the diagram to be a good citizen. - * - * @param _log - log from mermaid/src/diagramAPI.ts - * @param _setLogLevel - setLogLevel from mermaid/src/diagramAPI.ts - * @param _getConfig - getConfig from mermaid/src/diagramAPI.ts - * @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts - * @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts - * @param _commonDb -`commonDb` from mermaid/src/diagramAPI.ts - */ export const injectUtils = ( _log: Record, - _setLogLevel: typeof setLogLevel, - _getConfig: typeof getConfig, - _sanitizeText: typeof sanitizeText, - _setupGraphViewbox: typeof setupGraphViewbox, + _setLogLevel: any, + _getConfig: any, + _sanitizeText: any, + _setupGraphViewbox: any, _commonDb: any ) => { - _log.info('Mermaid utils injected into timeline-diagram'); + _log.info('Mermaid utils injected'); log.trace = _log.trace; log.debug = _log.debug; log.info = _log.info; diff --git a/packages/mermaid-example-diagram/tsconfig.json b/packages/mermaid-example-diagram/tsconfig.json index 45076b7b5..310137cc0 100644 --- a/packages/mermaid-example-diagram/tsconfig.json +++ b/packages/mermaid-example-diagram/tsconfig.json @@ -1,5 +1,6 @@ { "extends": "../../tsconfig.json", + "module": "esnext", "compilerOptions": { "rootDir": "./src", "outDir": "./dist" diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json deleted file mode 100644 index e79e2df4f..000000000 --- a/packages/mermaid-mindmap/package.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "name": "@mermaid-js/mermaid-mindmap", - "version": "9.3.0", - "description": "Mindmap diagram module for MermaidJS.", - "module": "dist/mermaid-mindmap.core.mjs", - "types": "dist/detector.d.ts", - "type": "module", - "exports": { - ".": { - "import": "./dist/mermaid-mindmap.core.mjs", - "types": "./dist/detector.d.ts" - }, - "./*": "./*" - }, - "keywords": [ - "diagram", - "markdown", - "mindmap", - "mermaid" - ], - "scripts": { - "prepublishOnly": "pnpm -w run build" - }, - "repository": { - "type": "git", - "url": "https://github.com/mermaid-js/mermaid" - }, - "author": "Knut Sveidqvist", - "license": "MIT", - "standard": { - "ignore": [ - "**/parser/*.js", - "dist/**/*.js", - "cypress/**/*.js" - ], - "globals": [ - "page" - ] - }, - "dependencies": { - "@braintree/sanitize-url": "^6.0.0", - "cytoscape": "^3.23.0", - "cytoscape-cose-bilkent": "^4.1.0", - "cytoscape-fcose": "^2.1.0", - "d3": "^7.0.0", - "khroma": "^2.0.0", - "non-layered-tidy-tree-layout": "^2.0.2" - }, - "devDependencies": { - "@types/cytoscape": "^3.19.9", - "concurrently": "^7.5.0", - "mermaid": "workspace:*", - "rimraf": "^3.0.2" - }, - "resolutions": { - "d3": "^7.0.0" - }, - "files": [ - "dist" - ], - "sideEffects": [ - "**/*.css", - "**/*.scss" - ] -} diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts deleted file mode 100644 index 44cc85f73..000000000 --- a/packages/mermaid-mindmap/src/mermaidUtils.ts +++ /dev/null @@ -1,59 +0,0 @@ -const warning = (s: string) => { - // Todo remove debug code - // eslint-disable-next-line no-console - console.error('Log function was called before initialization', s); -}; - -export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; - -export const LEVELS: Record = { - trace: 0, - debug: 1, - info: 2, - warn: 3, - error: 4, - fatal: 5, -}; - -export const log: Record = { - trace: warning, - debug: warning, - info: warning, - warn: warning, - error: warning, - fatal: warning, -}; - -export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; -export let getConfig: () => object; -export let sanitizeText: (str: string) => string; -export let commonDb: () => object; -// eslint-disable @typescript-eslint/no-explicit-any -export let setupGraphViewbox: ( - graph: any, - svgElem: any, - padding: any, - useMaxWidth: boolean -) => void; - -export const injectUtils = ( - _log: Record, - _setLogLevel: any, - _getConfig: any, - _sanitizeText: any, - _setupGraphViewbox: any, - _commonDb: any -) => { - _log.info('Mermaid utils injected'); - log.trace = _log.trace; - log.debug = _log.debug; - log.info = _log.info; - log.warn = _log.warn; - log.error = _log.error; - log.fatal = _log.fatal; - setLogLevel = _setLogLevel; - getConfig = _getConfig; - sanitizeText = _sanitizeText; - setupGraphViewbox = _setupGraphViewbox; - commonDb = _commonDb; -}; diff --git a/packages/mermaid-mindmap/tsconfig.json b/packages/mermaid-mindmap/tsconfig.json deleted file mode 100644 index 310137cc0..000000000 --- a/packages/mermaid-mindmap/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "module": "esnext", - "compilerOptions": { - "rootDir": "./src", - "outDir": "./dist" - }, - "include": ["./src/**/*.ts"], - "typeRoots": ["./src/types"] -} diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 3dd6c5af0..cae7d43a8 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -53,6 +53,9 @@ }, "dependencies": { "@braintree/sanitize-url": "^6.0.0", + "cytoscape": "^3.23.0", + "cytoscape-cose-bilkent": "^4.1.0", + "cytoscape-fcose": "^2.1.0", "d3": "^7.0.0", "dagre-d3-es": "7.0.8", "dompurify": "2.4.3", @@ -66,6 +69,7 @@ "uuid": "^9.0.0" }, "devDependencies": { + "@types/cytoscape": "^3.19.9", "@types/d3": "^7.4.0", "@types/dompurify": "^2.4.0", "@types/jsdom": "^20.0.1", diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts index 92291e282..b75e914fb 100644 --- a/packages/mermaid/src/diagram-api/detectType.ts +++ b/packages/mermaid/src/diagram-api/detectType.ts @@ -55,9 +55,10 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => { if (detectors[key]) { - throw new Error(`Detector with key ${key} already exists`); + log.error(`Detector with key ${key} already exists`); + } else { + detectors[key] = { detector, loader }; } - detectors[key] = { detector, loader }; log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`); }; diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 81ddb6163..a68e99dd0 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -96,7 +96,10 @@ import errorStyles from '../diagrams/error/styles'; import flowchartElk from '../diagrams/flowchart/elk/detector'; import { registerLazyLoadedDiagrams } from './detectType'; +// Lazy loaded diagrams import timelineDetector from '../diagrams/timeline/detector'; +import mindmapDetector from '../diagrams/mindmap/detector'; + let hasLoadedDiagrams = false; export const addDiagrams = () => { if (hasLoadedDiagrams) { @@ -105,7 +108,7 @@ export const addDiagrams = () => { // This is added here to avoid race-conditions. // We could optimize the loading logic somehow. hasLoadedDiagrams = true; - registerLazyLoadedDiagrams(flowchartElk, timelineDetector); + registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector); registerDiagram( 'error', diff --git a/packages/mermaid-mindmap/src/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts similarity index 81% rename from packages/mermaid-mindmap/src/detector.ts rename to packages/mermaid/src/diagrams/mindmap/detector.ts index da3caf51e..82664225b 100644 --- a/packages/mermaid-mindmap/src/detector.ts +++ b/packages/mermaid/src/diagrams/mindmap/detector.ts @@ -1,5 +1,4 @@ -import type { ExternalDiagramDefinition } from 'mermaid'; - +import type { ExternalDiagramDefinition } from '../../diagram-api/types'; const id = 'mindmap'; const detector = (txt: string) => { diff --git a/packages/mermaid-mindmap/src/diagram-definition.ts b/packages/mermaid/src/diagrams/mindmap/diagram-definition.ts similarity index 84% rename from packages/mermaid-mindmap/src/diagram-definition.ts rename to packages/mermaid/src/diagrams/mindmap/diagram-definition.ts index e7856289d..61b41d347 100644 --- a/packages/mermaid-mindmap/src/diagram-definition.ts +++ b/packages/mermaid/src/diagrams/mindmap/diagram-definition.ts @@ -3,12 +3,10 @@ import mindmapParser from './parser/mindmap'; import * as mindmapDb from './mindmapDb'; import mindmapRenderer from './mindmapRenderer'; import mindmapStyles from './styles'; -import { injectUtils } from './mermaidUtils'; export const diagram = { db: mindmapDb, renderer: mindmapRenderer, parser: mindmapParser, styles: mindmapStyles, - injectUtils, }; diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js similarity index 98% rename from packages/mermaid-mindmap/src/mindmap.spec.js rename to packages/mermaid/src/diagrams/mindmap/mindmap.spec.js index 753804a5d..8c90f774f 100644 --- a/packages/mermaid-mindmap/src/mindmap.spec.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js @@ -1,16 +1,16 @@ import { parser as mindmap } from './parser/mindmap'; import * as mindmapDB from './mindmapDb'; -import { injectUtils } from './mermaidUtils'; +// import { injectUtils } from './mermaidUtils'; // Todo fix utils functions for tests import { - log, + // log, setLogLevel, - getConfig, - sanitizeText, - setupGraphViewBox, -} from '../../mermaid/src/diagram-api/diagramAPI'; + // getConfig, + // sanitizeText, + // setupGraphViewBox, +} from '../../diagram-api/diagramAPI'; -injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox); +// injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox); describe('when parsing a mindmap ', function () { beforeEach(function () { diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js similarity index 93% rename from packages/mermaid-mindmap/src/mindmapDb.js rename to packages/mermaid/src/diagrams/mindmap/mindmapDb.js index 16861cd23..71aa449d9 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js @@ -1,5 +1,8 @@ -/** Created by knut on 15-01-14. */ -import { sanitizeText, getConfig, log } from './mermaidUtils'; +import { getConfig } from '../../config'; +import { sanitizeText as _sanitizeText } from '../../diagrams/common/common'; +import { log } from '../../logger'; + +export const sanitizeText = (text) => _sanitizeText(text, getConfig()); let nodes = []; let cnt = 0; diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js similarity index 97% rename from packages/mermaid-mindmap/src/mindmapRenderer.js rename to packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 6ffe80f5e..0e68a1015 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -1,6 +1,8 @@ /** Created by knut on 14-12-11. */ import { select } from 'd3'; -import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; +import { log } from '../../logger'; +import { getConfig } from '../../config'; +import { setupGraphViewbox } from '../../setupGraphViewbox'; import svgDraw from './svgDraw'; import cytoscape from 'cytoscape'; import coseBilkent from 'cytoscape-cose-bilkent'; diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison similarity index 100% rename from packages/mermaid-mindmap/src/parser/mindmap.jison rename to packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid/src/diagrams/mindmap/styles.js similarity index 100% rename from packages/mermaid-mindmap/src/styles.js rename to packages/mermaid/src/diagrams/mindmap/styles.js diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js similarity index 100% rename from packages/mermaid-mindmap/src/svgDraw.js rename to packages/mermaid/src/diagrams/mindmap/svgDraw.js diff --git a/packages/mermaid-mindmap/src/types/index.d.ts b/packages/mermaid/src/diagrams/mindmap/types/index.d.ts similarity index 100% rename from packages/mermaid-mindmap/src/types/index.d.ts rename to packages/mermaid/src/diagrams/mindmap/types/index.d.ts diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index dd55d6782..52c9e88f2 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -1,10 +1,10 @@ import mermaid, { type MermaidConfig } from 'mermaid'; -import mindmap from '@mermaid-js/mermaid-mindmap'; +// import mindmap from '@mermaid-js/mermaid-mindmap'; // import timeline from '@mermaid-js/mermaid-timeline'; const init = (async () => { try { - await mermaid.registerExternalDiagrams([mindmap, timeline]); + await mermaid.registerExternalDiagrams([]); } catch (e) { console.error(e); } diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts index 356e9398c..3f29b497d 100644 --- a/packages/mermaid/src/docs/vite.config.ts +++ b/packages/mermaid/src/docs/vite.config.ts @@ -32,9 +32,9 @@ export default defineConfig({ alias: { mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build - '@mermaid-js/mermaid-mindmap': path.join( + '@mermaid-js/mermaid-example-diagram': path.join( __dirname, - '../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs' + '../../../mermaid-example-diagram/dist/mermaid-example-diagram.esm.min.mjs' ), // Use this one to build // '@mermaid-js/mermaid-timeline': path.join( // __dirname, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 961304828..eee2aea41 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -169,6 +169,15 @@ importers: '@braintree/sanitize-url': specifier: ^6.0.0 version: 6.0.0 + cytoscape: + specifier: ^3.23.0 + version: 3.23.0 + cytoscape-cose-bilkent: + specifier: ^4.1.0 + version: 4.1.0_cytoscape@3.23.0 + cytoscape-fcose: + specifier: ^2.1.0 + version: 2.1.0_cytoscape@3.23.0 d3: specifier: ^7.0.0 version: 7.6.1 @@ -203,6 +212,9 @@ importers: specifier: ^9.0.0 version: 9.0.0 devDependencies: + '@types/cytoscape': + specifier: ^3.19.9 + version: 3.19.9 '@types/d3': specifier: ^7.4.0 version: 7.4.0 @@ -304,15 +316,6 @@ importers: version: 1.0.4-alpha.16_ifjhkyx3os4sbm7zdnvthc52am packages/mermaid-example-diagram: - devDependencies: - concurrently: - specifier: ^7.5.0 - version: 7.5.0 - rimraf: - specifier: ^3.0.2 - version: 3.0.2 - - packages/mermaid-mindmap: dependencies: '@braintree/sanitize-url': specifier: ^6.0.0 @@ -328,7 +331,7 @@ importers: version: 2.1.0_cytoscape@3.23.0 d3: specifier: ^7.0.0 - version: 7.6.1 + version: 7.8.2 khroma: specifier: ^2.0.0 version: 2.0.0 @@ -349,27 +352,23 @@ importers: specifier: ^3.0.2 version: 3.0.2 - packages/mermaid-timeline: - dependencies: - d3: - specifier: ^7.0.0 - version: 7.6.1 - khroma: - specifier: ^2.0.0 - version: 2.0.0 + packages/mermaid-example-diagram-new: devDependencies: concurrently: - specifier: ^7.4.0 + specifier: ^7.5.0 version: 7.5.0 + mermaid: + specifier: workspace:* + version: link:../mermaid rimraf: specifier: ^3.0.2 version: 3.0.2 tests/webpack: dependencies: - '@mermaid-js/mermaid-mindmap': + '@mermaid-js/mermaid-example-diagram': specifier: workspace:* - version: link:../../packages/mermaid-mindmap + version: link:../../packages/mermaid-example-diagram-new mermaid: specifier: workspace:* version: link:../../packages/mermaid diff --git a/tests/webpack/package.json b/tests/webpack/package.json index c58f456a6..e51845399 100644 --- a/tests/webpack/package.json +++ b/tests/webpack/package.json @@ -18,6 +18,6 @@ }, "dependencies": { "mermaid": "workspace:*", - "@mermaid-js/mermaid-mindmap": "workspace:*" + "@mermaid-js/mermaid-example-diagram": "workspace:*" } } From e0286be8d27ba070e8e60cc235311bdba4c9c513 Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Fri, 10 Feb 2023 08:58:58 +0100 Subject: [PATCH 04/11] Corrected typo --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c96f2c8d7..d3438794a 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "build:vite": "ts-node-esm --transpileOnly .vite/build.ts", "build:mermaid": "pnpm build:vite --mermaid", "build:viz": "pnpm build:mermaid --visualize", - "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagran/tsconfig.json --emitDeclarationOnly", + "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly", "build:watch": "pnpm build:vite --watch", "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", From a956be7bbf337987e5c89b041afcfbe621e549fc Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Fri, 10 Feb 2023 11:03:25 +0100 Subject: [PATCH 05/11] Release candidate --- package.json | 2 +- packages/mermaid/package.json | 2 +- pnpm-lock.yaml | 14 +------------- 3 files changed, 3 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index d3438794a..ca421afd5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mermaid-monorepo", "private": true, - "version": "9.3.0-rc1", + "version": "9.4.0", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "packageManager": "pnpm@7.25.1", diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index cae7d43a8..e723dcd6f 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "9.3.0", + "version": "9.4.0-rc.2", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "./dist/mermaid.min.js", "module": "./dist/mermaid.core.mjs", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eee2aea41..d2048997a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -352,23 +352,11 @@ importers: specifier: ^3.0.2 version: 3.0.2 - packages/mermaid-example-diagram-new: - devDependencies: - concurrently: - specifier: ^7.5.0 - version: 7.5.0 - mermaid: - specifier: workspace:* - version: link:../mermaid - rimraf: - specifier: ^3.0.2 - version: 3.0.2 - tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': specifier: workspace:* - version: link:../../packages/mermaid-example-diagram-new + version: link:../../packages/mermaid-example-diagram mermaid: specifier: workspace:* version: link:../../packages/mermaid From 027296df680f67feef5373c9581c09734846b275 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 15 Feb 2023 13:54:33 +0100 Subject: [PATCH 06/11] Working version before applying direction logic --- cypress/platform/knsv2.html | 20 ++- packages/mermaid/src/dagre-wrapper/nodes.js | 1 + .../flowchart/elk/flowRenderer-elk.js | 160 +++++++++++++++++- 3 files changed, 170 insertions(+), 11 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index ec9baed8f..05c79d82d 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -54,13 +54,17 @@ -
+    
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-graph TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
+graph RL
+a{The cat in the hat} -- 1o --> b
+a -- 2o --> c
+a -- 3o --> d
+g --2i--> a
+d --1i--> a
+h --3i -->a
+b --> d(The dog in the hog)
+c --> d
     
 flowchart-elk TB
@@ -227,7 +231,7 @@ sequenceDiagram
     Customer->>+Merchant: Receives goods or services
         
-
+    
 mindmap
   root((mindmap))
     Origins
@@ -247,7 +251,7 @@ mindmap
       Mermaid
     

-
+    
   example-diagram
     
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 694ba074d..5bd18d077 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -1007,6 +1007,7 @@ const class_box = (parent, node) => { }; const shapes = { + rhombus: question, question, rect, labelRect, diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 19ca0ccc1..d2960129b 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -13,6 +13,8 @@ import { interpolateToCurve, getStylesFromArray } from '../../../utils'; import ELK from 'elkjs/lib/elk.bundled.js'; const elk = new ELK(); +const portPos = {}; + const conf = {}; export const setConf = function (cnf) { const keys = Object.keys(cnf); @@ -95,8 +97,36 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook labelData.labelNode = vertexNode; } + const ports = [ + { + id: vertex.id + '-west', + layoutOptions: { + 'port.side': 'WEST', + }, + }, + { + id: vertex.id + '-east', + layoutOptions: { + 'port.side': 'EAST', + }, + }, + { + id: vertex.id + '-south', + layoutOptions: { + 'port.side': 'SOUTH', + }, + }, + { + id: vertex.id + '-north', + layoutOptions: { + 'port.side': 'NORTH', + }, + }, + ]; + let radious = 0; let _shape = ''; + let layoutOptions = {}; // Set the shape based parameters switch (vertex.type) { case 'round': @@ -108,6 +138,9 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook break; case 'diamond': _shape = 'question'; + layoutOptions = { + portConstraints: 'FIXED_SIDE', + }; break; case 'hexagon': _shape = 'hexagon'; @@ -184,8 +217,10 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook const data = { id: vertex.id, + ports: vertex.type === 'diamond' ? ports : [], // labelStyle: styles.labelStyle, // shape: _shape, + layoutOptions, labelText: vertexText, labelData, // labels: [{ text: vertexText }], @@ -235,6 +270,83 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook return graph; }; +const getNextPosition = (position, direction) => { + if (direction === 'in') { + // switch (position) { + // case 'north': + // return 'east'; + // case 'east': + // return 'west'; + // case 'west': + // return 'south'; + // case 'south': + // return 'north'; + // default: + // return 'north'; + // } + return 'north'; + } else { + switch (position) { + case 'south': + return 'west'; + case 'west': + return 'east'; + case 'east': + return 'south'; + // case 'north': + // return 'south'; + default: + return 'south'; + } + } +}; + +const getNextPort = (node, direction) => { + if (!portPos[node]) { + portPos[node] = { + inPosition: 'north', + outPosition: 'south', + }; + } + const result = direction === 'in' ? portPos[node].inPosition : portPos[node].outPosition; + + if (direction === 'in') { + portPos[node].inPosition = getNextPosition(portPos[node].inPosition, direction); + } else { + portPos[node].outPosition = getNextPosition(portPos[node].outPosition, direction); + } + return result; +}; + +const getEdgeStartEndPoint = (edge) => { + let source = edge.start; + let target = edge.end; + + const startNode = nodeDb[source]; + const endNode = nodeDb[target]; + console.log('getEdgeStartEndPoint abc77', { source, target, startNode, endNode }); + + if (!startNode || !endNode) { + return { source, target }; + } + + if (startNode.type === 'diamond') { + source = `${source}-${getNextPort(source, 'out')}`; + } + + if (endNode.type === 'diamond') { + target = `${target}-${getNextPort(target, 'in')}`; + } + + // Add the edge to the graph + // graph.edges.push({ + // id: 'e' + edge.start + edge.end, + // sources: [edge.start], + // targets: [edge.end], + console.log('getEdgeStartEndPoint abc78', { source, target }); + return { source, target }; +}; + /** * Add edges to graph based on parsed graph definition * @@ -375,11 +487,15 @@ export const addEdges = function (edges, diagObj, graph, svg) { const labelEl = insertEdgeLabel(labelsEl, edgeData); // console.log('labelEl', labelEl, edgeData.width); + + // calculate start and end points of the edge + const { source, target } = getEdgeStartEndPoint(edge); + log.info('abc78 source and target', source, target); // Add the edge to the graph graph.edges.push({ id: 'e' + edge.start + edge.end, - sources: [edge.start], - targets: [edge.end], + sources: [source], + targets: [target], labelEl: labelEl, labels: [ { @@ -624,12 +740,15 @@ export const draw = async function (text, id, _version, diagObj) { 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]', 'elk.layered.spacing.edgeNodeBetweenLayers': '30', + // 'elk.layered.mergeEdges': 'true', 'elk.direction': 'DOWN', + // 'elk.ports.sameLayerEdges': true, + // 'nodePlacement.strategy': 'SIMPLE', }, children: [], edges: [], }; - log.info('Drawing flowchart using v3 renderer'); + log.info('Drawing flowchart using v3 renderer', elk); // Set the direction, // Fetch the default direction, use TD if none was found @@ -731,8 +850,43 @@ export const draw = async function (text, id, _version, diagObj) { } }); insertChildren(graph.children, parentLookupDb); + // graph.children[0].shape = 'rhombus'; + // graph.children[0].ports = [ + // { + // id: 'a-p1', + // layoutOptions: { + // 'port.side': 'WEST', + // }, + // }, + // { + // id: 'a-p2', + // layoutOptions: { + // 'port.side': 'EAST', + // }, + // }, + // { + // id: 'a-p3', + // layoutOptions: { + // 'port.side': 'SOUTH', + // }, + // }, + // { + // id: 'a-p4', + // layoutOptions: { + // 'port.side': 'NORTH', + // }, + // }, + // ]; + // graph.children[0].layoutOptions = { + // portConstraints: 'FIXED_SIDE', + // }; + // graph.edges[0].sources[0] = 'a-south'; + // graph.edges[1].sources[0] = 'a-west'; + // graph.edges[2].targets[0] = 'a-east'; + log.info('after layout', JSON.stringify(graph, null, 2)); const g = await elk.layout(graph); drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0); + log.info('after layout', g); g.edges?.map((edge) => { insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb); }); From eed427b4acc447502bd9a1b94923fa6704683dff Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 15 Feb 2023 14:10:38 +0100 Subject: [PATCH 07/11] Adding simple direction logic --- cypress/platform/knsv2.html | 4 +- .../flowchart/elk/flowRenderer-elk.js | 181 +++++++++--------- 2 files changed, 95 insertions(+), 90 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 05c79d82d..fccd65004 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -56,7 +56,7 @@
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-graph RL
+graph BT
 a{The cat in the hat} -- 1o --> b
 a -- 2o --> c
 a -- 3o --> d
@@ -272,7 +272,7 @@ mindmap
       mermaid.initialize({
         theme: 'forest',
         startOnLoad: true,
-        logLevel: 0,
+        logLevel: 5,
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index d2960129b..3dba2f22b 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -270,80 +270,122 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
   return graph;
 };
 
-const getNextPosition = (position, direction) => {
-  if (direction === 'in') {
-    // switch (position) {
-    //   case 'north':
-    //     return 'east';
-    //   case 'east':
-    //     return 'west';
-    //   case 'west':
-    //     return 'south';
-    //   case 'south':
-    //     return 'north';
-    //   default:
-    //     return 'north';
-    // }
-    return 'north';
-  } else {
-    switch (position) {
-      case 'south':
-        return 'west';
-      case 'west':
-        return 'east';
-      case 'east':
-        return 'south';
-      // case 'north':
-      //   return 'south';
-      default:
-        return 'south';
-    }
-  }
+const getNextPosition = (position, edgeDirection, graphDirection) => {
+  const portPos = {
+    TB: {
+      in: {
+        north: 'north',
+      },
+      out: {
+        south: 'west',
+        west: 'east',
+        east: 'south',
+      },
+    },
+    LR: {
+      in: {
+        west: 'west',
+      },
+      out: {
+        east: 'south',
+        south: 'north',
+        north: 'east',
+      },
+    },
+    RL: {
+      in: {
+        east: 'east',
+      },
+      out: {
+        west: 'north',
+        north: 'south',
+        south: 'west',
+      },
+    },
+    BT: {
+      in: {
+        south: 'south',
+      },
+      out: {
+        north: 'east',
+        east: 'west',
+        west: 'north',
+      },
+    },
+  };
+  log.info('abc88', graphDirection, edgeDirection, position);
+  return portPos[graphDirection][edgeDirection][position];
+  // return 'south';
 };
 
-const getNextPort = (node, direction) => {
+const getNextPort = (node, edgeDirection, graphDirection) => {
+  log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
   if (!portPos[node]) {
-    portPos[node] = {
-      inPosition: 'north',
-      outPosition: 'south',
-    };
+    switch (graphDirection) {
+      case 'TB':
+        portPos[node] = {
+          inPosition: 'north',
+          outPosition: 'south',
+        };
+        break;
+      case 'BT':
+        portPos[node] = {
+          inPosition: 'south',
+          outPosition: 'north',
+        };
+        break;
+      case 'RL':
+        portPos[node] = {
+          inPosition: 'east',
+          outPosition: 'west',
+        };
+        break;
+      case 'LR':
+        portPos[node] = {
+          inPosition: 'west',
+          outPosition: 'east',
+        };
+        break;
+    }
   }
-  const result = direction === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
+  const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
 
-  if (direction === 'in') {
-    portPos[node].inPosition = getNextPosition(portPos[node].inPosition, direction);
+  if (edgeDirection === 'in') {
+    portPos[node].inPosition = getNextPosition(
+      portPos[node].inPosition,
+      edgeDirection,
+      graphDirection
+    );
   } else {
-    portPos[node].outPosition = getNextPosition(portPos[node].outPosition, direction);
+    portPos[node].outPosition = getNextPosition(
+      portPos[node].outPosition,
+      edgeDirection,
+      graphDirection
+    );
   }
   return result;
 };
 
-const getEdgeStartEndPoint = (edge) => {
+const getEdgeStartEndPoint = (edge, dir) => {
   let source = edge.start;
   let target = edge.end;
 
   const startNode = nodeDb[source];
   const endNode = nodeDb[target];
-  console.log('getEdgeStartEndPoint abc77', { source, target, startNode, endNode });
 
   if (!startNode || !endNode) {
     return { source, target };
   }
 
   if (startNode.type === 'diamond') {
-    source = `${source}-${getNextPort(source, 'out')}`;
+    source = `${source}-${getNextPort(source, 'out', dir)}`;
   }
 
   if (endNode.type === 'diamond') {
-    target = `${target}-${getNextPort(target, 'in')}`;
+    target = `${target}-${getNextPort(target, 'in', dir)}`;
   }
 
   // Add the edge to the graph
-  // graph.edges.push({
-  //   id: 'e' + edge.start + edge.end,
-  //   sources: [edge.start],
-  //   targets: [edge.end],
-  console.log('getEdgeStartEndPoint abc78', { source, target });
   return { source, target };
 };
 
@@ -358,10 +400,10 @@ const getEdgeStartEndPoint = (edge) => {
  * @param svg
  */
 export const addEdges = function (edges, diagObj, graph, svg) {
-  // log.info('abc78 edges = ', edges);
+  log.info('abc78 edges = ', edges);
   const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
   let linkIdCnt = {};
-
+  let dir = diagObj.db.getDirection();
   let defaultStyle;
   let defaultLabelStyle;
 
@@ -486,11 +528,10 @@ export const addEdges = function (edges, diagObj, graph, svg) {
     edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
 
     const labelEl = insertEdgeLabel(labelsEl, edgeData);
-    // console.log('labelEl', labelEl, edgeData.width);
 
     // calculate start and end points of the edge
-    const { source, target } = getEdgeStartEndPoint(edge);
-    log.info('abc78 source and target', source, target);
+    const { source, target } = getEdgeStartEndPoint(edge, dir);
+    log.debug('abc78 source and target', source, target);
     // Add the edge to the graph
     graph.edges.push({
       id: 'e' + edge.start + edge.end,
@@ -500,7 +541,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
       labels: [
         {
           width: edgeData.width,
-          // width: 80,
           height: edgeData.height,
           orgWidth: edgeData.width,
           orgHeight: edgeData.height,
@@ -512,8 +552,6 @@ export const addEdges = function (edges, diagObj, graph, svg) {
         },
       ],
       edgeData,
-      // targetPort: 'PortSide.NORTH',
-      // id: cnt,
     });
   });
   return graph;
@@ -850,39 +888,6 @@ export const draw = async function (text, id, _version, diagObj) {
     }
   });
   insertChildren(graph.children, parentLookupDb);
-  // graph.children[0].shape = 'rhombus';
-  // graph.children[0].ports = [
-  //   {
-  //     id: 'a-p1',
-  //     layoutOptions: {
-  //       'port.side': 'WEST',
-  //     },
-  //   },
-  //   {
-  //     id: 'a-p2',
-  //     layoutOptions: {
-  //       'port.side': 'EAST',
-  //     },
-  //   },
-  //   {
-  //     id: 'a-p3',
-  //     layoutOptions: {
-  //       'port.side': 'SOUTH',
-  //     },
-  //   },
-  //   {
-  //     id: 'a-p4',
-  //     layoutOptions: {
-  //       'port.side': 'NORTH',
-  //     },
-  //   },
-  // ];
-  // graph.children[0].layoutOptions = {
-  //   portConstraints: 'FIXED_SIDE',
-  // };
-  // graph.edges[0].sources[0] = 'a-south';
-  // graph.edges[1].sources[0] = 'a-west';
-  // graph.edges[2].targets[0] = 'a-east';
   log.info('after layout', JSON.stringify(graph, null, 2));
   const g = await elk.layout(graph);
   drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);

From 0c38f2028177e0e48679f4d0b8774b3a36beba13 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Wed, 15 Feb 2023 14:17:46 +0100
Subject: [PATCH 08/11] Clearing sequence diagram before rendering

---
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index ce850c9f1..9ab84ab60 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -631,6 +631,9 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
 export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
   const { securityLevel, sequence } = configApi.getConfig();
   conf = sequence;
+  diagObj.db.clear();
+  // Parse the graph definition
+  diagObj.parser.parse(text);
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {

From aef989fe0357c88f66055809b440bd70e3981619 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Wed, 15 Feb 2023 15:11:23 +0100
Subject: [PATCH 09/11] Corrected sequenceRenderer

---
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 9ab84ab60..e4ce05350 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -633,7 +633,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO
   conf = sequence;
   diagObj.db.clear();
   // Parse the graph definition
-  diagObj.parser.parse(text);
+  diagObj.parser.parse(_text);
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {

From 343e48302eb0871f66847d73f559b6e729548c2d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 15 Feb 2023 15:12:52 +0100
Subject: [PATCH 10/11] Fix for direction issue with elk rendering

---
 .../mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js     | 2 ++
 packages/mermaid/src/diagrams/flowchart/flowDb.js              | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 3dba2f22b..73b37e9f7 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -313,6 +313,7 @@ const getNextPosition = (position, edgeDirection, graphDirection) => {
       },
     },
   };
+  portPos.TD = portPos.TB;
   log.info('abc88', graphDirection, edgeDirection, position);
   return portPos[graphDirection][edgeDirection][position];
   // return 'south';
@@ -323,6 +324,7 @@ const getNextPort = (node, edgeDirection, graphDirection) => {
   if (!portPos[node]) {
     switch (graphDirection) {
       case 'TB':
+      case 'TD':
         portPos[node] = {
           inPosition: 'north',
           outPosition: 'south',
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 147ad5b6a..2e6b840b5 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -238,6 +238,9 @@ export const setDirection = function (dir) {
   if (direction.match(/.*v/)) {
     direction = 'TB';
   }
+  if (direction === 'TD') {
+    direction = 'TB';
+  }
 };
 
 /**

From 97614b8af56a122022a71267996c0646b4a1e312 Mon Sep 17 00:00:00 2001
From: Per Brolin 
Date: Wed, 15 Feb 2023 15:54:02 +0100
Subject: [PATCH 11/11] Updated to 9.4.0

---
 packages/mermaid/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index e723dcd6f..f8864fb17 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.4.0-rc.2",
+  "version": "9.4.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "./dist/mermaid.min.js",
   "module": "./dist/mermaid.core.mjs",