From 687e74de9be37e8f676123b055d32dccf167ec3d Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Tue, 8 Oct 2019 22:57:40 +0200 Subject: [PATCH 01/25] fixed members order --- src/diagrams/class/classDb.js | 7 ++++--- src/diagrams/class/classDiagram.spec.js | 20 ++++++++++++++++++++ 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js index cb4c42c8a..201df5d7b 100644 --- a/src/diagrams/class/classDb.js +++ b/src/diagrams/class/classDb.js @@ -80,9 +80,10 @@ export const addMember = function(className, member) { } }; -export const addMembers = function(className, MembersArr) { - if (Array.isArray(MembersArr)) { - MembersArr.forEach(member => addMember(className, member)); +export const addMembers = function(className, members) { + if (Array.isArray(members)) { + members.reverse(); + members.forEach(member => addMember(className, member)); } }; diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js index 67946fd67..6ff4fad13 100644 --- a/src/diagrams/class/classDiagram.spec.js +++ b/src/diagrams/class/classDiagram.spec.js @@ -262,5 +262,25 @@ describe('class diagram, ', function() { expect(testClass.methods.length).toBe(1); expect(testClass.annotations[0]).toBe('interface'); }); + + it('should add bracket members in right order', function() { + const str = + 'classDiagram\n' + + 'class Class1 {\n' + + 'int : test\n' + + 'string : foo\n' + + 'test()\n' + + 'foo()\n' + + '}'; + parser.parse(str); + + const testClass = parser.yy.getClass('Class1'); + expect(testClass.members.length).toBe(2); + expect(testClass.methods.length).toBe(2); + expect(testClass.members[0]).toBe('int : test'); + expect(testClass.members[1]).toBe('string : foo'); + expect(testClass.methods[0]).toBe('test()'); + expect(testClass.methods[1]).toBe('foo()'); + }); }); }); From 96c86fd4b21d10f092948afce36b35f822abb4c2 Mon Sep 17 00:00:00 2001 From: Kolja Markwardt Date: Tue, 15 Oct 2019 14:40:13 +0200 Subject: [PATCH 02/25] #783 Hard to customize font-size for gantt charts - deselect theme style if font-size is set on the taskText element (e.g. via gantt-config) --- src/themes/gantt.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss index 34da04050..b03ddd228 100644 --- a/src/themes/gantt.scss +++ b/src/themes/gantt.scss @@ -82,10 +82,12 @@ .taskText { text-anchor: middle; - font-size: 11px; font-family: 'trebuchet ms', verdana, arial; font-family: var(--mermaid-font-family); +} +.taskText:not([font-size]) { + font-size: 11px; } .taskTextOutsideRight { From 90fe015d685901a01de0d653ee9bfe58a122bb11 Mon Sep 17 00:00:00 2001 From: Kolja Markwardt Date: Mon, 14 Oct 2019 22:10:58 +0200 Subject: [PATCH 03/25] #958 Cannot center-justify text in nodes - assign text-align style to text node to allow aligning of node text --- src/diagrams/flowchart/flowRenderer.js | 3 +- src/diagrams/flowchart/flowRenderer.spec.js | 39 +++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 7bb136287..0e704275f 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -36,9 +36,10 @@ export const addVertices = function(vert, g, svgId) { } } } else { + // create the style definition for the text, if property is a text-property for (let i = 0; i < arr.length; i++) { if (typeof arr[i] !== 'undefined') { - if (arr[i].match('^color:')) styleStr = styleStr + arr[i] + ';'; + if (arr[i].match('^color:|^text-align:')) styleStr = styleStr + arr[i] + ';'; } } } diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js index 3b8c72a44..e8407d91f 100644 --- a/src/diagrams/flowchart/flowRenderer.spec.js +++ b/src/diagrams/flowchart/flowRenderer.spec.js @@ -54,4 +54,43 @@ describe('the flowchart renderer', function() { }); }); }); + + [ + [['fill:#fff'], 'fill:#fff;', ''], + [['color:#ccc'], 'color:#ccc;', 'color:#ccc;'], + [['fill:#fff', 'color:#ccc'], 'fill:#fff;color:#ccc;', 'color:#ccc;'], + [ + ['fill:#fff', 'color:#ccc', 'text-align:center'], + 'fill:#fff;color:#ccc;text-align:center;', + 'color:#ccc;text-align:center;' + ] + ].forEach(function([style, expectedStyle, expectedLabelStyle]) { + fit(`should add the styles to style and/or labelStyle for style ${style}`, function() { + const addedNodes = []; + const mockG = { + setNode: function(id, object) { + addedNodes.push([id, object]); + } + }; + addVertices( + { + v1: { + type: 'rect', + id: 'my-node-id', + classes: [], + styles: style, + text: 'my vertex text' + } + }, + mockG, + 'svg-id' + ); + expect(addedNodes).toHaveLength(1); + expect(addedNodes[0][0]).toEqual('my-node-id'); + expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id'); + expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg'); + expect(addedNodes[0][1]).toHaveProperty('style', expectedStyle); + expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle); + }); + }); }); From f089c451152cc0040def60f018ccb641bfd22b51 Mon Sep 17 00:00:00 2001 From: Kolja Markwardt Date: Mon, 14 Oct 2019 22:36:55 +0200 Subject: [PATCH 04/25] #958 Cannot center-justify text in nodes - changed fit() to it() to reactivate test --- src/diagrams/flowchart/flowRenderer.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js index e8407d91f..e1c1931a6 100644 --- a/src/diagrams/flowchart/flowRenderer.spec.js +++ b/src/diagrams/flowchart/flowRenderer.spec.js @@ -65,7 +65,7 @@ describe('the flowchart renderer', function() { 'color:#ccc;text-align:center;' ] ].forEach(function([style, expectedStyle, expectedLabelStyle]) { - fit(`should add the styles to style and/or labelStyle for style ${style}`, function() { + it(`should add the styles to style and/or labelStyle for style ${style}`, function() { const addedNodes = []; const mockG = { setNode: function(id, object) { From 069b4854f8ff6ef3bb3a810f9f32d1de80744b7c Mon Sep 17 00:00:00 2001 From: Kolja Markwardt Date: Tue, 15 Oct 2019 08:02:41 +0200 Subject: [PATCH 05/25] #478 API crashes on 2nd render() call - remove element from DOM before rendering to avoid conflicts in case of rerendering --- src/mermaidAPI.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index a75fe6dbf..54fac25a8 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -462,6 +462,10 @@ const render = function(id, txt, cb, container) { .attr('xmlns', 'http://www.w3.org/2000/svg') .append('g'); } else { + const existingSvg = document.getElementById(id); + if (existingSvg) { + existingSvg.remove(); + } const element = document.querySelector('#' + 'd' + id); if (element) { element.innerHTML = ''; From d743838716fac63df23f1d2e897eeaa5a5f3bda3 Mon Sep 17 00:00:00 2001 From: Kolja Markwardt Date: Tue, 15 Oct 2019 17:05:20 +0200 Subject: [PATCH 06/25] #478 API crashes on 2nd render() call - add e2e test for (re)rendering by api --- cypress/integration/other/rerender.spec.js | 16 +++++++++++ cypress/platform/rerender.html | 33 ++++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 cypress/integration/other/rerender.spec.js create mode 100644 cypress/platform/rerender.html diff --git a/cypress/integration/other/rerender.spec.js b/cypress/integration/other/rerender.spec.js new file mode 100644 index 000000000..d7b3d2b47 --- /dev/null +++ b/cypress/integration/other/rerender.spec.js @@ -0,0 +1,16 @@ +/* eslint-env jest */ +describe('Rerendering', () => { + + it('should be able to render and rerender a graph via API', () => { + const url = 'http://localhost:9000/rerender.html'; + cy.viewport(1440, 1024); + cy.visit(url); + cy.get('#graph #A').should('have.text', 'XMas'); + + cy.get('body') + .find('#rerender') + .click({ force: true }); + + cy.get('#graph #A').should('have.text', 'Saturday'); + }); +}); diff --git a/cypress/platform/rerender.html b/cypress/platform/rerender.html new file mode 100644 index 000000000..8a9c0424c --- /dev/null +++ b/cypress/platform/rerender.html @@ -0,0 +1,33 @@ + + + + + + Mermaid Quick Test Page + + + +
+
+ + + + + + + From 5f1246280ca50ccbbb5e874ea8bc8885b04156bf Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Tue, 15 Oct 2019 22:43:36 +0200 Subject: [PATCH 07/25] Added alpha release build ci --- .github/workflows/alpha-release-build.yml | 34 +++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 .github/workflows/alpha-release-build.yml diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml new file mode 100644 index 000000000..05c555c55 --- /dev/null +++ b/.github/workflows/alpha-release-build.yml @@ -0,0 +1,34 @@ +name: Build alpha release package + +on: push +#on: +# push: +# branches: +# - 'release/**' + +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [10.x] + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Install Yarn + run: npm i yarn --global + + - name: Install Packages + run: yarn install + + - name: Build + run: yarn build + + - name: Test + run: yarn test + + - name: E2E Test + run: yarn e2e From 6a33ac05a3cf01785e72ff7c1cff19108ea14bea Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Tue, 15 Oct 2019 23:11:22 +0200 Subject: [PATCH 08/25] workflow adjusts --- .github/workflows/alpha-release-build.yml | 13 +++++++++++++ package-lock.json | 2 +- package.json | 2 +- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index 05c555c55..a91caa331 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -32,3 +32,16 @@ jobs: - name: E2E Test run: yarn e2e + + - name: E2E Test + run: yarn e2e + + - name: Publish + run: | + VERSION=$(echo ${{github.ref}} | tail -c +9) + echo $VERSION + npm version --no-git-tag-version $VERSION + npm login --registry=https://npm.pkg.github.com/ + npm config set registry https://npm.pkg.github.com/knsv + npm publish --tag alpha --dry-run + diff --git a/package-lock.json b/package-lock.json index 4fc945363..bcffa9ac2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "8.3.1", + "version": "8.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 76c65dd3a..d6338dd12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "8.3.1", + "version": "8.4.0", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "dist/mermaid.core.js", "keywords": [ From 7e6b43236a7f96c05614733d4abcda400b9462a5 Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Tue, 15 Oct 2019 23:19:05 +0200 Subject: [PATCH 09/25] testing --- .github/workflows/alpha-release-build.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index a91caa331..d90e0324c 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -27,14 +27,14 @@ jobs: - name: Build run: yarn build - - name: Test - run: yarn test + #- name: Test + # run: yarn test - - name: E2E Test - run: yarn e2e + #- name: E2E Test + # run: yarn e2e - - name: E2E Test - run: yarn e2e + #- name: E2E Test + # run: yarn e2e - name: Publish run: | From 61b4c6d3ac9fd95378d3459403daa91d5f19381a Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Tue, 15 Oct 2019 23:24:13 +0200 Subject: [PATCH 10/25] testing --- .github/workflows/alpha-release-build.yml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index d90e0324c..741141a45 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -14,7 +14,7 @@ jobs: node-version: [10.x] steps: - uses: actions/checkout@v1 - - name: Use Node.js ${{ matrix.node-version }} + - name: Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} @@ -38,7 +38,8 @@ jobs: - name: Publish run: | - VERSION=$(echo ${{github.ref}} | tail -c +9) + # VERSION=$(echo ${{github.ref}} | tail -c +20) + VERSION=8.4.0 echo $VERSION npm version --no-git-tag-version $VERSION npm login --registry=https://npm.pkg.github.com/ From 56e9abfc92b411303bc5818d6085b4e076067532 Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Tue, 15 Oct 2019 23:28:16 +0200 Subject: [PATCH 11/25] testing --- .github/workflows/alpha-release-build.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index 741141a45..967afad56 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -41,7 +41,7 @@ jobs: # VERSION=$(echo ${{github.ref}} | tail -c +20) VERSION=8.4.0 echo $VERSION - npm version --no-git-tag-version $VERSION + npm version --no-git-tag-version --allow-same-version $VERSION npm login --registry=https://npm.pkg.github.com/ npm config set registry https://npm.pkg.github.com/knsv npm publish --tag alpha --dry-run From af57da8e6b553790d2c3e63ff94fc6479ba58dda Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 02:40:09 +0200 Subject: [PATCH 12/25] testing --- .github/workflows/alpha-release-build.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index 967afad56..a53762c8c 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -42,6 +42,7 @@ jobs: VERSION=8.4.0 echo $VERSION npm version --no-git-tag-version --allow-same-version $VERSION + npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN npm login --registry=https://npm.pkg.github.com/ npm config set registry https://npm.pkg.github.com/knsv npm publish --tag alpha --dry-run From 3073b6559cd340d2c42ac29205659792459d32de Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 02:44:22 +0200 Subject: [PATCH 13/25] testing --- .github/workflows/alpha-release-build.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index a53762c8c..c8fcfc5b0 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -43,7 +43,6 @@ jobs: echo $VERSION npm version --no-git-tag-version --allow-same-version $VERSION npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN - npm login --registry=https://npm.pkg.github.com/ - npm config set registry https://npm.pkg.github.com/knsv + npm set registry https://npm.pkg.github.com/knsv npm publish --tag alpha --dry-run From 42aeafc907b1d3fcec9561393bce89e80a09288d Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 02:54:11 +0200 Subject: [PATCH 14/25] testing --- .github/workflows/alpha-release-build.yml | 18 +++--------------- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 5 insertions(+), 17 deletions(-) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index c8fcfc5b0..faaafcf2d 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -24,25 +24,13 @@ jobs: - name: Install Packages run: yarn install - - name: Build - run: yarn build - - #- name: Test - # run: yarn test - - #- name: E2E Test - # run: yarn e2e - - #- name: E2E Test - # run: yarn e2e - - name: Publish run: | - # VERSION=$(echo ${{github.ref}} | tail -c +20) - VERSION=8.4.0 + # VERSION=$(echo ${{github.ref}} | tail -c +20)-preview + VERSION=8.4.0-preview echo $VERSION npm version --no-git-tag-version --allow-same-version $VERSION npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN npm set registry https://npm.pkg.github.com/knsv - npm publish --tag alpha --dry-run + npm publish --dry-run diff --git a/package-lock.json b/package-lock.json index bcffa9ac2..44347a545 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "8.4.0", + "version": "8.4.0-preview", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d6338dd12..1dc029475 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "8.4.0", + "version": "8.4.0-preview", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "dist/mermaid.core.js", "keywords": [ From 6e088d17fd41f24bd24357b26010dba8880c7468 Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 03:15:33 +0200 Subject: [PATCH 15/25] testing --- .github/workflows/alpha-release-build.yml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/alpha-release-build.yml index faaafcf2d..a851a457a 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/alpha-release-build.yml @@ -26,8 +26,9 @@ jobs: - name: Publish run: | - # VERSION=$(echo ${{github.ref}} | tail -c +20)-preview - VERSION=8.4.0-preview + # VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION + PREVIEW_VERSION=$(git rev-list --count --first-parent HEAD) + VERSION=8.4.0-preview.$PREVIEW_VERSION echo $VERSION npm version --no-git-tag-version --allow-same-version $VERSION npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN From d95a9469ac46b80048424a67ff47049aea0e474f Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 03:23:22 +0200 Subject: [PATCH 16/25] testing --- ...{alpha-release-build.yml => release-preview-publish.yml} | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) rename .github/workflows/{alpha-release-build.yml => release-preview-publish.yml} (92%) diff --git a/.github/workflows/alpha-release-build.yml b/.github/workflows/release-preview-publish.yml similarity index 92% rename from .github/workflows/alpha-release-build.yml rename to .github/workflows/release-preview-publish.yml index a851a457a..697d05ff3 100644 --- a/.github/workflows/alpha-release-build.yml +++ b/.github/workflows/release-preview-publish.yml @@ -1,4 +1,4 @@ -name: Build alpha release package +name: Publish release preview package on: push #on: @@ -7,7 +7,7 @@ on: push # - 'release/**' jobs: - build: + publish: runs-on: ubuntu-latest strategy: matrix: @@ -33,5 +33,5 @@ jobs: npm version --no-git-tag-version --allow-same-version $VERSION npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN npm set registry https://npm.pkg.github.com/knsv - npm publish --dry-run + npm publish diff --git a/package.json b/package.json index 1dc029475..76c65dd3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "8.4.0-preview", + "version": "8.3.1", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "dist/mermaid.core.js", "keywords": [ From f0bbb063dda5017171257a7889f7191778bc6c29 Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 03:34:22 +0200 Subject: [PATCH 17/25] testing --- .github/workflows/release-preview-publish.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 697d05ff3..5693890d7 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -21,6 +21,9 @@ jobs: - name: Install Yarn run: npm i yarn --global + - name: Install Json + run: npm i json --global + - name: Install Packages run: yarn install @@ -33,5 +36,6 @@ jobs: npm version --no-git-tag-version --allow-same-version $VERSION npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN npm set registry https://npm.pkg.github.com/knsv + json -I -f package.json -e 'this.name="@knsv/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this npm publish From 49f5b8d150fdb8e304405f5e4811e0cd2d91d79a Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 03:42:37 +0200 Subject: [PATCH 18/25] testing --- .github/workflows/release-preview-publish.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 5693890d7..73c38fd6d 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -37,5 +37,6 @@ jobs: npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN npm set registry https://npm.pkg.github.com/knsv json -I -f package.json -e 'this.name="@knsv/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this + json -I -f package.json -e 'this.repository="git://github.com/knsv/mermaid"' # Repo url needs to have a specific format too npm publish From 04f86ef13000f1bcbd711bc0bcc3f1bdaf66f3fb Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 21:50:06 +0200 Subject: [PATCH 19/25] testing --- .github/workflows/release-preview-publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 73c38fd6d..931dce76c 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -34,7 +34,7 @@ jobs: VERSION=8.4.0-preview.$PREVIEW_VERSION echo $VERSION npm version --no-git-tag-version --allow-same-version $VERSION - npm set //npm.pkg.github.com/:_authToken $GITHUB_TOKEN + npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }} npm set registry https://npm.pkg.github.com/knsv json -I -f package.json -e 'this.name="@knsv/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this json -I -f package.json -e 'this.repository="git://github.com/knsv/mermaid"' # Repo url needs to have a specific format too From 2348f9d785593d6970177ef3b4991ae247032ac6 Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 21:57:35 +0200 Subject: [PATCH 20/25] finished ci --- .github/workflows/release-preview-publish.yml | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml index 931dce76c..552452e80 100644 --- a/.github/workflows/release-preview-publish.yml +++ b/.github/workflows/release-preview-publish.yml @@ -1,10 +1,9 @@ name: Publish release preview package -on: push -#on: -# push: -# branches: -# - 'release/**' +on: + push: + branches: + - 'release/**' jobs: publish: @@ -29,9 +28,8 @@ jobs: - name: Publish run: | - # VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION PREVIEW_VERSION=$(git rev-list --count --first-parent HEAD) - VERSION=8.4.0-preview.$PREVIEW_VERSION + VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION echo $VERSION npm version --no-git-tag-version --allow-same-version $VERSION npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }} From 8e1672568a666afaae07ba713b70e4b8913eb32a Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 22:09:33 +0200 Subject: [PATCH 21/25] added preview builds to readme --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index b7372ce37..0d3e6c394 100644 --- a/README.md +++ b/README.md @@ -147,6 +147,20 @@ Example: https://unpkg.com/mermaid@7.1.0/dist/ yarn add mermaid +### Preview builds +Preview builds are created automatically for each release. They can be found in the [GitHub registry](https://github.com/knsv/mermaid/packages). +Make sure to configure npm to use the GitHub package registry. Steps for that can be found [here](https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry). + +If you want to get the latest preview for the next release +``` +yarn add @knsv/mermaid +``` + + +If you want to get the latest preview for a specific version +``` +yarn add @knsv/mermaid@ +``` ## Documentation From 016dc17d946e0b4ebb005c534147aee85a74479a Mon Sep 17 00:00:00 2001 From: Christian Klemm Date: Wed, 16 Oct 2019 22:16:25 +0200 Subject: [PATCH 22/25] clean up branch --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 44347a545..4fc945363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "8.4.0-preview", + "version": "8.3.1", "lockfileVersion": 1, "requires": true, "dependencies": { From dc88e7a2c2fd55a272604cadda532646f65e4f32 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 19 Oct 2019 14:42:34 +0200 Subject: [PATCH 23/25] Fixes after verification, documentation of stateDiagram --- docs/_sidebar.md | 1 + docs/stateDiagram.md | 106 ++++++++++++++++++---------- src/diagrams/state/stateRenderer.js | 2 +- 3 files changed, 70 insertions(+), 39 deletions(-) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 2786d2e00..8bf4b1d33 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -11,6 +11,7 @@ - [Flowchart](flowchart.md) - [Sequence diagram](sequenceDiagram.md) - [Class Diagram](classDiagram.md) + - [State Diagram](stateDiagram.md) - [Gantt](gantt.md) - [Pie Chart](pie.md) - Guide diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md index 2966b7325..d3c625a85 100755 --- a/docs/stateDiagram.md +++ b/docs/stateDiagram.md @@ -1,8 +1,9 @@ # State diagrams -> A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction. +> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia -Mermaid can render state diagrams with a syntax derived from plantUml, this to make the diagrams easier to use. +Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to +share diagrams between mermaid and plantUml. ``` stateDiagram @@ -24,6 +25,7 @@ stateDiagram Moving --> Crash Crash --> [*] ``` +In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash. ## States @@ -38,7 +40,7 @@ stateDiagram s1 ``` -Another way is by using the state key word as per below: +Another way is by using the state keyword with a description as per below: ``` stateDiagram state "This ia state decription" as s2 @@ -48,11 +50,23 @@ stateDiagram state "This ia state decription" as s2 ``` +Another way to define a state with a description is to define the state id followed by a colon and the description: +``` +stateDiagram + s2 : This ia state decription +``` +```mermaid +stateDiagram + s2 : This ia state decription +``` + + ## Transitions Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->". -Transitions from and to states that are not defined implicitly defines these states. +When you define a transition between two states and the states are not already defined the undefined states are defined with the id +from the transition. You can later add descriptions to states defined this way. ``` stateDiagram @@ -63,7 +77,7 @@ stateDiagram s1 --> s2 ``` -It is possieblt to add text to a transition. +It is possible to add text to a transition. To describe what it represents. ``` stateDiagram @@ -74,7 +88,9 @@ stateDiagram s1 --> s2: A transition ``` -There are two special states indicating the start of the diagram and the stop of the diagram. These are written with the [*] syntax. +## Start and end + +There are two special states indicating the start and stop of the diagram. These are written with the [*] syntax and the direction of the transition to it defines it either as a start or a stop state. ``` stateDiagram @@ -90,9 +106,10 @@ stateDiagram ## Composit states -In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can have several internal states. +In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can +have several internal states. These are called composit states in this terminology. -In order to define a composit state you need to use the state keyword as per below: +In order to define a composit state you need to use the state keyword followed by and id and the body of the composit state between {}. See the example below: ``` stateDiagram @@ -113,6 +130,44 @@ stateDiagram You can do this in several layers: +``` +stateDiagram + [*] --> First + + state First { + [*] --> Second + + state Second { + [*] --> second + second --> Third + + state Third { + [*] --> third + third --> [*] + } + } + } +``` +```mermaid +stateDiagram + [*] --> First + + state First { + [*] --> Second + state Second { + [*] --> second + second --> Third + + state Third { + [*] --> third + third --> [*] + } + } + } +``` + +You can also define transitions also between composit states: + ``` stateDiagram [*] --> First @@ -150,9 +205,10 @@ stateDiagram [*] --> thi thi --> [*] } - ``` +*You can not define transitions between internal states belonging to different composit states* + ## Forks It is possible to specify a fork in the diagram using <<fork>> <<join>>. @@ -187,9 +243,9 @@ It is possible to specify a fork in the diagram using <<fork>> <& ## Notes -Sometimes nothing says it better then a postit note. That is also the case in state diagrams. +Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams. -Here you can't choose to put the onte to the right or to the left of a node. +Here you can choose to put the note to the *right of* or to the *left of* a node. ``` stateDiagram @@ -257,30 +313,4 @@ As in plantUml you can specify concurrency using the -- symbol. ## Styling -Styling of the a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss - -### Classes used (TB Written) - -Class | Description ---- | --- -Fakenote | Styles for the note box. -FakenoteText | Styles for the text on in the note boxes. - - - - -## Configuration - -Is it possible to adjust the margins etc for the stateDiagram ... TB written - -```javascript -mermaid.stateConfig = { -}; -``` - -### Possible configuration params: - -Param | Description | Default value ---- | --- | --- -TBS | Turns on/off the rendering of actors below the diagram as well as above it | false - +Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js index 0a62e6911..437f336ae 100644 --- a/src/diagrams/state/stateRenderer.js +++ b/src/diagrams/state/stateRenderer.js @@ -101,7 +101,7 @@ export const draw = function(text, id) { `${conf.padding * -1} ${conf.padding * -1} ` + (bounds.width * 1.5 + conf.padding * 2) + ' ' + - (bounds.height * 1.5 + conf.padding * 2) + (bounds.height + conf.padding * 5) ); }; const getLabelWidth = text => { From 7adb80b35bf482f8329055602700c996a4b7728a Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 19 Oct 2019 14:43:26 +0200 Subject: [PATCH 24/25] Fixes after verification, font-family set to label of transitions in statediagram --- src/themes/state.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/themes/state.scss b/src/themes/state.scss index 35640eb12..e2c630476 100644 --- a/src/themes/state.scss +++ b/src/themes/state.scss @@ -59,4 +59,6 @@ g.stateGroup line { fill: $labelColor; font-size: 10px; font-weight: bold; + font-family: 'trebuchet ms', verdana, arial; + font-family: var(--mermaid-font-family); } From fd5bcad5d6bd648e7737ba53c4684012c5c0355b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 19 Oct 2019 14:44:54 +0200 Subject: [PATCH 25/25] Fixes after verification, version upgrade --- docs/index.html | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index dec453e38..32bcdb5ce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,7 +7,7 @@ - +