diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 077cc568b..0bbd8db66 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,3 +1,4 @@ -'Type: Bug / Error': 'bug/*' -'Type: Enhancement': 'feature/*' -'Type: Other': 'other/*' +'Type: Bug / Error': ['bug/*', fix/*] +'Type: Enhancement': ['feature/*', 'feat/*'] +'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] +'Area: Documentation': ['docs/*'] diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3574c3599..ff34d24fd 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -13,6 +13,6 @@ Describe the way your implementation works or what design decisions you made if Make sure you - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) -- [ ] :computer: have added unit/e2e tests (if appropriate) -- [ ] :notebook: have added documentation (if appropriate) +- [ ] :computer: have added necessary unit/e2e tests. +- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features. - [ ] :bookmark: targeted `develop` branch diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml index b25ff89cc..152b177ae 100644 --- a/.github/workflows/build-docs.yml +++ b/.github/workflows/build-docs.yml @@ -1,6 +1,10 @@ name: Build Vitepress docs on: + push: + branches: + - master + - release/* pull_request: merge_group: @@ -25,5 +29,9 @@ jobs: - name: Install Packages run: pnpm install --frozen-lockfile + - name: Verify release verion + if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }} + run: pnpm --filter mermaid run docs:verify-version + - name: Run Build run: pnpm --filter mermaid run docs:build:vitepress diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 6777a1e4f..3e6966677 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -45,6 +45,7 @@ jobs: env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} VITEST_COVERAGE: true + CYPRESS_COMMIT: ${{ github.sha }} - name: Upload Coverage to Codecov uses: codecov/codecov-action@v3 # Run step only pushes to develop and pull_requests diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml index af5c477d6..ff5d8d0a1 100644 --- a/.github/workflows/pr-labeler-config-validator.yml +++ b/.github/workflows/pr-labeler-config-validator.yml @@ -1,11 +1,15 @@ name: Validate PR Labeler Configuration on: - push: {} + push: + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml pull_request: - types: - - opened - - synchronize - - ready_for_review + paths: + - .github/workflows/pr-labeler-config-validator.yml + - .github/workflows/pr-labeler.yml + - .github/pr-labeler.yml jobs: pr-labeler: diff --git a/.vscode/launch.json b/.vscode/launch.json index 83b80fa40..dc5ec94a1 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -17,7 +17,7 @@ "name": "Docs generation", "type": "node", "request": "launch", - "args": ["src/docs.mts"], + "args": ["scripts/docs.cli.mts"], "runtimeArgs": ["--loader", "ts-node/esm"], "cwd": "${workspaceRoot}/packages/mermaid", "skipFiles": ["/**", "**/node_modules/**"], diff --git a/cSpell.json b/cSpell.json index abcfa0383..af7a9ca46 100644 --- a/cSpell.json +++ b/cSpell.json @@ -136,6 +136,7 @@ "tsdoc", "tuleap", "tylerlong", + "typora", "ugge", "unist", "unocss", diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js deleted file mode 100644 index 4d13b3590..000000000 --- a/cypress/helpers/util.js +++ /dev/null @@ -1,93 +0,0 @@ -const utf8ToB64 = (str) => { - return window.btoa(unescape(encodeURIComponent(str))); -}; - -const batchId = 'mermaid-batch' + new Date().getTime(); - -export const mermaidUrl = (graphStr, options, api) => { - const obj = { - code: graphStr, - mermaid: options, - }; - const objStr = JSON.stringify(obj); - let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr); - if (api) { - url = 'http://localhost:9000/xss.html?graph=' + graphStr; - } - - if (options.listUrl) { - cy.log(options.listId, ' ', url); - } - - return url; -}; - -export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => { - cy.log(_options); - const options = Object.assign(_options); - if (!options.fontFamily) { - options.fontFamily = 'courier'; - } - if (!options.sequence) { - options.sequence = {}; - } - if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) { - options.sequence.actorFontFamily = 'courier'; - } - if (options.sequence && !options.sequence.noteFontFamily) { - options.sequence.noteFontFamily = 'courier'; - } - options.sequence.actorFontFamily = 'courier'; - options.sequence.noteFontFamily = 'courier'; - options.sequence.messageFontFamily = 'courier'; - if (options.sequence && !options.sequence.actorFontFamily) { - options.sequence.actorFontFamily = 'courier'; - } - if (!options.fontSize) { - options.fontSize = '16px'; - } - const url = mermaidUrl(graphStr, options, api); - openURLAndVerifyRendering(url, options, validation); -}; - -export const urlSnapshotTest = (url, _options, api = false, validation) => { - const options = Object.assign(_options); - openURLAndVerifyRendering(url, options, validation); -}; - -export const renderGraph = (graphStr, options, api) => { - const url = mermaidUrl(graphStr, options, api); - openURLAndVerifyRendering(url, options); -}; - -export const openURLAndVerifyRendering = (url, options, validation = undefined) => { - const useAppli = Cypress.env('useAppli'); - const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); - - if (useAppli) { - cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name); - cy.eyesOpen({ - appName: 'Mermaid', - testName: name, - batchName: Cypress.spec.name, - batchId: batchId + Cypress.spec.name, - }); - } - - cy.visit(url); - cy.window().should('have.property', 'rendered', true); - cy.get('svg').should('be.visible'); - - if (validation) { - cy.get('svg').should(validation); - } - - if (useAppli) { - cy.log('Check eyes' + Cypress.spec.name); - cy.eyesCheckWindow('Click!'); - cy.log('Closing eyes' + Cypress.spec.name); - cy.eyesClose(); - } else { - cy.matchImageSnapshot(name); - } -}; diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts new file mode 100644 index 000000000..ea217b4fc --- /dev/null +++ b/cypress/helpers/util.ts @@ -0,0 +1,132 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { Buffer } from 'buffer'; +import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js'; + +interface CypressConfig { + listUrl?: boolean; + listId?: string; + name?: string; +} +type CypressMermaidConfig = MermaidConfig & CypressConfig; + +interface CodeObject { + code: string; + mermaid: CypressMermaidConfig; +} + +const utf8ToB64 = (str: string): string => { + return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64'); +}; + +const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString(); + +export const mermaidUrl = ( + graphStr: string, + options: CypressMermaidConfig, + api: boolean +): string => { + const codeObject: CodeObject = { + code: graphStr, + mermaid: options, + }; + const objStr: string = JSON.stringify(codeObject); + let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`; + if (api) { + url = `http://localhost:9000/xss.html?graph=${graphStr}`; + } + + if (options.listUrl) { + cy.log(options.listId, ' ', url); + } + + return url; +}; + +export const imgSnapshotTest = ( + graphStr: string, + _options: CypressMermaidConfig = {}, + api = false, + validation?: any +): void => { + cy.log(JSON.stringify(_options)); + const options: CypressMermaidConfig = Object.assign(_options); + if (!options.fontFamily) { + options.fontFamily = 'courier'; + } + if (!options.sequence) { + options.sequence = {}; + } + if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) { + options.sequence.actorFontFamily = 'courier'; + } + if (options.sequence && !options.sequence.noteFontFamily) { + options.sequence.noteFontFamily = 'courier'; + } + options.sequence.actorFontFamily = 'courier'; + options.sequence.noteFontFamily = 'courier'; + options.sequence.messageFontFamily = 'courier'; + if (options.sequence && !options.sequence.actorFontFamily) { + options.sequence.actorFontFamily = 'courier'; + } + if (!options.fontSize) { + options.fontSize = 16; + } + + const url: string = mermaidUrl(graphStr, options, api); + openURLAndVerifyRendering(url, options, validation); +}; + +export const urlSnapshotTest = ( + url: string, + _options: CypressMermaidConfig, + _api = false, + validation?: any +): void => { + const options: CypressMermaidConfig = Object.assign(_options); + openURLAndVerifyRendering(url, options, validation); +}; + +export const renderGraph = ( + graphStr: string, + options: CypressMermaidConfig = {}, + api = false +): void => { + const url: string = mermaidUrl(graphStr, options, api); + openURLAndVerifyRendering(url, options); +}; + +export const openURLAndVerifyRendering = ( + url: string, + options: CypressMermaidConfig, + validation?: any +): void => { + const useAppli: boolean = Cypress.env('useAppli'); + const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); + + if (useAppli) { + cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`); + cy.eyesOpen({ + appName: 'Mermaid', + testName: name, + batchName: Cypress.spec.name, + batchId: batchId + Cypress.spec.name, + }); + } + + cy.visit(url); + cy.window().should('have.property', 'rendered', true); + cy.get('svg').should('be.visible'); + + if (validation) { + cy.get('svg').should(validation); + } + + if (useAppli) { + cy.log(`Check eyes ${Cypress.spec.name}`); + cy.eyesCheckWindow('Click!'); + cy.log(`Closing eyes ${Cypress.spec.name}`); + cy.eyesClose(); + } else { + cy.matchImageSnapshot(name); + } +}; diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js index 6df7edd84..7cbc5d105 100644 --- a/cypress/integration/other/configuration.spec.js +++ b/cypress/integration/other/configuration.spec.js @@ -1,4 +1,4 @@ -import { renderGraph } from '../../helpers/util.js'; +import { renderGraph } from '../../helpers/util.ts'; describe('Configuration', () => { describe('arrowMarkerAbsolute', () => { it('should handle default value false of arrowMarkerAbsolute', () => { diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index 4ade11e81..704222f2f 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest } from '../../helpers/util.js'; +import { urlSnapshotTest } from '../../helpers/util.ts'; describe('mermaid', () => { describe('registerDiagram', () => { diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js index 912f35728..48eb57a91 100644 --- a/cypress/integration/other/ghsa.spec.js +++ b/cypress/integration/other/ghsa.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js'; +import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts'; describe('CSS injections', () => { it('should not allow CSS injections outside of the diagram', () => { diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index 76b2c47f2..fa4ca4fc8 100644 --- a/cypress/integration/other/xss.spec.js +++ b/cypress/integration/other/xss.spec.js @@ -1,4 +1,4 @@ -import { mermaidUrl } from '../../helpers/util.js'; +import { mermaidUrl } from '../../helpers/util.ts'; describe('XSS', () => { it('should handle xss in tags', () => { const str = diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js index 462fe869c..5def96815 100644 --- a/cypress/integration/rendering/appli.spec.js +++ b/cypress/integration/rendering/appli.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Git Graph diagram', () => { it('1: should render a simple gitgraph with commit on main branch', () => { diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js index 0cf128ff6..59af6504b 100644 --- a/cypress/integration/rendering/c4.spec.js +++ b/cypress/integration/rendering/c4.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('C4 diagram', () => { it('should render a simple C4Context diagram', () => { diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 2e7a1cbd7..be6aa643b 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Class diagram V2', () => { it('0: should render a simple class diagram', () => { imgSnapshotTest( diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 427b4cf0b..a23430b08 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Class diagram', () => { it('1: should render a simple class diagram', () => { @@ -423,4 +423,82 @@ describe('Class diagram', () => { ); cy.get('svg'); }); + + it('should render class diagram with newlines in title', () => { + imgSnapshotTest(` + classDiagram + Animal <|-- \`Du\nck\` + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class \`Du\nck\` { + +String beakColor + +String featherColor + +swim() + +quack() + } + `); + cy.get('svg'); + }); + + it('should render class diagram with many newlines in title', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + `); + }); + + it('should render with newlines in title and an annotation', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + `); + }); + + it('should handle newline title in namespace', () => { + imgSnapshotTest(` + classDiagram + namespace testingNamespace { + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + } + `); + }); + + it('should handle newline in string label', () => { + imgSnapshotTest(` + classDiagram + class A["This has\na newline!"] { + +String boop + -Int beep + #double bop + } + + class B["This title also has\na newline"] + B : +with(more) + B : -methods() + `); + }); }); diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js index 3fc0f7f02..bc17f6236 100644 --- a/cypress/integration/rendering/conf-and-directives.spec.js +++ b/cypress/integration/rendering/conf-and-directives.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Configuration and directives - nodes should be light blue', () => { it('No config - use default', () => { diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js index e0b36d53a..d7bc08105 100644 --- a/cypress/integration/rendering/current.spec.js +++ b/cypress/integration/rendering/current.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Current diagram', () => { it('should render a state with states in it', () => { diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js index afde4af3e..56ad0f15f 100644 --- a/cypress/integration/rendering/debug.spec.js +++ b/cypress/integration/rendering/debug.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Flowchart', () => { it('34: testing the label width in percy', () => { diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js index 0c6eaa838..28c6191c8 100644 --- a/cypress/integration/rendering/erDiagram.spec.js +++ b/cypress/integration/rendering/erDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Entity Relationship Diagram', () => { it('should render a simple ER diagram', () => { @@ -200,6 +200,27 @@ describe('Entity Relationship Diagram', () => { ); }); + it('should render entities with attributes that begin with asterisk', () => { + imgSnapshotTest( + ` + erDiagram + BOOK { + int *id + string name + varchar(99) summary + } + BOOK }o..o{ STORE : soldBy + STORE { + int *id + string name + varchar(50) address + } + `, + { loglevel: 1 } + ); + cy.get('svg'); + }); + it('should render entities with keys', () => { renderGraph( ` diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 4f90646a2..221806b07 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe.skip('Flowchart ELK', () => { it('1-elk: should render a simple flowchart', () => { @@ -681,7 +681,7 @@ title: Simple flowchart flowchart-elk TD A --> B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('elk: should include classes on the edges', () => { @@ -710,7 +710,7 @@ flowchart-elk LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -726,7 +726,7 @@ flowchart-elk LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -736,7 +736,7 @@ flowchart-elk LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -749,7 +749,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -766,7 +766,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); @@ -782,7 +782,7 @@ flowchart-elk LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -798,7 +798,7 @@ flowchart-elk LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -808,7 +808,7 @@ flowchart-elk LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -821,7 +821,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -838,7 +838,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 305c55b21..27e728405 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Flowchart v2', () => { it('1: should render a simple flowchart', () => { @@ -671,7 +671,7 @@ title: Simple flowchart flowchart TD A --> B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('3192: It should be possieble to render flowcharts with invisible edges', () => { @@ -682,7 +682,7 @@ title: Simple flowchart with invisible edges flowchart TD A ~~~ B `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('4023: Should render html labels with images and-or text correctly', () => { @@ -695,6 +695,15 @@ A ~~~ B {} ); }); + + it('4439: Should render the graph even if some images are missing', () => { + imgSnapshotTest( + `flowchart TD + B[] + B-->C[]`, + {} + ); + }); describe('Markdown strings flowchart (#4220)', () => { describe('html labels', () => { it('With styling and classes', () => { @@ -707,7 +716,7 @@ flowchart LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -723,7 +732,7 @@ flowchart LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -733,7 +742,7 @@ flowchart LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -746,7 +755,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -763,7 +772,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); @@ -779,7 +788,7 @@ flowchart LR style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 classDef someclass fill:#f96 `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('With formatting in a node', () => { @@ -795,7 +804,7 @@ flowchart LR b --> d(The dog in the hog) c --> d `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('New line in node and formatted edge label', () => { @@ -805,7 +814,7 @@ flowchart LR b("\`The dog in **the** hog.(1) NL\`") --"\`1o **bold**\`"--> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Wrapping long text with a new line', () => { @@ -818,7 +827,7 @@ Word! Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); it('Sub graphs and markdown strings', () => { @@ -835,7 +844,7 @@ subgraph "\`**Two**\`" end `, - { titleTopMargin: 0 } + { flowchart: { titleTopMargin: 0 } } ); }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index d25043d28..4f6d6478e 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Graph', () => { it('1: should render a simple flowchart no htmlLabels', () => { diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index cb65f73b0..33d3ac9e1 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Gantt diagram', () => { beforeEach(() => { @@ -414,6 +414,28 @@ describe('Gantt diagram', () => { ); }); + it('should render a gantt diagram with tick is 1 week, with the day starting on monday', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + axisFormat %m-%d + tickInterval 1week + weekday monday + excludes weekends + + section Section + A task : a1, 2022-10-01, 30d + Another task : after a1, 20d + section Another + Task in sec : 2022-10-20, 12d + another task : 24d + `, + {} + ); + }); + it('should render a gantt diagram with tick is 1 month', () => { imgSnapshotTest( ` diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 43f91a983..c01a55796 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Git Graph diagram', () => { it('1: should render a simple gitgraph with commit on main branch', () => { @@ -333,4 +333,372 @@ gitGraph {} ); }); + it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + commit id: "3" + `, + {} + ); + }); + it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "One" + commit id: "Two" + commit id: "Three" + `, + {} + ); + }); + it('17: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "Normal Commit" + commit id: "Reverse Commit" type: REVERSE + commit id: "Hightlight Commit" type: HIGHLIGHT + `, + {} + ); + }); + it('18: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "Normal Commit with tag" tag: "v1.0.0" + commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1" + commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4" + `, + {} + ); + }); + it('19: should render a simple gitgraph with two branches | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch develop + checkout develop + commit id: "3" + commit id: "4" + checkout main + commit id: "5" + commit id: "6" + `, + {} + ); + }); + it('20: should render a simple gitgraph with two branches and merge commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch develop + checkout develop + commit id: "3" + commit id: "4" + checkout main + merge develop + commit id: "5" + commit id: "6" + `, + {} + ); + }); + it('21: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch nice_feature + checkout nice_feature + commit id: "3" + checkout main + commit id: "4" + checkout nice_feature + branch very_nice_feature + checkout very_nice_feature + commit id: "5" + checkout main + commit id: "6" + checkout nice_feature + commit id: "7" + checkout main + merge nice_feature id: "12345" tag: "my merge commit" + checkout very_nice_feature + commit id: "8" + checkout main + commit id: "9" + `, + {} + ); + }); + it('22: should render a simple gitgraph with more than 8 branchs & overriding variables | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'gitBranchLabel0': '#ffffff', + 'gitBranchLabel1': '#ffffff', + 'gitBranchLabel2': '#ffffff', + 'gitBranchLabel3': '#ffffff', + 'gitBranchLabel4': '#ffffff', + 'gitBranchLabel5': '#ffffff', + 'gitBranchLabel6': '#ffffff', + 'gitBranchLabel7': '#ffffff', + } } }%% + gitGraph TB: + checkout main + branch branch1 + branch branch2 + branch branch3 + branch branch4 + branch branch5 + branch branch6 + branch branch7 + branch branch8 + branch branch9 + checkout branch1 + commit id: "1" + `, + {} + ); + }); + it('23: should render a simple gitgraph with rotated labels | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': true + } } }%% + gitGraph TB: + commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828" + commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e" + commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e" + commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d" + `, + {} + ); + }); + it('24: should render a simple gitgraph with horizontal labels | Vertical Branch', () => { + imgSnapshotTest( + `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': { + 'rotateCommitLabel': false + } } }%% + gitGraph TB: + commit id: "Alpha" + commit id: "Beta" + commit id: "Gamma" + commit id: "Delta" + `, + {} + ); + }); + it('25: should render a simple gitgraph with cherry pick commit | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('26: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" tag: "snapshot" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('27: should render a gitgraph with cherry pick commit with no tag | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + commit id:"TWO" + cherry-pick id:"A" tag: "" + commit id:"THREE" + checkout develop + commit id:"C" + `, + {} + ); + }); + it('28: should render a simple gitgraph with two cherry pick commit | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + branch featureA + commit id:"FIX" + commit id: "FIX-2" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + cherry-pick id:"FIX" + checkout develop + commit id:"C" + merge featureA + `, + {} + ); + }); + it('29: should render commits for more than 8 branches | Vertical Branch', () => { + imgSnapshotTest( + ` + gitGraph TB: + checkout main + %% Make sure to manually set the ID of all commits, for consistent visual tests + commit id: "1-abcdefg" + checkout main + branch branch1 + commit id: "2-abcdefg" + checkout main + merge branch1 + branch branch2 + commit id: "3-abcdefg" + checkout main + merge branch2 + branch branch3 + commit id: "4-abcdefg" + checkout main + merge branch3 + branch branch4 + commit id: "5-abcdefg" + checkout main + merge branch4 + branch branch5 + commit id: "6-abcdefg" + checkout main + merge branch5 + branch branch6 + commit id: "7-abcdefg" + checkout main + merge branch6 + branch branch7 + commit id: "8-abcdefg" + checkout main + merge branch7 + branch branch8 + commit id: "9-abcdefg" + checkout main + merge branch8 + branch branch9 + commit id: "10-abcdefg" + `, + {} + ); + }); + it('30: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id: "1" + commit id: "2" + branch nice_feature + checkout nice_feature + commit id: "3" + checkout main + commit id: "4" + checkout nice_feature + branch very_nice_feature + checkout very_nice_feature + commit id: "5" + checkout main + commit id: "6" + checkout nice_feature + commit id: "7" + checkout main + merge nice_feature id: "customID" tag: "customTag" type: REVERSE + checkout very_nice_feature + commit id: "8" + checkout main + commit id: "9" + `, + {} + ); + }); + it('31: should render a simple gitgraph with a title | Vertical Branch', () => { + imgSnapshotTest( + `--- +title: simple gitGraph +--- +gitGraph TB: + commit id: "1-abcdefg" +`, + {} + ); + }); + it('32: should render a simple gitgraph overlapping commits | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"s1" + commit id:"s2" + branch branch1 + commit id:"s3" + commit id:"s4" + checkout main + commit id:"s5" + checkout branch1 + commit id:"s6" + commit id:"s7" + merge main + `, + {} + ); + }); + it('33: should render a simple gitgraph overlapping commits', () => { + imgSnapshotTest( + `gitGraph + commit id:"s1" + commit id:"s2" + branch branch1 + commit id:"s3" + commit id:"s4" + checkout main + commit id:"s5" + checkout branch1 + commit id:"s6" + commit id:"s7" + merge main + `, + {} + ); + }); }); diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts index 3db74c980..97b384eb5 100644 --- a/cypress/integration/rendering/info.spec.ts +++ b/cypress/integration/rendering/info.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('info diagram', () => { it('should handle an info definition', () => { diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js index 6f9d9bb60..d8bef6d1b 100644 --- a/cypress/integration/rendering/journey.spec.js +++ b/cypress/integration/rendering/journey.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('User journey diagram', () => { it('Simple test', () => { diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts index e390beaee..a77459f58 100644 --- a/cypress/integration/rendering/mindmap.spec.ts +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; /** * Check whether the SVG Element has a Mindmap root @@ -242,8 +242,7 @@ mindmap a second line 😎\`] id2[\`The dog in **the** hog... a *very long text* about it Word!\`] -`, - { titleTopMargin: 0 } +` ); }); }); diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js index 8a89a0cde..01b248486 100644 --- a/cypress/integration/rendering/pie.spec.js +++ b/cypress/integration/rendering/pie.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Pie Chart', () => { it('should render a simple pie diagram', () => { diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js index 4bcf58b60..50520eb1a 100644 --- a/cypress/integration/rendering/quadrantChart.spec.js +++ b/cypress/integration/rendering/quadrantChart.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Quadrant Chart', () => { it('should render if only chart type is provided', () => { diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js index 0bf9014bf..f33ae7a0c 100644 --- a/cypress/integration/rendering/requirement.spec.js +++ b/cypress/integration/rendering/requirement.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Requirement diagram', () => { it('sample', () => { diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts index e334b898b..ad0d75f18 100644 --- a/cypress/integration/rendering/sankey.spec.ts +++ b/cypress/integration/rendering/sankey.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('Sankey Diagram', () => { it('should render a simple example', () => { diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 7d36c1ff1..765913824 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -1,6 +1,6 @@ /// -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; context('Sequence diagram', () => { it('should render a sequence diagram with boxes', () => { diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js index 700791621..9a1a27abe 100644 --- a/cypress/integration/rendering/stateDiagram-v2.spec.js +++ b/cypress/integration/rendering/stateDiagram-v2.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('State diagram', () => { it('v2 should render a simple info', () => { diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index 28c24d398..01e7a2b44 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/cypress/integration/rendering/stateDiagram.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; +import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; describe('State diagram', () => { it('should render a simple state diagrams', () => { diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js index ef3bd9a4b..c84ad0c4b 100644 --- a/cypress/integration/rendering/theme.spec.js +++ b/cypress/integration/rendering/theme.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('themeCSS balancing, it', () => { it('should not allow unbalanced CSS definitions', () => { diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index 6fae82fb4..68da01d50 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Timeline diagram', () => { it('1: should render a simple timeline with no specific sections', () => { diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js index f317fbe82..53d8ae346 100644 --- a/cypress/integration/rendering/zenuml.spec.js +++ b/cypress/integration/rendering/zenuml.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; +import { imgSnapshotTest } from '../../helpers/util.ts'; describe('Zen UML', () => { it('Basic Zen UML diagram', () => { diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index e3351cebe..baa9a7217 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -2,7 +2,9 @@ "compilerOptions": { "target": "es2020", "lib": ["es2020", "dom"], - "types": ["cypress", "node"] + "types": ["cypress", "node"], + "allowImportingTsExtensions": true, + "noEmit": true }, "include": ["**/*.ts"] } diff --git a/docker-compose.yml b/docker-compose.yml index c881d0473..05fc241ba 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,7 +1,7 @@ version: '3.9' services: mermaid: - image: node:18.16.1-alpine3.18 + image: node:18.17.0-alpine3.18 stdin_open: true tty: true working_dir: /mermaid @@ -17,7 +17,7 @@ services: - 9000:9000 - 3333:3333 cypress: - image: cypress/included:12.16.0 + image: cypress/included:12.17.2 stdin_open: true tty: true working_dir: /mermaid diff --git a/docs/community/development.md b/docs/community/development.md index 90f728e15..0634759f5 100644 --- a/docs/community/development.md +++ b/docs/community/development.md @@ -223,6 +223,9 @@ If the users have no way to know that things have changed, then you haven't real Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused. The documentation has to be updated to users know that things have changed and added! +If you are adding a new feature, add `(v+)` in the title or description. It will be replaced automatically with the current version number when the release happens. + +eg: `# Feature Name (v+)` We know it can sometimes be hard to code _and_ write user documentation. diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md index 896a23c56..c0e8f96c8 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations.md @@ -187,6 +187,7 @@ They also serve as proof of concept, for the variety of things that can be built - [mdbook](https://rust-lang.github.io/mdBook/index.html) - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid) - [Quarto](https://quarto.org/) +- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)) ## Browser Extensions diff --git a/docs/syntax/c4c.md b/docs/syntax/c4c.md index dd5fa21b0..34b3b392a 100644 --- a/docs/syntax/c4c.md +++ b/docs/syntax/c4c.md @@ -123,10 +123,10 @@ The layout does not use a fully automated layout algorithm. The position of shap The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig. - Layout -- - Lay_U, Lay_Up -- - Lay_D, Lay_Down -- - Lay_L, Lay_Left -- - Lay_R, Lay_Right + - Lay_U, Lay_Up + - Lay_D, Lay_Down + - Lay_L, Lay_Left + - Lay_R, Lay_Right The following unfinished features are not supported in the short term. @@ -140,111 +140,70 @@ The following unfinished features are not supported in the short term. - [x] System Context -- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - -- - [x] Person_Ext - -- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) - -- - [x] SystemDb - -- - [x] SystemQueue - -- - [x] System_Ext - -- - [x] SystemDb_Ext - -- - [x] SystemQueue_Ext - -- - [x] Boundary(alias, label, ?type, ?tags, $link) - -- - [x] Enterprise_Boundary(alias, label, ?tags, $link) - -- - [x] System_Boundary + - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) + - [x] Person_Ext + - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) + - [x] SystemDb + - [x] SystemQueue + - [x] System_Ext + - [x] SystemDb_Ext + - [x] SystemQueue_Ext + - [x] Boundary(alias, label, ?type, ?tags, $link) + - [x] Enterprise_Boundary(alias, label, ?tags, $link) + - [x] System_Boundary - [x] Container diagram -- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - -- - [x] ContainerDb - -- - [x] ContainerQueue - -- - [x] Container_Ext - -- - [x] ContainerDb_Ext - -- - [x] ContainerQueue_Ext - -- - [x] Container_Boundary(alias, label, ?tags, $link) + - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] ContainerDb + - [x] ContainerQueue + - [x] Container_Ext + - [x] ContainerDb_Ext + - [x] ContainerQueue_Ext + - [x] Container_Boundary(alias, label, ?tags, $link) - [x] Component diagram -- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - -- - [x] ComponentDb - -- - [x] ComponentQueue - -- - [x] Component_Ext - -- - [x] ComponentDb_Ext - -- - [x] ComponentQueue_Ext + - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] ComponentDb + - [x] ComponentQueue + - [x] Component_Ext + - [x] ComponentDb_Ext + - [x] ComponentQueue_Ext - [x] Dynamic diagram -- - [x] RelIndex(index, from, to, label, ?tags, $link) + - [x] RelIndex(index, from, to, label, ?tags, $link) - [x] Deployment diagram -- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) - -- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() - -- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() - -- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() + - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) + - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() + - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() + - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() - [x] Relationship Types -- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) - -- - [x] BiRel (bidirectional relationship) - -- - [x] Rel_U, Rel_Up - -- - [x] Rel_D, Rel_Down - -- - [x] Rel_L, Rel_Left - -- - [x] Rel_R, Rel_Right - -- - [x] Rel_Back - -- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written. + - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) + - [x] BiRel (bidirectional relationship) + - [x] Rel_U, Rel_Up + - [x] Rel_D, Rel_Down + - [x] Rel_L, Rel_Left + - [x] Rel_R, Rel_Right + - [x] Rel_Back + - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written. - [ ] Custom tags/stereotypes support and skin param updates - -- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. - -- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend. - -- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry. - -- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text. - -- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument. - -- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument. - -- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument. - -- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument. - -- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument. - -- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). + - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend. + - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend. + - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry. + - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text. + - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument. + - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument. + - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument. + - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument. + - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument. + - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2). There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol. diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 9fa5fa517..dd887b0ee 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -196,7 +196,7 @@ erDiagram } ``` -The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types. +The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types. #### Attribute Keys and Comments diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 8e64a268a..5cf584050 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -257,6 +257,20 @@ The pattern is: More info in: +Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option: + +```mermaid-example +gantt + tickInterval 1week + weekday monday +``` + +```mermaid +gantt + tickInterval 1week + weekday monday +``` + ## Output in compact mode The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings. diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index 964fe3886..e93071851 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -825,6 +825,82 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch Here, we have changed the default main branch name to `MetroLine1`. +## Orientation + +In Mermaid, the default orientation is Left to Right. The branches are lined vertically. + +Usage example: + +```mermaid-example + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**. + +In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`. + +Usage example: + +```mermaid-example + gitGraph TB: + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph TB: + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + ## Themes Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md). diff --git a/package.json b/package.json index e21e02d14..47fae3be4 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.6.5", + "packageManager": "pnpm@8.6.10", "keywords": [ "diagram", "markdown", @@ -78,13 +78,12 @@ "@types/rollup-plugin-visualizer": "^4.2.1", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", - "@vitest/coverage-v8": "^0.32.2", - "@vitest/spy": "^0.32.2", - "@vitest/ui": "^0.32.2", + "@vitest/coverage-v8": "^0.33.0", + "@vitest/spy": "^0.33.0", + "@vitest/ui": "^0.33.0", "ajv": "^8.12.0", "concurrently": "^8.0.1", "cors": "^2.8.5", - "coveralls": "^3.1.1", "cypress": "^12.10.0", "cypress-image-snapshot": "^4.0.1", "esbuild": "^0.18.0", @@ -120,10 +119,10 @@ "typescript": "^5.1.3", "vite": "^4.3.9", "vite-plugin-istanbul": "^4.1.0", - "vitest": "^0.32.2" + "vitest": "^0.33.0" }, "volta": { - "node": "18.16.1" + "node": "18.17.0" }, "nyc": { "report-dir": "coverage/cypress" diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index afbbed2e6..9a1f34676 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -25,14 +25,16 @@ "scripts": { "clean": "rimraf dist", "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup", - "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts", - "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify", - "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", + "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts", + "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify", + "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts", "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", - "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"", - "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"", + "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"", + "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"", "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", + "docs:release-version": "ts-node-esm scripts/update-release-version.mts", + "docs:verify-version": "ts-node-esm scripts/update-release-version.mts --verify", "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts", "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify", "release": "pnpm build", @@ -65,7 +67,7 @@ "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.10", "dayjs": "^1.11.7", - "dompurify": "3.0.4", + "dompurify": "3.0.5", "elkjs": "^0.8.2", "khroma": "^2.0.0", "lodash-es": "^4.17.21", @@ -94,7 +96,6 @@ "ajv": "^8.11.2", "chokidar": "^3.5.3", "concurrently": "^8.0.1", - "coveralls": "^3.1.1", "cpy-cli": "^4.2.0", "cspell": "^6.31.1", "csstree-validator": "^3.0.0", diff --git a/packages/mermaid/scripts/docs.cli.mts b/packages/mermaid/scripts/docs.cli.mts new file mode 100644 index 000000000..067eec1c5 --- /dev/null +++ b/packages/mermaid/scripts/docs.cli.mts @@ -0,0 +1,3 @@ +import { processDocs } from './docs.mjs'; + +void processDocs(); diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/scripts/docs.mts similarity index 92% rename from packages/mermaid/src/docs.mts rename to packages/mermaid/scripts/docs.mts index 356cd3cd1..3689cb68b 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/scripts/docs.mts @@ -27,14 +27,21 @@ * get their absolute paths. Ensures that the location of those 2 directories is not dependent on * where this file resides. * - * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with - * it.) */ +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js'; +// @ts-ignore: we're importing internal jsonschema2md functions +import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js'; import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs'; import { exec } from 'child_process'; import { globby } from 'globby'; import { JSDOM } from 'jsdom'; -import type { Code, ListItem, Root, Text } from 'mdast'; +import { dump, load, JSON_SCHEMA } from 'js-yaml'; +import type { Code, ListItem, Root, Text, YAML } from 'mdast'; import { posix, dirname, relative, join } from 'path'; import prettier from 'prettier'; import { remark } from 'remark'; @@ -46,9 +53,9 @@ import mm from 'micromatch'; import flatmap from 'unist-util-flatmap'; import { visit } from 'unist-util-visit'; -const MERMAID_MAJOR_VERSION = ( - JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string -).split('.')[0]; +export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8')) + .version as string; +const MERMAID_MAJOR_VERSION = MERMAID_RELEASE_VERSION.split('.')[0]; const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com'; const MERMAID_KEYWORD = 'mermaid'; @@ -71,7 +78,7 @@ const vitepress: boolean = process.argv.includes('--vitepress'); const noHeader: boolean = process.argv.includes('--noHeader') || vitepress; // These paths are from the root of the mono-repo, not from the mermaid subdirectory -const SOURCE_DOCS_DIR = 'src/docs'; +export const SOURCE_DOCS_DIR = 'src/docs'; const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs'; const LOGMSG_TRANSFORMED = 'transformed'; @@ -158,7 +165,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo logWasOrShouldBeTransformed(fileInFinalDocDir, doCopy); }; -const readSyncedUTF8file = (filename: string): string => { +export const readSyncedUTF8file = (filename: string): string => { return readFileSync(filename, 'utf8'); }; @@ -209,6 +216,8 @@ interface TransformMarkdownAstOptions { originalFilename: string; /** If `true`, add a warning that the file is autogenerated */ addAutogeneratedWarning?: boolean; + /** If `true`, adds an `editLink: "https://..."` YAML frontmatter field */ + addEditLink?: boolean; /** * If `true`, remove the YAML metadata from the Markdown input. * Generally, YAML metadata is only used for Vitepress. @@ -231,6 +240,7 @@ interface TransformMarkdownAstOptions { export function transformMarkdownAst({ originalFilename, addAutogeneratedWarning, + addEditLink, removeYAML, }: TransformMarkdownAstOptions) { return (tree: Root, _file?: any): Root => { @@ -270,6 +280,27 @@ export function transformMarkdownAst({ } } + if (addEditLink) { + // add originalFilename as custom editLink in YAML frontmatter + let yamlFrontMatter: YAML; + if (astWithTransformedBlocks.children[0].type === 'yaml') { + yamlFrontMatter = astWithTransformedBlocks.children[0]; + } else { + yamlFrontMatter = { + type: 'yaml', + value: '', + }; + astWithTransformedBlocks.children.unshift(yamlFrontMatter); + } + const filePathFromRoot = posix.join('packages/mermaid', originalFilename); + yamlFrontMatter.value = dump({ + ...(load(yamlFrontMatter.value, { schema: JSON_SCHEMA }) as + | Record + | undefined), + editLink: `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`, + }); + } + if (removeYAML) { const firstNode = astWithTransformedBlocks.children[0]; if (firstNode.type == 'yaml') { @@ -306,6 +337,7 @@ const transformMarkdown = (file: string) => { // mermaid project specific plugin originalFilename: file, addAutogeneratedWarning: !noHeader, + addEditLink: noHeader, removeYAML: !noHeader, }) .processSync(doc) @@ -323,20 +355,10 @@ const transformMarkdown = (file: string) => { copyTransformedContents(file, !verifyOnly, formatted); }; -import { load, JSON_SCHEMA } from 'js-yaml'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js'; -// @ts-ignore: we're importing internal jsonschema2md functions -import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js'; - /** * Transforms the given JSON Schema into Markdown documentation */ -async function transormJsonSchema(file: string) { +async function transformJsonSchema(file: string) { const yamlContents = readSyncedUTF8file(file); const jsonSchema = load(yamlContents, { filename: file, @@ -420,16 +442,18 @@ async function transormJsonSchema(file: string) { } }); - const transformed = remark() + const transformer = remark() .use(remarkGfm) .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown .use(transformMarkdownAst, { // mermaid project specific plugin originalFilename: file, addAutogeneratedWarning: !noHeader, + addEditLink: noHeader, removeYAML: !noHeader, - }) - .stringify(markdownAst as Root); + }); + + const transformed = transformer.stringify(await transformer.run(markdownAst as Root)); const formatted = prettier.format(transformed, { parser: 'markdown', @@ -480,7 +504,7 @@ const transformHtml = (filename: string) => { copyTransformedContents(filename, !verifyOnly, formattedHTML); }; -const getGlobs = (globs: string[]): string[] => { +export const getGlobs = (globs: string[]): string[] => { globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**'); if (!vitepress) { globs.push( @@ -494,12 +518,12 @@ const getGlobs = (globs: string[]): string[] => { return globs; }; -const getFilesFromGlobs = async (globs: string[]): Promise => { +export const getFilesFromGlobs = async (globs: string[]): Promise => { return await globby(globs, { dot: true }); }; /** Main method (entry point) */ -const main = async () => { +export const processDocs = async () => { if (verifyOnly) { console.log('Verifying that all files are in sync with the source files'); } @@ -509,7 +533,7 @@ const main = async () => { if (vitepress) { console.log(`${action} 1 .schema.yaml file`); - await transormJsonSchema('src/schemas/config.schema.yaml'); + await transformJsonSchema('src/schemas/config.schema.yaml'); } else { // skip because this creates so many Markdown files that it lags git console.log('Skipping 1 .schema.yaml file'); @@ -577,5 +601,3 @@ const main = async () => { }); } }; - -void main(); diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts similarity index 90% rename from packages/mermaid/src/docs.spec.ts rename to packages/mermaid/scripts/docs.spec.ts index 50feaee6a..c84bc1bac 100644 --- a/packages/mermaid/src/docs.spec.ts +++ b/packages/mermaid/scripts/docs.spec.ts @@ -105,6 +105,29 @@ This Markdown should be kept. }); }); + it('should add an editLink in the YAML frontmatter if `addEditLink: true`', async () => { + const contents = `--- +title: Flowcharts Syntax +--- + +This Markdown should be kept. +`; + const withYaml = ( + await remarkBuilder() + .use(transformMarkdownAst, { originalFilename, addEditLink: true }) + .process(contents) + ).toString(); + expect(withYaml).toEqual(`--- +title: Flowcharts Syntax +editLink: >- + https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md + +--- + +This Markdown should be kept. +`); + }); + describe('transformToBlockQuote', () => { // TODO Is there a way to test this with --vitepress given as a process argument? diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts new file mode 100644 index 000000000..7f292f21b --- /dev/null +++ b/packages/mermaid/scripts/update-release-version.mts @@ -0,0 +1,53 @@ +/* eslint-disable no-console */ + +/** + * @file Update the MERMAID_RELEASE_VERSION placeholder in the documentation source files with the current version of mermaid. + * So contributors adding new features will only have to add the placeholder and not worry about updating the version number. + * + */ +import { posix } from 'path'; +import { + getGlobs, + getFilesFromGlobs, + SOURCE_DOCS_DIR, + readSyncedUTF8file, + MERMAID_RELEASE_VERSION, +} from './docs.mjs'; +import { writeFile } from 'fs/promises'; + +const verifyOnly: boolean = process.argv.includes('--verify'); +const versionPlaceholder = ''; + +const main = async () => { + const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**'); + const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]); + mdFileGlobs.push('!**/community/development.md'); + const mdFiles = await getFilesFromGlobs(mdFileGlobs); + mdFiles.sort(); + const mdFilesWithPlaceholder: string[] = []; + for (const mdFile of mdFiles) { + const content = readSyncedUTF8file(mdFile); + if (content.includes(versionPlaceholder)) { + mdFilesWithPlaceholder.push(mdFile); + } + } + + if (mdFilesWithPlaceholder.length === 0) { + return; + } + + if (verifyOnly) { + console.log( + `${mdFilesWithPlaceholder.length} file(s) were found with the placeholder ${versionPlaceholder}. Run \`pnpm --filter mermaid docs:release-version\` to update them.` + ); + process.exit(1); + } + + for (const mdFile of mdFilesWithPlaceholder) { + const content = readSyncedUTF8file(mdFile); + const newContent = content.replace(versionPlaceholder, MERMAID_RELEASE_VERSION); + await writeFile(mdFile, newContent); + } +}; + +void main(); diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 352181c86..df87e9c40 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1063,6 +1063,11 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * */ displayMode?: string | "compact"; + /** + * On which day a week-based interval should start + * + */ + weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; } /** * The object containing configurations specific for sequence diagrams diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 410703f6c..6c6733358 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -917,7 +917,9 @@ const class_box = (parent, node) => { ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) + ')' ); - verticalPos += classTitleBBox.height + rowPadding; + //get the height of the bounding box of each member if exists + const memberBBox = lbl?.getBBox(); + verticalPos += (memberBBox?.height ?? 0) + rowPadding; }); verticalPos += lineHeight; @@ -935,7 +937,8 @@ const class_box = (parent, node) => { 'transform', 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')' ); - verticalPos += classTitleBBox.height + rowPadding; + const memberBBox = lbl?.getBBox(); + verticalPos += (memberBBox?.height ?? 0) + rowPadding; }); rect diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index 7ad412bdb..3eaedb4b9 100644 --- a/packages/mermaid/src/dagre-wrapper/shapes/util.js +++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js @@ -66,8 +66,11 @@ export const labelHelper = async (parent, node, _classes, isNode) => { await Promise.all( [...images].map( (img) => - new Promise((res) => - img.addEventListener('load', function () { + new Promise((res) => { + /** + * + */ + function setupImage() { img.style.display = 'flex'; img.style.flexDirection = 'column'; @@ -82,8 +85,15 @@ export const labelHelper = async (parent, node, _classes, isNode) => { img.style.width = '100%'; } res(img); - }) - ) + } + setTimeout(() => { + if (img.complete) { + setupImage(); + } + }); + img.addEventListener('error', setupImage); + img.addEventListener('load', setupImage); + }) ) ); } diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js new file mode 100644 index 000000000..76dca3bc2 --- /dev/null +++ b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js @@ -0,0 +1,135 @@ +import c4Db from '../c4Db.js'; +import c4 from './c4Diagram.jison'; +import { setConfig } from '../../../config.js'; + +setConfig({ + securityLevel: 'strict', +}); + +describe.each([ + ['Container', 'container'], + ['ContainerDb', 'container_db'], + ['ContainerQueue', 'container_queue'], + ['Container_Ext', 'external_container'], + ['ContainerDb_Ext', 'external_container_db'], + ['ContainerQueue_Ext', 'external_container_queue'], +])('parsing a C4 %s', function (macroName, elementName) { + beforeEach(function () { + c4.parser.yy = c4Db; + c4.parser.yy.clear(); + }); + + it('should parse a C4 diagram with one Container correctly', function () { + c4.parser.parse(`C4Context +title Container diagram for Internet Banking Container +${macroName}(ContainerAA, "Internet Banking Container", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`); + + const yy = c4.parser.yy; + + const shapes = yy.getC4ShapeArray(); + expect(shapes.length).toBe(1); + const onlyShape = shapes[0]; + + expect(onlyShape).toEqual({ + alias: 'ContainerAA', + descr: { + text: 'Allows customers to view information about their bank accounts, and make payments.', + }, + label: { + text: 'Internet Banking Container', + }, + link: undefined, + sprite: undefined, + tags: undefined, + parentBoundary: 'global', + typeC4Shape: { + text: elementName, + }, + techn: { + text: 'Technology', + }, + wrap: false, + }); + }); + + it('should parse the alias', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "Internet Banking Container")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + alias: 'ContainerAA', + }); + }); + + it('should parse the label', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "Internet Banking Container")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: 'Internet Banking Container', + }, + }); + }); + + it('should parse the technology', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "", "Java")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + techn: { + text: 'Java', + }, + }); + }); + + it('should parse the description', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, "", "", "Allows customers to view information about their bank accounts, and make payments.")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + descr: { + text: 'Allows customers to view information about their bank accounts, and make payments.', + }, + }); + }); + + it('should parse a sprite', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, $sprite="users")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: { + sprite: 'users', + }, + }, + }); + }); + + it('should parse a link', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, $link="https://github.com/mermaidjs")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: { + link: 'https://github.com/mermaidjs', + }, + }, + }); + }); + + it('should parse tags', function () { + c4.parser.parse(`C4Context +${macroName}(ContainerAA, $tags="tag1,tag2")`); + + expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({ + label: { + text: { + tags: 'tag1,tag2', + }, + }, + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison index 03b851458..1dfa69ef1 100644 --- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison +++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison @@ -150,27 +150,27 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} "Node_R" { this.begin("node_r"); return 'NODE_R';} -"Rel" { this.begin("rel"); return 'REL';} -"BiRel" { this.begin("birel"); return 'BIREL';} -"Rel_Up" { this.begin("rel_u"); return 'REL_U';} -"Rel_U" { this.begin("rel_u"); return 'REL_U';} -"Rel_Down" { this.begin("rel_d"); return 'REL_D';} -"Rel_D" { this.begin("rel_d"); return 'REL_D';} -"Rel_Left" { this.begin("rel_l"); return 'REL_L';} -"Rel_L" { this.begin("rel_l"); return 'REL_L';} -"Rel_Right" { this.begin("rel_r"); return 'REL_R';} -"Rel_R" { this.begin("rel_r"); return 'REL_R';} -"Rel_Back" { this.begin("rel_b"); return 'REL_B';} -"RelIndex" { this.begin("rel_index"); return 'REL_INDEX';} +"Rel" { this.begin("rel"); return 'REL';} +"BiRel" { this.begin("birel"); return 'BIREL';} +"Rel_Up" { this.begin("rel_u"); return 'REL_U';} +"Rel_U" { this.begin("rel_u"); return 'REL_U';} +"Rel_Down" { this.begin("rel_d"); return 'REL_D';} +"Rel_D" { this.begin("rel_d"); return 'REL_D';} +"Rel_Left" { this.begin("rel_l"); return 'REL_L';} +"Rel_L" { this.begin("rel_l"); return 'REL_L';} +"Rel_Right" { this.begin("rel_r"); return 'REL_R';} +"Rel_R" { this.begin("rel_r"); return 'REL_R';} +"Rel_Back" { this.begin("rel_b"); return 'REL_B';} +"RelIndex" { this.begin("rel_index"); return 'REL_INDEX';} -"UpdateElementStyle" { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';} -"UpdateRelStyle" { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} -"UpdateLayoutConfig" { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} +"UpdateElementStyle" { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';} +"UpdateRelStyle" { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} +"UpdateLayoutConfig" { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} -<> return "EOF_IN_STRUCT"; -[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";} -[(] { this.begin("attribute"); } -[)] { this.popState();this.popState();} +<> return "EOF_IN_STRUCT"; +[(][ ]*[,] { this.begin("attribute"); return "ATTRIBUTE_EMPTY";} +[(] { this.begin("attribute"); } +[)] { this.popState();this.popState();} ",," { return 'ATTRIBUTE_EMPTY';} "," { } @@ -189,7 +189,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} '{' { /* this.begin("lbrace"); */ return "LBRACE";} '}' { /* this.popState(); */ return "RBRACE";} - + [\s]+ return 'SPACE'; [\n\r]+ return 'EOL'; <> return 'EOF'; @@ -257,7 +257,7 @@ graphConfig statements : otherStatements | diagramStatements - | otherStatements diagramStatements + | otherStatements diagramStatements ; otherStatements @@ -268,10 +268,10 @@ otherStatements otherStatement : title {yy.setTitle($1.substring(6));$$=$1.substring(6);} - | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);} + | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);} | acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } - | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } + | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } ; boundaryStatement @@ -301,7 +301,7 @@ boundaryStopStatement diagramStatements : diagramStatement | diagramStatement NEWLINE - | diagramStatement NEWLINE statements + | diagramStatement NEWLINE statements ; diagramStatement @@ -312,19 +312,19 @@ diagramStatement | SYSTEM_QUEUE attributes {yy.addPersonOrSystem('system_queue', ...$2); $$=$2;} | SYSTEM_EXT attributes {yy.addPersonOrSystem('external_system', ...$2); $$=$2;} | SYSTEM_EXT_DB attributes {yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;} - | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;} + | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;} | CONTAINER attributes {yy.addContainer('container', ...$2); $$=$2;} | CONTAINER_DB attributes {yy.addContainer('container_db', ...$2); $$=$2;} | CONTAINER_QUEUE attributes {yy.addContainer('container_queue', ...$2); $$=$2;} | CONTAINER_EXT attributes {yy.addContainer('external_container', ...$2); $$=$2;} | CONTAINER_EXT_DB attributes {yy.addContainer('external_container_db', ...$2); $$=$2;} - | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;} + | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;} | COMPONENT attributes {yy.addComponent('component', ...$2); $$=$2;} | COMPONENT_DB attributes {yy.addComponent('component_db', ...$2); $$=$2;} | COMPONENT_QUEUE attributes {yy.addComponent('component_queue', ...$2); $$=$2;} | COMPONENT_EXT attributes {yy.addComponent('external_component', ...$2); $$=$2;} | COMPONENT_EXT_DB attributes {yy.addComponent('external_component_db', ...$2); $$=$2;} - | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;} + | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;} | boundaryStatement | REL attributes {yy.addRel('rel', ...$2); $$=$2;} | BIREL attributes {yy.addRel('birel', ...$2); $$=$2;} diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 2182e8c34..7816345c8 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -264,6 +264,113 @@ class C13["With Città foreign language"] const str = 'classDiagram\n' + 'note "test"\n'; parser.parse(str); }); + + const keywords = [ + 'direction', + 'classDiagram', + 'classDiagram-v2', + 'namespace', + '{}', + '{', + '}', + '()', + '(', + ')', + '[]', + '[', + ']', + 'class', + '\n', + 'cssClass', + 'callback', + 'link', + 'click', + 'note', + 'note for', + '<<', + '>>', + 'call ', + '~', + '~Generic~', + '_self', + '_blank', + '_parent', + '_top', + '<|', + '|>', + '>', + '<', + '*', + 'o', + '\\', + '--', + '..', + '-->', + '--|>', + ': label', + ':::', + '.', + '+', + 'alphaNum', + '!', + '0123', + 'function()', + 'function(arg1, arg2)', + ]; + + it.each(keywords)('should handle a note with %s in it', function (keyword: string) { + const str = `classDiagram + note "This is a keyword: ${keyword}. It truly is." + `; + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`); + }); + + it.each(keywords)( + 'should handle note with %s at beginning of string', + function (keyword: string) { + const str = `classDiagram + note "${keyword}"`; + + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`${keyword}`); + } + ); + + it.each(keywords)('should handle a "note for" with a %s in it', function (keyword: string) { + const str = `classDiagram + class Something { + int id + string name + } + note for Something "This is a keyword: ${keyword}. It truly is." + `; + + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`); + }); + + it.each(keywords)( + 'should handle a "note for" with a %s at beginning of string', + function (keyword: string) { + const str = `classDiagram + class Something { + int id + string name + } + note for Something "${keyword}" + `; + + parser.parse(str); + expect(classDb.getNotes()[0].text).toEqual(`${keyword}`); + } + ); + + it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) { + const str = `classDiagram + note ${keyword}`; + expect(() => parser.parse(str)).toThrowError(/(Expecting\s'STR'|Unrecognized\stext)/); + }); }); describe('when parsing class defined in brackets', function () { diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index 7788fcc0c..8fdfced75 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -24,31 +24,50 @@ %x namespace %x namespace-body %% -\%\%\{ { this.begin('open_directive'); return 'open_directive'; } -.*direction\s+TB[^\n]* return 'direction_tb'; -.*direction\s+BT[^\n]* return 'direction_bt'; -.*direction\s+RL[^\n]* return 'direction_rl'; -.*direction\s+LR[^\n]* return 'direction_lr'; -((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } -":" { this.popState(); this.begin('arg_directive'); return ':'; } -\}\%\% { this.popState(); this.popState(); return 'close_directive'; } -((?:(?!\}\%\%).|\n)*) return 'arg_directive'; -\%\%(?!\{)*[^\n]*(\r?\n?)+ /* skip comments */ -\%\%[^\n]*(\r?\n)* /* skip comments */ -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } -(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } -(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} -[\}] { this.popState(); } -[^\}]* return "acc_descr_multiline_value"; +\%\%\{ { this.begin('open_directive'); return 'open_directive'; } +.*direction\s+TB[^\n]* return 'direction_tb'; +.*direction\s+BT[^\n]* return 'direction_bt'; +.*direction\s+RL[^\n]* return 'direction_rl'; +.*direction\s+LR[^\n]* return 'direction_lr'; +((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } +":" { this.popState(); this.begin('arg_directive'); return ':'; } +\}\%\% { this.popState(); this.popState(); return 'close_directive'; } +((?:(?!\}\%\%).|\n)*) return 'arg_directive'; +\%\%(?!\{)*[^\n]*(\r?\n?)+ /* skip comments */ +\%\%[^\n]*(\r?\n)* /* skip comments */ +accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } +accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } +accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +[\}] { this.popState(); } +[^\}]* return "acc_descr_multiline_value"; -\s*(\r?\n)+ return 'NEWLINE'; -\s+ /* skip whitespace */ +\s*(\r?\n)+ return 'NEWLINE'; +\s+ /* skip whitespace */ -"classDiagram-v2" return 'CLASS_DIAGRAM'; -"classDiagram" return 'CLASS_DIAGRAM'; -"[*]" return 'EDGE_STATE'; +"classDiagram-v2" return 'CLASS_DIAGRAM'; +"classDiagram" return 'CLASS_DIAGRAM'; +"[*]" return 'EDGE_STATE'; + +/* +---interactivity command--- +'call' adds a callback to the specified node. 'call' can only be specified when +the line was introduced with 'click'. +'call ()' attaches the function 'callback_name' with the specified +arguments to the node that was specified by 'click'. +Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments. +*/ +"call"[\s]+ this.begin("callback_name"); +\([\s]*\) this.popState(); +\( this.popState(); this.begin("callback_args"); +[^(]* return 'CALLBACK_NAME'; +\) this.popState(); +[^)]* return 'CALLBACK_ARGS'; + +["] this.popState(); +[^"]* return "STR"; +<*>["] this.begin("string"); "namespace" { this.begin('namespace'); return 'NAMESPACE'; } \s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } @@ -60,26 +79,26 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili \s+ /* skip whitespace */ "[*]" return 'EDGE_STATE'; -"class" { this.begin('class'); return 'CLASS';} -\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } -\s+ /* skip whitespace */ -[}] { this.popState(); this.popState(); return 'STRUCT_STOP';} -[{] { this.begin("class-body"); return 'STRUCT_START';} -[}] { this.popState(); return 'STRUCT_STOP'; } -<> return "EOF_IN_STRUCT"; -"[*]" { return 'EDGE_STATE';} -[{] return "OPEN_IN_STRUCT"; -[\n] /* nothing */ -[^{}\n]* { return "MEMBER";} +"class" { this.begin('class'); return 'CLASS';} +\s*(\r?\n)+ { this.popState(); return 'NEWLINE'; } +\s+ /* skip whitespace */ +[}] { this.popState(); this.popState(); return 'STRUCT_STOP';} +[{] { this.begin("class-body"); return 'STRUCT_START';} +[}] { this.popState(); return 'STRUCT_STOP'; } +<> return "EOF_IN_STRUCT"; +"[*]" { return 'EDGE_STATE';} +[{] return "OPEN_IN_STRUCT"; +[\n] /* nothing */ +[^{}\n]* { return "MEMBER";} -<*>"cssClass" return 'CSSCLASS'; -<*>"callback" return 'CALLBACK'; -<*>"link" return 'LINK'; -<*>"click" return 'CLICK'; -<*>"note for" return 'NOTE_FOR'; -<*>"note" return 'NOTE'; -<*>"<<" return 'ANNOTATION_START'; -<*>">>" return 'ANNOTATION_END'; +<*>"cssClass" return 'CSSCLASS'; +<*>"callback" return 'CALLBACK'; +<*>"link" return 'LINK'; +<*>"click" return 'CLICK'; +<*>"note for" return 'NOTE_FOR'; +<*>"note" return 'NOTE'; +<*>"<<" return 'ANNOTATION_START'; +<*>">>" return 'ANNOTATION_END'; /* ---interactivity command--- @@ -87,64 +106,43 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili line was introduced with 'click'. 'href ""' attaches the specified link to the node that was specified by 'click'. */ -<*>"href"[\s]+["] this.begin("href"); -["] this.popState(); -[^"]* return 'HREF'; +<*>"href" return 'HREF'; -/* ----interactivity command--- -'call' adds a callback to the specified node. 'call' can only be specified when -the line was introduced with 'click'. -'call ()' attaches the function 'callback_name' with the specified -arguments to the node that was specified by 'click'. -Function arguments are optional: 'call ()' simply executes 'callback_name' without any arguments. -*/ -<*>"call"[\s]+ this.begin("callback_name"); -\([\s]*\) this.popState(); -\( this.popState(); this.begin("callback_args"); -[^(]* return 'CALLBACK_NAME'; -\) this.popState(); -[^)]* return 'CALLBACK_ARGS'; +[~] this.popState(); +[^~]* return "GENERICTYPE"; +<*>"~" this.begin("generic"); -[~] this.popState(); -[^~]* return "GENERICTYPE"; -<*>[~] this.begin("generic"); +[`] this.popState(); +[^`]+ return "BQUOTE_STR"; +<*>[`] this.begin("bqstring"); -["] this.popState(); -[^"]* return "STR"; -<*>["] this.begin("string"); +<*>"_self" return 'LINK_TARGET'; +<*>"_blank" return 'LINK_TARGET'; +<*>"_parent" return 'LINK_TARGET'; +<*>"_top" return 'LINK_TARGET'; -[`] this.popState(); -[^`]+ return "BQUOTE_STR"; -<*>[`] this.begin("bqstring"); - -<*>"_self" return 'LINK_TARGET'; -<*>"_blank" return 'LINK_TARGET'; -<*>"_parent" return 'LINK_TARGET'; -<*>"_top" return 'LINK_TARGET'; - -<*>\s*\<\| return 'EXTENSION'; -<*>\s*\|\> return 'EXTENSION'; -<*>\s*\> return 'DEPENDENCY'; -<*>\s*\< return 'DEPENDENCY'; -<*>\s*\* return 'COMPOSITION'; -<*>\s*o return 'AGGREGATION'; -<*>\s*\(\) return 'LOLLIPOP'; -<*>\-\- return 'LINE'; -<*>\.\. return 'DOTTED_LINE'; -<*>":"{1}[^:\n;]+ return 'LABEL'; -<*>":"{3} return 'STYLE_SEPARATOR'; -<*>\- return 'MINUS'; -<*>"." return 'DOT'; -<*>\+ return 'PLUS'; -<*>\% return 'PCT'; -<*>"=" return 'EQUALS'; -<*>\= return 'EQUALS'; -<*>\w+ return 'ALPHA'; -<*>"[" return 'SQS'; -<*>"]" return 'SQE'; -<*>[!"#$%&'*+,-.`?\\/] return 'PUNCTUATION'; -<*>[0-9]+ return 'NUM'; +<*>\s*\<\| return 'EXTENSION'; +<*>\s*\|\> return 'EXTENSION'; +<*>\s*\> return 'DEPENDENCY'; +<*>\s*\< return 'DEPENDENCY'; +<*>\s*\* return 'COMPOSITION'; +<*>\s*o return 'AGGREGATION'; +<*>\s*\(\) return 'LOLLIPOP'; +<*>\-\- return 'LINE'; +<*>\.\. return 'DOTTED_LINE'; +<*>":"{1}[^:\n;]+ return 'LABEL'; +<*>":"{3} return 'STYLE_SEPARATOR'; +<*>\- return 'MINUS'; +<*>"." return 'DOT'; +<*>\+ return 'PLUS'; +<*>\% return 'PCT'; +<*>"=" return 'EQUALS'; +<*>\= return 'EQUALS'; +<*>\w+ return 'ALPHA'; +<*>"[" return 'SQS'; +<*>"]" return 'SQE'; +<*>[!"#$%&'*+,-.`?\\/] return 'PUNCTUATION'; +<*>[0-9]+ return 'NUM'; <*>[\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]| [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]| [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]| @@ -206,9 +204,9 @@ Function arguments are optional: 'call ()' simply executes 'callb [\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC]| [\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]| [\uFFD2-\uFFD7\uFFDA-\uFFDC] - return 'UNICODE_TEXT'; -<*>\s return 'SPACE'; -<*><> return 'EOF'; + return 'UNICODE_TEXT'; +<*>\s return 'SPACE'; +<*><> return 'EOF'; /lex @@ -321,7 +319,7 @@ classStatements ; classStatement - : classIdentifier + : classIdentifier | classIdentifier STYLE_SEPARATOR alphaNumToken {yy.setCssClass($1, $3);} | classIdentifier STRUCT_START members STRUCT_STOP {yy.addMembers($1,$3);} | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);} @@ -391,10 +389,10 @@ clickStatement | CLICK className CALLBACK_NAME STR {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);} | CLICK className CALLBACK_NAME CALLBACK_ARGS {$$ = $1;yy.setClickEvent($2, $3, $4);} | CLICK className CALLBACK_NAME CALLBACK_ARGS STR {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);} - | CLICK className HREF {$$ = $1;yy.setLink($2, $3);} - | CLICK className HREF LINK_TARGET {$$ = $1;yy.setLink($2, $3, $4);} - | CLICK className HREF STR {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);} - | CLICK className HREF STR LINK_TARGET {$$ = $1;yy.setLink($2, $3, $5);yy.setTooltip($2, $4);} + | CLICK className HREF STR {$$ = $1;yy.setLink($2, $4);} + | CLICK className HREF STR LINK_TARGET {$$ = $1;yy.setLink($2, $4, $5);} + | CLICK className HREF STR STR {$$ = $1;yy.setLink($2, $4);yy.setTooltip($2, $5);} + | CLICK className HREF STR STR LINK_TARGET {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);} ; cssClassStatement diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison index 0c6820b49..0a2549268 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison @@ -30,7 +30,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili \s+ /* skip whitespace in block */ \b((?:PK)|(?:FK)|(?:UK))\b return 'ATTRIBUTE_KEY' (.*?)[~](.*?)*[~] return 'ATTRIBUTE_WORD'; -[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD' +[\*A-Za-z_][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD' \"[^"]*\" return 'COMMENT'; [\n]+ /* nothing */ "}" { this.popState(); return 'BLOCK_STOP'; } diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js index 6fdc9eaa7..2bf2f5b8c 100644 --- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js +++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js @@ -154,6 +154,26 @@ describe('when parsing ER diagram it...', function () { expect(entities[entity].attributes[2].attributeName).toBe('author-ref[name](1)'); }); + it('should allow asterisk at the start of attribute name', function () { + const entity = 'BOOK'; + const attribute = 'string *title'; + + erDiagram.parser.parse(`erDiagram\n${entity}{\n${attribute}}`); + const entities = erDb.getEntities(); + expect(Object.keys(entities).length).toBe(1); + expect(entities[entity].attributes.length).toBe(1); + }); + + it('should allow asterisks at the start of attribute declared with type and name', () => { + const entity = 'BOOK'; + const attribute = 'id *the_Primary_Key'; + + erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute}}`); + const entities = erDb.getEntities(); + expect(Object.keys(entities).length).toBe(1); + expect(entities[entity].attributes.length).toBe(1); + }); + it('should not allow leading numbers, dashes or brackets', function () { const entity = 'BOOK'; const nonLeadingChars = '0-[]()'; diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 396402702..da838f839 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -37,6 +37,7 @@ const tags = ['active', 'done', 'crit', 'milestone']; let funs = []; let inclusiveEndDates = false; let topAxis = false; +let weekday = 'sunday'; // The serial order of the task in the script let lastOrder = 0; @@ -66,6 +67,7 @@ export const clear = function () { lastOrder = 0; links = {}; commonClear(); + weekday = 'sunday'; }; export const setAxisFormat = function (txt) { @@ -179,6 +181,14 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) { return excludes.includes(date.format(dateFormat.trim())); }; +export const setWeekday = function (txt) { + weekday = txt; +}; + +export const getWeekday = function () { + return weekday; +}; + /** * TODO: fully document what this function does and what types it accepts * @@ -759,6 +769,8 @@ export default { bindFunctions, parseDuration, isInvalidDate, + setWeekday, + getWeekday, }; /** diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 215a4df29..522f59e2c 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -13,7 +13,13 @@ import { timeMinute, timeHour, timeDay, - timeWeek, + timeMonday, + timeTuesday, + timeWednesday, + timeThursday, + timeFriday, + timeSaturday, + timeSunday, timeMonth, } from 'd3'; import common from '../common/common.js'; @@ -24,6 +30,20 @@ export const setConf = function () { log.debug('Something is calling, setConf, remove the call'); }; +/** + * This will map any day of the week that can be set in the `weekday` option to + * the corresponding d3-time function that is used to calculate the ticks. + */ +const mapWeekdayToTimeFunction = { + monday: timeMonday, + tuesday: timeTuesday, + wednesday: timeWednesday, + thursday: timeThursday, + friday: timeFriday, + saturday: timeSaturday, + sunday: timeSunday, +}; + /** * For this issue: * https://github.com/mermaid-js/mermaid/issues/1618 @@ -561,6 +581,8 @@ export const draw = function (text, id, version, diagObj) { if (resultTickInterval !== null) { const every = resultTickInterval[1]; const interval = resultTickInterval[2]; + const weekday = diagObj.db.getWeekday() || conf.weekday; + switch (interval) { case 'minute': bottomXAxis.ticks(timeMinute.every(every)); @@ -572,7 +594,7 @@ export const draw = function (text, id, version, diagObj) { bottomXAxis.ticks(timeDay.every(every)); break; case 'week': - bottomXAxis.ticks(timeWeek.every(every)); + bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every)); break; case 'month': bottomXAxis.ticks(timeMonth.every(every)); @@ -600,6 +622,8 @@ export const draw = function (text, id, version, diagObj) { if (resultTickInterval !== null) { const every = resultTickInterval[1]; const interval = resultTickInterval[2]; + const weekday = diagObj.db.getWeekday() || conf.weekday; + switch (interval) { case 'minute': topXAxis.ticks(timeMinute.every(every)); @@ -611,7 +635,7 @@ export const draw = function (text, id, version, diagObj) { topXAxis.ticks(timeDay.every(every)); break; case 'week': - topXAxis.ticks(timeWeek.every(every)); + topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every)); break; case 'month': topXAxis.ticks(timeMonth.every(every)); diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index 0eb45ec41..f7fd40c1b 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -77,24 +77,31 @@ that id. [\s\n] this.popState(); [^\s\n]* return 'click'; -"gantt" return 'gantt'; -"dateFormat"\s[^#\n;]+ return 'dateFormat'; -"inclusiveEndDates" return 'inclusiveEndDates'; -"topAxis" return 'topAxis'; -"axisFormat"\s[^#\n;]+ return 'axisFormat'; -"tickInterval"\s[^#\n;]+ return 'tickInterval'; -"includes"\s[^#\n;]+ return 'includes'; -"excludes"\s[^#\n;]+ return 'excludes'; -"todayMarker"\s[^\n;]+ return 'todayMarker'; -\d\d\d\d"-"\d\d"-"\d\d return 'date'; -"title"\s[^#\n;]+ return 'title'; -"accDescription"\s[^#\n;]+ return 'accDescription' -"section"\s[^#:\n;]+ return 'section'; -[^#:\n;]+ return 'taskTxt'; -":"[^#\n;]+ return 'taskData'; -":" return ':'; -<> return 'EOF'; -. return 'INVALID'; +"gantt" return 'gantt'; +"dateFormat"\s[^#\n;]+ return 'dateFormat'; +"inclusiveEndDates" return 'inclusiveEndDates'; +"topAxis" return 'topAxis'; +"axisFormat"\s[^#\n;]+ return 'axisFormat'; +"tickInterval"\s[^#\n;]+ return 'tickInterval'; +"includes"\s[^#\n;]+ return 'includes'; +"excludes"\s[^#\n;]+ return 'excludes'; +"todayMarker"\s[^\n;]+ return 'todayMarker'; +weekday\s+monday return 'weekday_monday' +weekday\s+tuesday return 'weekday_tuesday' +weekday\s+wednesday return 'weekday_wednesday' +weekday\s+thursday return 'weekday_thursday' +weekday\s+friday return 'weekday_friday' +weekday\s+saturday return 'weekday_saturday' +weekday\s+sunday return 'weekday_sunday' +\d\d\d\d"-"\d\d"-"\d\d return 'date'; +"title"\s[^#\n;]+ return 'title'; +"accDescription"\s[^#\n;]+ return 'accDescription' +"section"\s[^#:\n;]+ return 'section'; +[^#:\n;]+ return 'taskTxt'; +":"[^#\n;]+ return 'taskData'; +":" return ':'; +<> return 'EOF'; +. return 'INVALID'; /lex @@ -121,6 +128,16 @@ line | EOF { $$=[];} ; +weekday + : weekday_monday { yy.setWeekday("monday");} + | weekday_tuesday { yy.setWeekday("tuesday");} + | weekday_wednesday { yy.setWeekday("wednesday");} + | weekday_thursday { yy.setWeekday("thursday");} + | weekday_friday { yy.setWeekday("friday");} + | weekday_saturday { yy.setWeekday("saturday");} + | weekday_sunday { yy.setWeekday("sunday");} + ; + statement : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);} | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);} @@ -130,6 +147,7 @@ statement | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);} | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} + | weekday | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);} | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js index 020bab0ed..e7ce1ffa4 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js @@ -180,4 +180,12 @@ row2`; expect(ganttDb.getAccTitle()).toBe(expectedTitle); expect(ganttDb.getAccDescription()).toBe(expectedAccDescription); }); + + it.each(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'])( + 'should allow for setting the starting weekday to %s for tick interval', + (day) => { + parser.parse(`gantt\nweekday ${day}`); + expect(ganttDb.getWeekday()).toBe(day); + } + ); }); diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index 8d88c601d..2b88cfe7e 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -19,12 +19,14 @@ let branchPos = {}; let commitPos = {}; let lanes = []; let maxPos = 0; +let dir = 'LR'; const clear = () => { branchPos = {}; commitPos = {}; allCommitsDict = {}; maxPos = 0; lanes = []; + dir = 'LR'; }; /** @@ -77,6 +79,10 @@ const drawCommits = (svg, commits, modifyGraph) => { const gLabels = svg.append('g').attr('class', 'commit-labels'); let pos = 0; + if (dir === 'TB') { + pos = 30; + } + const keys = Object.keys(commits); const sortedKeys = keys.sort((a, b) => { return commits[a].seq - commits[b].seq; @@ -84,8 +90,9 @@ const drawCommits = (svg, commits, modifyGraph) => { sortedKeys.forEach((key) => { const commit = commits[key]; - const y = branchPos[commit.branch].pos; - const x = pos + 10; + const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos; + const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10; + // Don't draw the commits now but calculate the positioning which is used by the branch lines etc. if (modifyGraph) { let typeClass; @@ -208,7 +215,11 @@ const drawCommits = (svg, commits, modifyGraph) => { } } } - commitPos[commit.id] = { x: pos + 10, y: y }; + if (dir === 'TB') { + commitPos[commit.id] = { x: x, y: pos + 10 }; + } else { + commitPos[commit.id] = { x: pos + 10, y: y }; + } // The first iteration over the commits are for positioning purposes, this // is required for drawing the lines. The circles and labels is drawn after the labels @@ -240,14 +251,27 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('y', y + 13.5) .attr('width', bbox.width + 2 * py) .attr('height', bbox.height + 2 * py); - text.attr('x', pos + 10 - bbox.width / 2); + + if (dir === 'TB') { + labelBkg.attr('x', x - (bbox.width + 4 * px + 5)).attr('y', y - 12); + text.attr('x', x - (bbox.width + 4 * px)).attr('y', y + bbox.height - 12); + } + + if (dir !== 'TB') { + text.attr('x', pos + 10 - bbox.width / 2); + } if (gitGraphConfig.rotateCommitLabel) { - let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; - let r_y = 10 + (bbox.width / 25) * 8.5; - wrapper.attr( - 'transform', - 'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')' - ); + if (dir === 'TB') { + text.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')'); + labelBkg.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')'); + } else { + let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; + let r_y = 10 + (bbox.width / 25) * 8.5; + wrapper.attr( + 'transform', + 'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')' + ); + } } } if (commit.tag) { @@ -280,6 +304,30 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('cy', ly) .attr('r', 1.5) .attr('class', 'tag-hole'); + + if (dir === 'TB') { + rect + .attr('class', 'tag-label-bkg') + .attr( + 'points', + ` + ${x},${pos + py} + ${x},${pos - py} + ${x + 10},${pos - h2 - py} + ${x + 10 + tagBbox.width + px},${pos - h2 - py} + ${x + 10 + tagBbox.width + px},${pos + h2 + py} + ${x + 10},${pos + h2 + py}` + ) + .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')'); + hole + .attr('cx', x + px / 2) + .attr('cy', pos) + .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')'); + tag + .attr('x', x + 5) + .attr('y', pos + 3) + .attr('transform', 'translate(14,14) rotate(45, ' + x + ',' + pos + ')'); + } } } pos += 50; @@ -365,46 +413,94 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { colorClassNum = branchPos[commit2.branch].index; const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y); + const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x); - if (p1.y < p2.y) { - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${ - p2.x - radius - } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; + if (dir === 'TB') { + if (p1.x < p2.x) { + lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${ + p1.y + offset + } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; + } else { + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${ + p1.y + offset + } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + } } else { - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${ - p1.x + offset - } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`; + if (p1.y < p2.y) { + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${ + p1.x + offset + } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; + } else { + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${ + p1.x + offset + } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`; + } } } else { - if (p1.y < p2.y) { - arc = 'A 20 20, 0, 0, 0,'; - radius = 20; - offset = 20; + if (dir === 'TB') { + if (p1.x < p2.x) { + arc = 'A 20 20, 0, 0, 0,'; + arc2 = 'A 20 20, 0, 0, 1,'; + radius = 20; + offset = 20; - // Figure out the color of the arrow,arrows going down take the color from the destination branch - colorClassNum = branchPos[commit2.branch].index; + // Figure out the color of the arrow,arrows going down take the color from the destination branch + colorClassNum = branchPos[commit2.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ - p2.x - } ${p2.y}`; - } - if (p1.y > p2.y) { - arc = 'A 20 20, 0, 0, 0,'; - radius = 20; - offset = 20; + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${ + p1.y + offset + } L ${p2.x} ${p2.y}`; + } + if (p1.x > p2.x) { + arc = 'A 20 20, 0, 0, 0,'; + arc2 = 'A 20 20, 0, 0, 1,'; + radius = 20; + offset = 20; - // Arrows going up take the color from the source branch - colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ - p2.x - } ${p2.y}`; - } + // Arrows going up take the color from the source branch + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${ + p2.y + } L ${p2.x} ${p2.y}`; + } - if (p1.y === p2.y) { - colorClassNum = branchPos[commit1.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ - p2.x - } ${p2.y}`; + if (p1.x === p2.x) { + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${ + p2.y + radius + } L ${p2.x} ${p2.y}`; + } + } else { + if (p1.y < p2.y) { + arc = 'A 20 20, 0, 0, 0,'; + radius = 20; + offset = 20; + + // Figure out the color of the arrow,arrows going down take the color from the destination branch + colorClassNum = branchPos[commit2.branch].index; + + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ + p2.x + } ${p2.y}`; + } + if (p1.y > p2.y) { + arc = 'A 20 20, 0, 0, 0,'; + radius = 20; + offset = 20; + + // Arrows going up take the color from the source branch + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ + p2.x + } ${p2.y}`; + } + + if (p1.y === p2.y) { + colorClassNum = branchPos[commit1.branch].index; + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ + p2.x + } ${p2.y}`; + } } } svg @@ -445,6 +541,13 @@ const drawBranches = (svg, branches) => { line.attr('y2', pos); line.attr('class', 'branch branch' + adjustIndexForTheme); + if (dir === 'TB') { + line.attr('y1', 30); + line.attr('x1', pos); + line.attr('y2', maxPos); + line.attr('x2', pos); + } + lanes.push(pos); let name = branch.name; @@ -467,7 +570,6 @@ const drawBranches = (svg, branches) => { .attr('y', -bbox.height / 2 + 8) .attr('width', bbox.width + 18) .attr('height', bbox.height + 4); - label.attr( 'transform', 'translate(' + @@ -476,7 +578,13 @@ const drawBranches = (svg, branches) => { (pos - bbox.height / 2 - 1) + ')' ); - bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')'); + if (dir === 'TB') { + bkg.attr('x', pos - bbox.width / 2 - 10).attr('y', 0); + label.attr('transform', 'translate(' + (pos - bbox.width / 2 - 5) + ', ' + 0 + ')'); + } + if (dir !== 'TB') { + bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')'); + } }); }; @@ -495,15 +603,24 @@ export const draw = function (txt, id, ver, diagObj) { allCommitsDict = diagObj.db.getCommits(); const branches = diagObj.db.getBranchesAsObjArray(); - - // Position branches vertically + dir = diagObj.db.getDirection(); + const diagram = select(`[id="${id}"]`); + // Position branches let pos = 0; branches.forEach((branch, index) => { - branchPos[branch.name] = { pos, index }; - pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0); - }); + const labelElement = drawText(branch.name); + const g = diagram.append('g'); + const branchLabel = g.insert('g').attr('class', 'branchLabel'); + const label = branchLabel.insert('g').attr('class', 'label branch-label'); + label.node().appendChild(labelElement); + let bbox = labelElement.getBBox(); - const diagram = select(`[id="${id}"]`); + branchPos[branch.name] = { pos, index }; + pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + (dir === 'TB' ? bbox.width / 2 : 0); + label.remove(); + branchLabel.remove(); + g.remove(); + }); drawCommits(diagram, allCommitsDict, false); if (gitGraphConfig.showBranches) { diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison index 1c87f3bf3..9ff5623f8 100644 --- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison +++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison @@ -51,7 +51,7 @@ cherry\-pick(?=\s|$) return 'CHERRY_PICK'; // "reset" return 'RESET'; checkout(?=\s|$) return 'CHECKOUT'; "LR" return 'DIR'; -"BT" return 'DIR'; +"TB" return 'DIR'; ":" return ':'; "^" return 'CARET' "options"\r?\n this.begin("options"); // diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js index 689d7a0e5..1b3e0f27e 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer.js @@ -63,20 +63,6 @@ export const draw = function (text, id, _version, diagObj) { const diagram = root.select(`[id='${id}']`); insertMarkers(diagram); - // Layout graph, Create a new directed graph - const graph = new graphlib.Graph({ - multigraph: true, - compound: true, - // acyclicer: 'greedy', - rankdir: 'RL', - // ranksep: '20' - }); - - // Default to assigning a new object as a label for each new edge. - graph.setDefaultEdgeLabel(function () { - return {}; - }); - const rootDoc = diagObj.db.getRootDoc(); renderDoc(rootDoc, diagram, undefined, false, root, doc, diagObj); diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 330b088d9..2644fa088 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -35,7 +35,12 @@ export default defineConfig({ themeConfig: { nav: nav(), editLink: { - pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path', + pattern: ({ filePath, frontmatter }) => { + if (typeof frontmatter.editLink === 'string') { + return frontmatter.editLink; + } + return `https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/${filePath}`; + }, text: 'Edit this page on GitHub', }, sidebar: { diff --git a/packages/mermaid/src/docs/community/development.md b/packages/mermaid/src/docs/community/development.md index a5aa39539..93146f0c3 100644 --- a/packages/mermaid/src/docs/community/development.md +++ b/packages/mermaid/src/docs/community/development.md @@ -212,6 +212,9 @@ If the users have no way to know that things have changed, then you haven't real Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused. The documentation has to be updated to users know that things have changed and added! +If you are adding a new feature, add `(v+)` in the title or description. It will be replaced automatically with the current version number when the release happens. + +eg: `# Feature Name (v+)` We know it can sometimes be hard to code _and_ write user documentation. diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md index a072ae408..740b3509b 100644 --- a/packages/mermaid/src/docs/config/usage.md +++ b/packages/mermaid/src/docs/config/usage.md @@ -225,7 +225,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site. -The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console. +The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console. ```html