diff --git a/.eslintignore b/.eslintignore index 04348c410..1db5125d0 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,4 +4,5 @@ docs/Setup.md cypress.config.js cypress/plugins/index.js coverage -*.json \ No newline at end of file +*.json +node_modules diff --git a/.github/ISSUE_TEMPLATE/diagram_proposal.yml b/.github/ISSUE_TEMPLATE/diagram_proposal.yml index 67dad5d3a..59bda6d6d 100644 --- a/.github/ISSUE_TEMPLATE/diagram_proposal.yml +++ b/.github/ISSUE_TEMPLATE/diagram_proposal.yml @@ -3,6 +3,7 @@ description: Suggest a new Diagram Type to add to Mermaid. labels: - 'Status: Triage' - 'Type: Enhancement' + - 'Type: New Diagram' body: - type: markdown @@ -17,6 +18,14 @@ body: - Use a clear and concise title - Fill out the text fields with as much detail as possible. - Never be shy to give us screenshots and/or code samples. It will help! + + ## Example issues + + Refer to the discussions here to get an idea of how the diagram syntax is created. + + - https://github.com/mermaid-js/mermaid/issues/4269 + - https://github.com/mermaid-js/mermaid/issues/4282 + - type: textarea attributes: label: Proposal @@ -35,8 +44,17 @@ body: description: If applicable, add screenshots to show possible examples of how the diagram may look like. - type: textarea attributes: - label: Code Sample + label: Syntax description: |- - If applicable, add a code sample for how to implement this new diagram. - The text will automatically be rendered as JavaScript code. - render: javascript + If possible, include a syntax which could be used to write the diagram. + Try to add one or two examples of valid use-cases here. + - type: dropdown + id: implementation + attributes: + label: Implementation + description: |- + Would you like to implement this yourself, or is it a proposal for the community? + If there is no corresponding PR from your side after 30 days, the diagram will be open for everyone to implement. + options: + - I will try and implement it myself. + - This is a proposal which I'd love to see built into mermaid by the wonderful community. diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index f877ca265..64637c5fb 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -33,7 +33,7 @@ jobs: # Otherwise (e.g. if running from fork), we run on a single container only if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }} with: - start: pnpm run dev + start: pnpm run dev:coverage wait-on: 'http://localhost:9000' # Disable recording if we don't have an API key # e.g. if this action was run from a fork @@ -41,7 +41,16 @@ jobs: parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }} env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} - + VITEST_COVERAGE: true + - name: Upload Coverage to Codecov + uses: codecov/codecov-action@v3 + if: steps.cypress.conclusion == 'success' + with: + files: coverage/cypress/lcov.info + flags: e2e + name: mermaid-codecov + fail_ci_if_error: true + verbose: true - name: Upload Artifacts uses: actions/upload-artifact@v3 if: ${{ failure() && steps.cypress.conclusion == 'failure' }} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 6c01ba1b9..6bae6b71f 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -31,7 +31,7 @@ jobs: - name: Run Unit Tests run: | - pnpm run ci --coverage + pnpm test:coverage - name: Run ganttDb tests using California timezone env: @@ -39,13 +39,19 @@ jobs: # since some days have 25 hours instead of 24. TZ: America/Los_Angeles run: | - pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts + pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage - - name: Upload Coverage to Coveralls - # it feels a bit weird to use @master, but that's what the docs use - # (coveralls also doesn't publish a @v1 we can use) - # https://github.com/marketplace/actions/coveralls-github-action - uses: coverallsapp/github-action@master + - name: Upload Coverage to Codecov + uses: codecov/codecov-action@v3 with: - github-token: ${{ secrets.GITHUB_TOKEN }} - flag-name: unit + files: ./coverage/vitest/lcov.info + flags: unit + name: mermaid-codecov + fail_ci_if_error: true + verbose: true + # Coveralls is throwing 500. Disabled for now. + # - name: Upload Coverage to Coveralls + # uses: coverallsapp/github-action@v2 + # with: + # github-token: ${{ secrets.GITHUB_TOKEN }} + # flag-name: unit diff --git a/.gitignore b/.gitignore index efbfc8b36..009c6dfac 100644 --- a/.gitignore +++ b/.gitignore @@ -3,8 +3,10 @@ node_modules/ coverage/ .idea/ +.pnpm-store/ dist +v8-compile-cache-0 yarn-error.log .npmrc @@ -39,3 +41,5 @@ stats/ **/user-avatars/* **/contributor-names.json +.pnpm-store +.nyc_output diff --git a/.lycheeignore b/.lycheeignore index 5f7b9679e..d22d3cb15 100644 --- a/.lycheeignore +++ b/.lycheeignore @@ -9,3 +9,9 @@ https://twitter.com/mermaidjs_ # Don't check files that are generated during the build via `pnpm docs:code` packages/mermaid/src/docs/config/setup/* + +# Ignore localhost +http://localhost:3333/ + +# Ignore slack invite +https://join.slack.com/ diff --git a/.vite/build.ts b/.vite/build.ts index c2f8f08f5..85c9b7fa0 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -6,10 +6,12 @@ import { readFileSync } from 'fs'; import typescript from '@rollup/plugin-typescript'; import { visualizer } from 'rollup-plugin-visualizer'; import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js'; +import istanbul from 'vite-plugin-istanbul'; const visualize = process.argv.includes('--visualize'); const watch = process.argv.includes('--watch'); const mermaidOnly = process.argv.includes('--mermaid'); +const coverage = process.env.VITE_COVERAGE === 'true'; const __dirname = fileURLToPath(new URL('.', import.meta.url)); const sourcemap = false; @@ -44,6 +46,11 @@ const packageOptions = { packageName: 'mermaid-example-diagram', file: 'detector.ts', }, + 'mermaid-zenuml': { + name: 'mermaid-zenuml', + packageName: 'mermaid-zenuml', + file: 'detector.ts', + }, }; interface BuildOptions { @@ -116,6 +123,12 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) jisonPlugin(), // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite typescript({ compilerOptions: { declaration: false } }), + istanbul({ + exclude: ['node_modules', 'test/', '__mocks__'], + extension: ['.js', '.ts'], + requireEnv: true, + forceBuildInstrument: coverage, + }), ...visualizerOptions(packageName, core), ], }; @@ -146,6 +159,7 @@ if (watch) { build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' })); if (!mermaidOnly) { build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' })); } } else if (visualize) { await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' })); diff --git a/.vite/jisonTransformer.ts b/.vite/jisonTransformer.ts index a5734e125..314df8a33 100644 --- a/.vite/jisonTransformer.ts +++ b/.vite/jisonTransformer.ts @@ -1,8 +1,6 @@ -// @ts-ignore No typings for jison import jison from 'jison'; export const transformJison = (src: string): string => { - // @ts-ignore No typings for jison const parser = new jison.Generator(src, { moduleType: 'js', 'token-stack': true, diff --git a/.vite/server.ts b/.vite/server.ts index 5a86b3d5b..41e510c83 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -15,6 +15,7 @@ async function createServer() { app.use(cors()); app.use(express.static('./packages/mermaid/dist')); + app.use(express.static('./packages/mermaid-zenuml/dist')); app.use(express.static('./packages/mermaid-example-diagram/dist')); app.use(vite.middlewares); app.use(express.static('demos')); diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 150a22341..e8ac09325 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,14 +1,10 @@ # Contributing -So you want to help? That's great! +Please read in detail about how to contribute documentation and code on the [Mermaid documentation site.](https://mermaid-js.github.io/mermaid/#/development) -![Happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif) +--- -Here are a few things to know to get you started on the right path. - -Below link will help you making a copy of the repository in your local system. - -https://docs.github.com/en/get-started/quickstart/fork-a-repo +# Mermaid contribution cheat-sheet ## Requirements @@ -18,163 +14,58 @@ https://docs.github.com/en/get-started/quickstart/fork-a-repo ## Development Installation +If you don't have direct access to push to mermaid repositories, make a fork first. Then clone. Or clone directly from mermaid-js: + ```bash git clone git@github.com:mermaid-js/mermaid.git cd mermaid +``` + +Install required packages: + +```bash # npx is required for first install as volta support for pnpm is not added yet. npx pnpm install pnpm test ``` -## Committing code +### Docker -We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this: - -- Large changes reviewed by knsv or other developer asked to review by knsv -- Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators -- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits) - -To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text. - -One example: - -`feature/945_state_diagrams` - -Another: - -`bug/123_nasty_bug_branch` - -## Committing documentation - -Less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator. - -The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax). - -### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) - -The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes. -The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory. - -After editing files in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory, be sure to run `pnpm install` and `pnpm run --filter mermaid docs:build` locally to build the `/docs` directory. - -```mermaid -flowchart LR - classDef default fill:#fff,color:black,stroke:black - - source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"] +If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands: +```bash +./run install # npx pnpm install +./run test # pnpm test ``` -You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box. -Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly. +## Testing -```` -```note -Note content +```bash +# Run unit test +pnpm test +# Run unit test in watch mode +pnpm test:watch +# Run E2E test +pnpm e2e +# Debug E2E tests +pnpm dev +pnpm cypress:open # in another terminal ``` -```tip -Tip content +## Branch name format: + +```text + [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces] ``` -```warning -Warning content -``` +eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red_text` -```danger -Danger content -``` +## Documentation -```` +Documentation is necessary for all non bugfix/refactoring changes. + +Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) **_DO NOT CHANGE FILES IN `/docs`_** -### The official documentation site - -**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.** - -If you want to preview the whole documentation site on your machine: - -```sh -cd packages/mermaid -pnpm i -pnpm docs:dev -``` - -You can now build and serve the documentation site: - -```sh -pnpm docs:serve -``` - -## Branching - -Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop. - -Once development is done we branch a release branch from develop for testing. - -Once the release happens we merge the release branch to master and kill the release branch. - -This means... **branch off your pull request from develop** - -## Content of a pull request - -A new feature has been born. Great! But without the steps below it might just ... fade away ... - -### **Add unit tests for the parsing part** - -This is important so that, if someone else does a change to the grammar that does not know about this great feature, gets notified early on when that change breaks the parser. Another important aspect is that without proper parsing tests refactoring is pretty much impossible. - -### **Add e2e tests** - -This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks! - -To start working with the e2e tests, run `pnpm run dev` to start the dev server, after that start cypress by running `pnpm exec cypress open` in the mermaid folder. - -The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and renders that diagram in cypress. - -When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs. - -This is what a rendering test looks like: - -```javascript -it('should render forks and joins', () => { - imgSnapshotTest( - ` - stateDiagram - state fork_state <<fork>> - [*] --> fork_state - fork_state --> State2 - fork_state --> State3 - - state join_state <<join>> - State2 --> join_state - State3 --> join_state - join_state --> State4 - State4 --> [*] - `, - { logLevel: 0 } - ); - cy.get('svg'); -}); -``` - -### **Add documentation for it** - -Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature? - -The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated. - -#### Adding to or changing the documentation organization - -If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`. - -When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/ - -## Last words - -Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So if you get stuck, ask for help and hints in the slack forum. If you want to show off something good, show it off there. - [Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) - -![A superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif) diff --git a/README.md b/README.md index 941e1fd18..f1df0966b 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Generate diagrams from markdown-like text. [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) -[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) +[![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) @@ -410,7 +410,7 @@ _Unfortunately you can not have a cake and eat it at the same time which in this ## Reporting vulnerabilities -To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. +To report a vulnerability, please e-mail with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue. ## Appreciation diff --git a/README.zh-CN.md b/README.zh-CN.md index 2653ac72b..9af34998d 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -27,7 +27,7 @@ Mermaid [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) -[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) +[![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts index b472a3181..97bd01665 100644 --- a/__mocks__/d3.ts +++ b/__mocks__/d3.ts @@ -1,4 +1,3 @@ -// @ts-nocheck TODO: Fix TS import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js'; export const select = function () { diff --git a/cSpell.json b/cSpell.json index 19a7edf66..803eee3b6 100644 --- a/cSpell.json +++ b/cSpell.json @@ -7,6 +7,7 @@ "alois", "aloisklink", "antiscript", + "antlr", "appli", "applitools", "asciidoctor", @@ -84,6 +85,7 @@ "mkdocs", "mmorel", "mult", + "nextra", "orlandoni", "pathe", "pbrolin", @@ -113,6 +115,7 @@ "stopx", "stopy", "stylis", + "subhash-halder", "substate", "sveidqvist", "swimm", @@ -127,6 +130,7 @@ "ugge", "unist", "unocss", + "upvoting", "valign", "verdana", "viewports", @@ -135,7 +139,8 @@ "vitepress", "vueuse", "xlink", - "yash" + "yash", + "zenuml" ], "patterns": [ { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" }, diff --git a/codecov.yaml b/codecov.yaml new file mode 100644 index 000000000..b268d6680 --- /dev/null +++ b/codecov.yaml @@ -0,0 +1,6 @@ +comment: + layout: 'reach, diff, flags, files' + behavior: default + require_changes: false # if true: only post the comment if coverage changes + require_base: no # [yes :: must have a base report to post] + require_head: yes # [yes :: must have a head report to post] diff --git a/cypress.config.cjs b/cypress.config.cjs index 6fe0ae5ab..30076c56e 100644 --- a/cypress.config.cjs +++ b/cypress.config.cjs @@ -2,12 +2,14 @@ const { defineConfig } = require('cypress'); const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin'); +const coverage = require('@cypress/code-coverage/task'); module.exports = defineConfig({ projectId: 'n2sma2', e2e: { specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}', setupNodeEvents(on, config) { + coverage(on, config); addMatchImageSnapshotPlugin(on, config); // copy any needed variables from process.env to config.env config.env.useAppli = process.env.USE_APPLI ? true : false; diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index 7ec960b97..4d13b3590 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -60,7 +60,7 @@ export const renderGraph = (graphStr, options, api) => { openURLAndVerifyRendering(url, options); }; -const openURLAndVerifyRendering = (url, options, validation = undefined) => { +export const openURLAndVerifyRendering = (url, options, validation = undefined) => { const useAppli = Cypress.env('useAppli'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js index 8f28d9f53..912f35728 100644 --- a/cypress/integration/other/ghsa.spec.js +++ b/cypress/integration/other/ghsa.spec.js @@ -1,4 +1,4 @@ -import { urlSnapshotTest } from '../../helpers/util.js'; +import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js'; describe('CSS injections', () => { it('should not allow CSS injections outside of the diagram', () => { @@ -13,4 +13,11 @@ describe('CSS injections', () => { flowchart: { htmlLabels: false }, }); }); + it('should not allow manipulating styletags using arrowheads', () => { + openURLAndVerifyRendering('http://localhost:9000/xss23-css.html', { + logLevel: 1, + arrowMarkerAbsolute: false, + flowchart: { htmlLabels: true }, + }); + }); }); diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index d0ef42c5d..4f90646a2 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -684,6 +684,20 @@ A --> B { titleTopMargin: 0 } ); }); + it('elk: should include classes on the edges', () => { + renderGraph( + `flowchart-elk TD + A --> B --> C --> D + `, + {} + ); + cy.get('svg').should((svg) => { + const edges = svg.querySelectorAll('.edges > path'); + edges.forEach((edge) => { + expect(edge).to.have.class('flowchart-link'); + }); + }); + }); describe('Markdown strings flowchart-elk (#4220)', () => { describe('html labels', () => { it('With styling and classes', () => { diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index eaa14ed50..305c55b21 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -172,7 +172,7 @@ describe('Flowchart v2', () => { ); }); - it('52: handle nested subgraphs in several levels', () => { + it('52: handle nested subgraphs in several levels.', () => { imgSnapshotTest( `flowchart TB b-->B diff --git a/cypress/integration/rendering/info.spec.js b/cypress/integration/rendering/info.spec.js deleted file mode 100644 index bcfce30e3..000000000 --- a/cypress/integration/rendering/info.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -import { imgSnapshotTest } from '../../helpers/util.js'; - -describe('Sequencediagram', () => { - it('should render a simple info diagrams', () => { - imgSnapshotTest( - ` - info - showInfo - `, - {} - ); - }); -}); diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts new file mode 100644 index 000000000..3db74c980 --- /dev/null +++ b/cypress/integration/rendering/info.spec.ts @@ -0,0 +1,11 @@ +import { imgSnapshotTest } from '../../helpers/util.js'; + +describe('info diagram', () => { + it('should handle an info definition', () => { + imgSnapshotTest(`info`); + }); + + it('should handle an info definition with showInfo', () => { + imgSnapshotTest(`info showInfo`); + }); +}); diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts index 94b3f9ca0..e390beaee 100644 --- a/cypress/integration/rendering/mindmap.spec.ts +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -52,6 +52,17 @@ root[A root with a long text that wraps to keep the node size in check] ); }); + it('a root with wrapping text and long words that exceed width', () => { + imgSnapshotTest( + `mindmap +root[A few smaller words but then averylongsetofcharacterswithoutwhitespacetoseparate that we expect to wrapontonextlinesandnotexceedwidthparameters] + `, + {}, + undefined, + shouldHaveRoot + ); + }); + it('a root with an icon', () => { imgSnapshotTest( `mindmap diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index e5459637b..185cc4133 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -88,6 +88,16 @@ context('Sequence diagram', () => { {} ); }); + it('should handle empty lines', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>John: Hello John
+ John-->>Alice: Great

day! + `, + {} + ); + }); it('should handle line breaks and wrap annotations', () => { imgSnapshotTest( ` diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js new file mode 100644 index 000000000..f317fbe82 --- /dev/null +++ b/cypress/integration/rendering/zenuml.spec.js @@ -0,0 +1,19 @@ +import { imgSnapshotTest } from '../../helpers/util.js'; + +describe('Zen UML', () => { + it('Basic Zen UML diagram', () => { + imgSnapshotTest( + ` + zenuml + A.method() { + if(x) { + B.method() { + selfCall() { return X } + } + } + } + `, + {} + ); + }); +}); diff --git a/cypress/platform/info.html b/cypress/platform/info.html deleted file mode 100644 index c35446153..000000000 --- a/cypress/platform/info.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - -

info below

-
-info
-    
- - - diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index a99c150f1..0b566e329 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -1,5 +1,6 @@ import mermaid2 from './mermaid.esm.mjs'; import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs'; +import zenUml from '../../packages/mermaid-zenuml/dist/mermaid-zenuml.core.mjs'; function b64ToUtf8(str) { return decodeURIComponent(escape(window.atob(str))); @@ -44,7 +45,7 @@ const contentLoaded = async function () { document.getElementsByTagName('body')[0].appendChild(div); } - await mermaid2.registerExternalDiagrams([externalExample]); + await mermaid2.registerExternalDiagrams([externalExample, zenUml]); mermaid2.initialize(graphObj.mermaid); await mermaid2.run(); } diff --git a/cypress/platform/xss23-css.html b/cypress/platform/xss23-css.html new file mode 100644 index 000000000..cc5b6f0bf --- /dev/null +++ b/cypress/platform/xss23-css.html @@ -0,0 +1,85 @@ + + + + + + + + + +
Security check
+
+
+
+
+
+ + + diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index 69d93b4a4..ef985866e 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -13,8 +13,8 @@ // https://on.cypress.io/configuration // *********************************************************** +import '@cypress/code-coverage/support'; import '@applitools/eyes-cypress/commands'; - // Import commands.js using ES2015 syntax: import './commands'; diff --git a/demos/flowchart.html b/demos/flowchart.html index 5166308d9..197a62554 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -1556,6 +1556,34 @@
+
+    graph TD
+      A([Start]) ==> B[Step 1]
+      B ==> C{Flow 1}
+      C -- Choice 1.1 --> D[Step 2.1]
+      C -- Choice 1.3 --> I[Step 2.3]
+      C == Choice 1.2 ==> E[Step 2.2]
+      D --> F{Flow 2}
+      E ==> F{Flow 2}
+      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
+      H[Feedback node] ==> B[Step 1]
+      F{Flow 2} == Choice 2.2 ==> G((Finish))
+      
+      linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
+
+      classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
+      classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px      
+      classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
+      classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
+
+      class A start_node;
+      class B,C,E,F,H active_node;
+      class D unactive_node;
+      class G finish_node;
+      class I bugged_node
+    
+
+

Anchor for "link-clicked" test

+ + diff --git a/demos/zenuml.html b/demos/zenuml.html new file mode 100644 index 000000000..a567d38fe --- /dev/null +++ b/demos/zenuml.html @@ -0,0 +1,53 @@ + + + + + + Mermaid Zenuml Test Page + + + +

Zenuml demos

+
+		zenuml
+      title Sync Messages (Design Pattern: Adapter)
+			@Starter(Client)
+      Adapter.interfaceMethod() {
+        translateParameter(parameter)
+
+        result = Implementation.implementationMethod()
+
+        translateResult()
+        return translatedResult
+      }
+    
+
+		zenuml
+      title Async Messages (SPA Authentication)
+      // ```
+      // GET https://${account.namespace}/authorize/?
+      // response_type=token
+      // &client_id=${account.clientId}
+      // &redirect_url=YOUR_CALLBACK_URL
+      // &state=VALUE_THAT_SURVIVES_REDIRECTS
+      // &scope=openid
+      // ```
+      Browser->Auth0: 1. initiate the authentication
+      Auth0->"Identity Provider": 2. OAuth2 / SAML, etc
+      "Identity Provider"->"Identity Provider": 3. user gets authenticated
+      Auth0->Browser: 4. redirect to ${YOUR_CALLBACK_URL}/#id_token=e68...
+      Browser->Auth0: 5. validate id_token and get user profile
+      Browser->"Your API": 6. call API sending JWT in Authorization header
+      "Your API"->"Your API": 7. validate token
+    
+ + + + diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 000000000..2762f3b99 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,9 @@ +version: '3.9' +services: + mermaid: + image: node:18.16.0-alpine3.18 + stdin_open: true + tty: true + working_dir: /mermaid + volumes: + - ./:/mermaid diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md deleted file mode 100644 index c854a139c..000000000 --- a/docs/CHANGELOG.md +++ /dev/null @@ -1,1054 +0,0 @@ -> **Warning** -> -> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. -> -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md). - -# Change Log - -All changes are in descending order, beginning with the newest (latest) version. - -## Unreleased - -[Full Changelog](https://github.com/knsv/mermaid/compare/8.7.0...HEAD) - -## 8.7.0 (2020-08-09) - -πŸ”– [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) | -πŸ“œ [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0) - -This version brings with it a system for [dynamic and integrated configuration of the diagram themes](config/theming.md). -The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls. - -Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](config/8.6.0_docs.md). - -**These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.** - -### Site-wide Themes - -Site-wide themes are still declared via `initialize` by site owners. - -Example of `Initalize` call setting `theme` to `base`: - -```javascript -mermaidAPI.initialize({ - securityLevel: 'loose', - theme: 'base', -}); -``` - -**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams. - -### Themes at the Local or Current Level - -When Generating a diagram using on a webpage that supports mermaid. -It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array. - -**Following is an example:** - -```mermaid-example -%%{init: {'theme':'base'}}%% - graph TD - a --> b -``` - -```mermaid -%%{init: {'theme':'base'}}%% - graph TD - a --> b -``` - -### Making a Custom Theme with `themeVariables` - -The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`. - -| Parameter | Description | Type | Required | Objects contained | -| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- | -| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor | - -Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`. - -```mermaid-example -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -```mermaid -%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% - graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{Let me think} - B --> G[/Another/] - C ==>|One| D[Laptop] - C -->|Two| E[iPhone] - C -->|Three| F[fa:fa-car Car] - subgraph section - C - D - E - F - G - end -``` - -**Notes:** -Leaving it empty will set all variable values to default. - -## 8.6.0 (2020-07-13) - -πŸ”– [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.6.0) - -[Version 8.6.0](../getting-started/8.6.0_docs.md) introduces New Configuration Protocols and Directives and a Beta for the [New Mermaid Live-Editor](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ) - -**With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.** - -Directives allow for a diagram specific overriding of config, as it has been discussed in Configurations. -This allows site users to input modifications to config alongside diagram definitions, when creating diagrams on a private webpage that supports Mermaid. - -## 8.5.0 (2020-04-11) - -πŸ”– [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/untagged-31c93788afe260d914bb) - -This version introduces New diagrams! - -**New diagrams in 8.5** - -With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams. - -![Image showing the new ER diagram type](./img/er.png) - -## 8.2.0 (2019-07-17) - -🏷️ [Tag](https://github.com/mermaid-js/mermaid/tree/8.2.0) - -Version 8.2.0, introduces a security improvement. - -A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. -This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use. - -### securityLevel - -| Parameter | Description | Type | Required | Values | -| ------------- | --------------------------------- | ------ | -------- | ------------------------- | -| securitylevel | Level of trust for parsed diagram | String | Required | Strict, Loose, antiscript | - -**Notes:** - -- **strict**: (**default**) tags in text are encoded, click functionality is disabled -- **loose**: tags in text are allowed, click functionality is enabled -- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled - -⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited. - -If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing. -By doing this clicks and tags are again allowed. - -### To change `securityLevel` with `mermaidAPI.initialize`: - -```javascript -mermaidAPI.initialize({ - securityLevel: 'loose', -}); -``` - -**Closed issues:** - -- please add tag for 8.0.0 release [#863](https://github.com/knsv/mermaid/issues/863) -- classDiagram breaks on any edit [#858](https://github.com/knsv/mermaid/issues/858) - -## [8.1.0](https://github.com/knsv/mermaid/tree/8.1.0) (2019-06-25) - -[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.5...8.1.0) - -**Implemented enhancements:** - -- Theme for dark background [#301](https://github.com/knsv/mermaid/issues/301) -- \[Feature request] gantt diagram axis format [#269](https://github.com/knsv/mermaid/issues/269) -- Implement render function for server side rendering using phantomjs [#169](https://github.com/knsv/mermaid/issues/169) - -**Fixed bugs:** - -- mermaid -v filename.mmd gives You must specify at least one source file. [#328](https://github.com/knsv/mermaid/issues/328) -- Not Able to See Labels even htmlLabels:false added [#268](https://github.com/knsv/mermaid/issues/268) - -**Closed issues:** - -- Gantt and sequence diagram do not render [#853](https://github.com/knsv/mermaid/issues/853) -- margins around flowchart are not balanced [#852](https://github.com/knsv/mermaid/issues/852) -- Smaller bundles [#843](https://github.com/knsv/mermaid/issues/843) -- unicode in labels [#776](https://github.com/knsv/mermaid/issues/776) -- Hard-changing drawing of arrows per edge type [#775](https://github.com/knsv/mermaid/issues/775) -- SequenceDiagram wrong [#773](https://github.com/knsv/mermaid/issues/773) -- Render mermaid on github pages with simple code [#772](https://github.com/knsv/mermaid/issues/772) -- FlowChart - large space between text and the image [#754](https://github.com/knsv/mermaid/issues/754) -- Class Diagram Issues when using Mermaid in Stackedit [#748](https://github.com/knsv/mermaid/issues/748) -- Multi-platform CI [#744](https://github.com/knsv/mermaid/issues/744) -- gantt: sections can't have a colon [#742](https://github.com/knsv/mermaid/issues/742) -- Yarn build does not add mermaid.min.css to dist [#732](https://github.com/knsv/mermaid/issues/732) -- Is there a grammar / keyword / more than just the basic examples? [#718](https://github.com/knsv/mermaid/issues/718) -- Click event and react component [#717](https://github.com/knsv/mermaid/issues/717) -- Long text going outside the box [#706](https://github.com/knsv/mermaid/issues/706) -- How to migrate from yUML to mermaid? [#704](https://github.com/knsv/mermaid/issues/704) -- Issue on Dynamic Creation in PHP [#690](https://github.com/knsv/mermaid/issues/690) -- `click "\#target"` and `click "http://url"` should create regular links [#689](https://github.com/knsv/mermaid/issues/689) -- Support Chinese punctuation [#687](https://github.com/knsv/mermaid/issues/687) -- \[Question] Proper way to install on Mac? [#681](https://github.com/knsv/mermaid/issues/681) -- Has Mermaid a graphical interface to make diagrams? [#668](https://github.com/knsv/mermaid/issues/668) -- mermaid installation on debian [#649](https://github.com/knsv/mermaid/issues/649) -- "Cannot activate" in sequenceDiagram [#647](https://github.com/knsv/mermaid/issues/647) -- Link ("click" statement) in flowchart does not work in exported SVG [#646](https://github.com/knsv/mermaid/issues/646) -- How to pass styling [#639](https://github.com/knsv/mermaid/issues/639) -- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [#638](https://github.com/knsv/mermaid/issues/638) -- import mermaid.css with ES6 + NPM [#634](https://github.com/knsv/mermaid/issues/634) -- Actor line cuts through other elements [#633](https://github.com/knsv/mermaid/issues/633) -- Graph TD line out of the picture (left side) [#630](https://github.com/knsv/mermaid/issues/630) -- Flowchart labels appear "cutoff" [#628](https://github.com/knsv/mermaid/issues/628) -- Uncaught TypeError: \_.constant is not a function (mermaid.js) [#626](https://github.com/knsv/mermaid/issues/626) -- Missing tags and releases for newer versions [#623](https://github.com/knsv/mermaid/issues/623) -- Mermaid and Leo / Leo Vue [#622](https://github.com/knsv/mermaid/issues/622) -- mermaidAPI gantt Vue.js [#621](https://github.com/knsv/mermaid/issues/621) -- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [#620](https://github.com/knsv/mermaid/issues/620) -- how to get mermaidAPI? [#617](https://github.com/knsv/mermaid/issues/617) -- Error in startOnLoad documentation? [#616](https://github.com/knsv/mermaid/issues/616) -- Example export to SVG generates error [#614](https://github.com/knsv/mermaid/issues/614) -- The new online editor does not support previously generated links [#613](https://github.com/knsv/mermaid/issues/613) -- Grammar / Syntax documentation for flowcharts [#607](https://github.com/knsv/mermaid/issues/607) -- Mermaid does not work with d3.js [#606](https://github.com/knsv/mermaid/issues/606) -- Why does this code's flowchart lines get cut-off on screen? [#604](https://github.com/knsv/mermaid/issues/604) -- click keyword does not fire my callback (on the demo Website too) [#603](https://github.com/knsv/mermaid/issues/603) -- Online Editor fails to show exported SVG [#601](https://github.com/knsv/mermaid/issues/601) -- Just saying thanks! [#597](https://github.com/knsv/mermaid/issues/597) -- stylesheet crashed with other library like abcjs [#596](https://github.com/knsv/mermaid/issues/596) -- Missing connection [#594](https://github.com/knsv/mermaid/issues/594) -- How to use mermaid on node.js restful api? [#593](https://github.com/knsv/mermaid/issues/593) -- Remove status code [#589](https://github.com/knsv/mermaid/issues/589) -- Golang based editor [#588](https://github.com/knsv/mermaid/issues/588) -- sequenceDiagram -> notetext css font is hardcoded [#587](https://github.com/knsv/mermaid/issues/587) -- Multiple graph in the live editor [#586](https://github.com/knsv/mermaid/issues/586) -- All \ elements in page are colored black [#584](https://github.com/knsv/mermaid/issues/584) -- Styling: classes aren't applied to elements. [#582](https://github.com/knsv/mermaid/issues/582) -- Rounded connections [#580](https://github.com/knsv/mermaid/issues/580) -- Arrows are not being shown correctly in the dark theme [#578](https://github.com/knsv/mermaid/issues/578) -- The documentation for CLI seems outdated. [#572](https://github.com/knsv/mermaid/issues/572) -- No effect of click event:can not open link [#571](https://github.com/knsv/mermaid/issues/571) -- Text colors are not correct in VSCODE [#570](https://github.com/knsv/mermaid/issues/570) -- Nodes aren't aligned properly (just need an explanation) [#568](https://github.com/knsv/mermaid/issues/568) -- setting margin around figure in R [#567](https://github.com/knsv/mermaid/issues/567) -- Arrows should Come out in upward and Downward direction from decision Node [#566](https://github.com/knsv/mermaid/issues/566) -- TypeError: Cannot read property 'select' of undefined [#563](https://github.com/knsv/mermaid/issues/563) -- A little bug [#557](https://github.com/knsv/mermaid/issues/557) -- Japanese text appears garbled [#554](https://github.com/knsv/mermaid/issues/554) -- classdiagram not works in mermaid live_editor [#553](https://github.com/knsv/mermaid/issues/553) -- font awesome in link text? [#546](https://github.com/knsv/mermaid/issues/546) -- q: heard of the cosmogol standard? [#545](https://github.com/knsv/mermaid/issues/545) -- Arrow heads missing (cli, 7.0.3) [#544](https://github.com/knsv/mermaid/issues/544) -- No Edge Boxes if useHtmlLabels=false [#541](https://github.com/knsv/mermaid/issues/541) -- how to change mermaid text color or line text block color? [#534](https://github.com/knsv/mermaid/issues/534) -- FlowChart visualization broken when downloading from live editor [#533](https://github.com/knsv/mermaid/issues/533) -- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [#532](https://github.com/knsv/mermaid/issues/532) -- live editor make browser(safari on macOS\&iOS) not longer respond [#531](https://github.com/knsv/mermaid/issues/531) -- css classes need a prefix/namespace [#527](https://github.com/knsv/mermaid/issues/527) -- input activate/deactivate cause safari unresponding [#521](https://github.com/knsv/mermaid/issues/521) -- Cannot Render the Mermaid Graph to PDF ? [#520](https://github.com/knsv/mermaid/issues/520) -- clicking links works from inset in subgraph but not from nodes [#516](https://github.com/knsv/mermaid/issues/516) -- Strange syntax error - when importing mermaid.js [#515](https://github.com/knsv/mermaid/issues/515) -- gantt x-axis display [#510](https://github.com/knsv/mermaid/issues/510) -- phantomjs renamed to phantomjs-prebuilt [#508](https://github.com/knsv/mermaid/issues/508) -- issue when using sphinxcontrib-mermaid extension for sphinx [#507](https://github.com/knsv/mermaid/issues/507) -- layout of docs page looks broken [#504](https://github.com/knsv/mermaid/issues/504) -- Problem showing graph with php on localhost [#502](https://github.com/knsv/mermaid/issues/502) -- logLevel's option doesn't work at 7.0.0 [#501](https://github.com/knsv/mermaid/issues/501) -- How do I get the log for a render or parse attempt? [#500](https://github.com/knsv/mermaid/issues/500) -- Mermaid neutral style style to built in latest release [#499](https://github.com/knsv/mermaid/issues/499) -- Any plans for adding a typescript definition file? [#495](https://github.com/knsv/mermaid/issues/495) -- Gantt diagrams too narrow [#493](https://github.com/knsv/mermaid/issues/493) -- Flowchart edge labels placement [#490](https://github.com/knsv/mermaid/issues/490) -- Very different styles when rendering as png vs. svg [#489](https://github.com/knsv/mermaid/issues/489) -- New editor that supports mermaid: Caret [#488](https://github.com/knsv/mermaid/issues/488) -- Gant PNG margin [#486](https://github.com/knsv/mermaid/issues/486) -- ReferenceError: window is not defined [#485](https://github.com/knsv/mermaid/issues/485) -- Menu and layout bugs in docs [#484](https://github.com/knsv/mermaid/issues/484) -- Mermaid resets some of the page CSS styles [#482](https://github.com/knsv/mermaid/issues/482) -- Arrows rendering incorrectly in online editor [#480](https://github.com/knsv/mermaid/issues/480) -- CSS stroke-dasharray ignored by browsers but not other viewers [#474](https://github.com/knsv/mermaid/issues/474) -- mermaid - Browser Support issue [#472](https://github.com/knsv/mermaid/issues/472) -- Totally love mermaid I might pop! [#471](https://github.com/knsv/mermaid/issues/471) -- Sequence Diagram: Missing x on async arrows (png) [#469](https://github.com/knsv/mermaid/issues/469) -- live editor: the svg file rendered from graph is not supported by browsers [#468](https://github.com/knsv/mermaid/issues/468) -- Not found css [#462](https://github.com/knsv/mermaid/issues/462) -- Phantomjs Dependency [#461](https://github.com/knsv/mermaid/issues/461) -- Mermaid cli not working for subgraphs [#459](https://github.com/knsv/mermaid/issues/459) -- Support for notes across multiple participants? [#458](https://github.com/knsv/mermaid/issues/458) -- Related to Issue #329: Phantomjs issues. [#455](https://github.com/knsv/mermaid/issues/455) -- Add a click style [#426](https://github.com/knsv/mermaid/issues/426) -- Add Parallel block (par) to sequence diagrams [#425](https://github.com/knsv/mermaid/issues/425) -- updating shapes after the flow chart rendering complete [#424](https://github.com/knsv/mermaid/issues/424) -- can't catch parse error Maximum call stack size exceeded on safari [#421](https://github.com/knsv/mermaid/issues/421) -- Arrows endings are missing [#419](https://github.com/knsv/mermaid/issues/419) -- shouldn't mermaid become more like Markdown ? [#417](https://github.com/knsv/mermaid/issues/417) -- Live editor show rendered diagram if syntax invalid [#415](https://github.com/knsv/mermaid/issues/415) -- Linkstyle stroke does not work [#410](https://github.com/knsv/mermaid/issues/410) -- flowchart id's with dots in them .. break links [#408](https://github.com/knsv/mermaid/issues/408) -- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [#407](https://github.com/knsv/mermaid/issues/407) -- Some Chinese character will case Safari no responding. [#405](https://github.com/knsv/mermaid/issues/405) -- Cannot center-justify text in nodes? [#397](https://github.com/knsv/mermaid/issues/397) -- Edge labels should have white background in live editor [#396](https://github.com/knsv/mermaid/issues/396) -- Live editor does not support activate/deactivate [#394](https://github.com/knsv/mermaid/issues/394) -- Styling subgraph? [#391](https://github.com/knsv/mermaid/issues/391) -- Update live editor to version 6.0.0 [#387](https://github.com/knsv/mermaid/issues/387) -- sequence diagram config issue [#385](https://github.com/knsv/mermaid/issues/385) -- How to add newline in the text [#384](https://github.com/knsv/mermaid/issues/384) -- PhantomJS crashes on a large graph [#380](https://github.com/knsv/mermaid/issues/380) -- Finnish support for class diagrams using plantuml syntax [#377](https://github.com/knsv/mermaid/issues/377) -- mermaidAPI.render generated different svg code from mermaid.int() [#374](https://github.com/knsv/mermaid/issues/374) -- Put your own action on the chart [#372](https://github.com/knsv/mermaid/issues/372) -- when declaring participants the elements are generated twice [#370](https://github.com/knsv/mermaid/issues/370) -- Example Flowchart is cut in display (Chrome). [#368](https://github.com/knsv/mermaid/issues/368) -- Add shebang support to diagrams [#365](https://github.com/knsv/mermaid/issues/365) -- Silencing CLI output [#352](https://github.com/knsv/mermaid/issues/352) -- SequenceDiagram: 3+ Alternative Paths [#348](https://github.com/knsv/mermaid/issues/348) -- Smaller height of actor boxes [#342](https://github.com/knsv/mermaid/issues/342) -- Question: lib/phantomscript.js - foreignObjects in SVG - related to #58 [#340](https://github.com/knsv/mermaid/issues/340) -- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [#337](https://github.com/knsv/mermaid/issues/337) -- Tabs & subgraphs cause rendering error [#336](https://github.com/knsv/mermaid/issues/336) -- Display question: right angles [#335](https://github.com/knsv/mermaid/issues/335) -- No Arrows rendered v0.5.8 [#330](https://github.com/knsv/mermaid/issues/330) -- You had errors in your syntax. Use --help for further information. [#327](https://github.com/knsv/mermaid/issues/327) -- Allow alternate arrow syntax that doesn't close html comments [#322](https://github.com/knsv/mermaid/issues/322) -- Comment in subgraph [#319](https://github.com/knsv/mermaid/issues/319) -- Update graph [#311](https://github.com/knsv/mermaid/issues/311) -- css conflicts with boostrap's css [#308](https://github.com/knsv/mermaid/issues/308) -- Can not get click event to fire. [#306](https://github.com/knsv/mermaid/issues/306) -- Fix phantomjs2 compatibility [#304](https://github.com/knsv/mermaid/issues/304) -- Flowcharts do not work in native IE11 [#303](https://github.com/knsv/mermaid/issues/303) -- Integration with remark.js - tutorial added [#302](https://github.com/knsv/mermaid/issues/302) -- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [#299](https://github.com/knsv/mermaid/issues/299) -- src/mermaid.js generates bad code [#297](https://github.com/knsv/mermaid/issues/297) -- Fresh fork: jasmine tests fail [#294](https://github.com/knsv/mermaid/issues/294) -- CSS clash [#292](https://github.com/knsv/mermaid/issues/292) -- Mermaid does not work in Chrome 48 [#281](https://github.com/knsv/mermaid/issues/281) -- circle and ellipse cannot change color by classDef [#271](https://github.com/knsv/mermaid/issues/271) -- npm run watch doesn't work due missing dependencies [#266](https://github.com/knsv/mermaid/issues/266) -- label out of node [#262](https://github.com/knsv/mermaid/issues/262) -- IE11 Support issue [#261](https://github.com/knsv/mermaid/issues/261) -- mermaid without browser [#260](https://github.com/knsv/mermaid/issues/260) -- Insufficient capacity of gantt diagrams [#226](https://github.com/knsv/mermaid/issues/226) -- some WARN about installation [#222](https://github.com/knsv/mermaid/issues/222) -- Live editor offline access [#217](https://github.com/knsv/mermaid/issues/217) -- suggest: code highlight mode config for editors [#212](https://github.com/knsv/mermaid/issues/212) -- Uncaught RangeError: Maximum call stack size exceeded [#189](https://github.com/knsv/mermaid/issues/189) -- Styling label texts [#50](https://github.com/knsv/mermaid/issues/50) - -**Merged pull requests:** - -- Remove console.log in classDB. [#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey)) -- Bump sshpk from 1.13.1 to 1.16.1 [#851](https://github.com/knsv/mermaid/pull/851) ([dependabot\[bot\]](https://github.com/apps/dependabot)) -- Significantly smaller bundles [#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato)) -- Support styling of subgraphs [#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-)) -- fix dark theme loop labels not visible [#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn)) -- fix draw function can only call once [#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship)) -- Fix dotted lines not appearing in flowcharts when HTML labels disabled [#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu)) -- Fix issue with XML line breaks inside vertex labels [#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang)) -- fixed diagrams [#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus)) -- Clickable gantt tasks [#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht)) -- linkStyle now supports list of indexes with a few tests [#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov)) -- fix class diagram mermaid [#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai)) -- Added exclude weekdays to definition [#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo)) -- SVG link rendering [#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep)) -- Gantt milestones [#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs)) -- Remove duplicate code [#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030)) -- Render nodes as real links [#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep)) -- Fix issue with marker-end. [#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen)) -- Make Class Diagrams usable in Stackedit and Live Editor [#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe)) -- Adding trapezoid and inverse trapezoid vertex options. [#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf)) -- Add option for right angles [#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland)) -- Add nested activation classes [#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland)) -- wip: class diagram cardinality display [#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz)) -- add comments about CSS in config [#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90)) -- SequenceDiagram: Add support for multiple alt else statements [#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel)) -- fix #426 - add class .clickable on nodes with click function or link [#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil)) -- Spec fix 1 [#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt)) - -## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01) - -[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5) - -**Closed issues:** - -- live editor latin error after update [#560](https://github.com/knsv/mermaid/issues/560) -- Simple full example in online documentation is broken [#558](https://github.com/knsv/mermaid/issues/558) -- Graph No Arrow Head v7.0.3 [#543](https://github.com/knsv/mermaid/issues/543) -- Conflict while using mermaid along with core-js [#512](https://github.com/knsv/mermaid/issues/512) -- Export to pdf on website [#496](https://github.com/knsv/mermaid/issues/496) -- New downstream project: Mermaid Preview for VSCode [#442](https://github.com/knsv/mermaid/issues/442) -- Can't Zoom the flowchart ? [#399](https://github.com/knsv/mermaid/issues/399) -- line labels are not rendered correctly in live editor [#366](https://github.com/knsv/mermaid/issues/366) -- mermaid-loader [#361](https://github.com/knsv/mermaid/issues/361) -- Are there any documentation or examples for classDiagram and gitGraph? [#359](https://github.com/knsv/mermaid/issues/359) -- \# character broken in 0.5.8 [#347](https://github.com/knsv/mermaid/issues/347) -- Documentation issue: CSS example is not visible [#345](https://github.com/knsv/mermaid/issues/345) -- Include documentation for command line usage [#326](https://github.com/knsv/mermaid/issues/326) -- Fresh fork: can't build dist [#296](https://github.com/knsv/mermaid/issues/296) -- Invalid value for \ attribute viewBox="0 0 -Infinity -Infinity" [#291](https://github.com/knsv/mermaid/issues/291) -- Webpack require fails [#277](https://github.com/knsv/mermaid/issues/277) -- New documentation - need improved logo [#216](https://github.com/knsv/mermaid/issues/216) - -## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04) - -[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3) - -**Closed issues:** - -- the documentation website is down [#539](https://github.com/knsv/mermaid/issues/539) -- Good example of interactivity with mermaidAPI [#514](https://github.com/knsv/mermaid/issues/514) - -## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01) - -[Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2) - -**Closed issues:** - -- CDN is not working [#511](https://github.com/knsv/mermaid/issues/511) -- A sampe sequenceDiagram crashes mermaid-cli [#492](https://github.com/knsv/mermaid/issues/492) -- Mermaid doesn't delete nodes when called multiple times [#491](https://github.com/knsv/mermaid/issues/491) -- API crashes on 2nd render() call [#478](https://github.com/knsv/mermaid/issues/478) -- sequenceDiagram: dotted line for alt and empty bracket should be hidden [#456](https://github.com/knsv/mermaid/issues/456) -- SVG output (almost) not correct [#434](https://github.com/knsv/mermaid/issues/434) -- How to set axisFormatter of gantt in mermaid CLI? [#428](https://github.com/knsv/mermaid/issues/428) -- customizing link style with any color sets `fill` property to `black` instead of `none` [#416](https://github.com/knsv/mermaid/issues/416) -- New line at the end of SVG file [#400](https://github.com/knsv/mermaid/issues/400) -- CLI doesn't work [#389](https://github.com/knsv/mermaid/issues/389) -- Can't render subgraphs with htmlLabels: false [#367](https://github.com/knsv/mermaid/issues/367) -- Color arrowhead [#362](https://github.com/knsv/mermaid/issues/362) -- CLI: Invisible text, lines in SVG output [#341](https://github.com/knsv/mermaid/issues/341) - -**Merged pull requests:** - -- Support Multi-line Actor Descriptions [#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj)) -- Update Travis config [#538](https://github.com/knsv/mermaid/pull/538) ([tylerlong](https://github.com/tylerlong)) -- Fix spelling of 'you' in sequenceDiagram docs [#537](https://github.com/knsv/mermaid/pull/537) ([ctruelson](https://github.com/ctruelson)) -- Improve CLI output [#536](https://github.com/knsv/mermaid/pull/536) ([gibson042](https://github.com/gibson042)) -- Modernize mermaid [#524](https://github.com/knsv/mermaid/pull/524) ([tylerlong](https://github.com/tylerlong)) -- Modernize mermaid [#519](https://github.com/knsv/mermaid/pull/519) ([tylerlong](https://github.com/tylerlong)) -- Update CLI instructions [#509](https://github.com/knsv/mermaid/pull/509) ([filipedeschamps](https://github.com/filipedeschamps)) -- Add style for classDiagram to dark/default theme [#503](https://github.com/knsv/mermaid/pull/503) ([yudenzel](https://github.com/yudenzel)) -- Fix documentation for git graph. [#498](https://github.com/knsv/mermaid/pull/498) ([gomlgs](https://github.com/gomlgs)) -- Fix links in documentations [#497](https://github.com/knsv/mermaid/pull/497) ([saveman71](https://github.com/saveman71)) -- Update README.md with git graph sample [#481](https://github.com/knsv/mermaid/pull/481) ([raghur](https://github.com/raghur)) -- Fix misspelling of β€œanother” [#479](https://github.com/knsv/mermaid/pull/479) ([stevenschobert](https://github.com/stevenschobert)) -- Fixed #456 sequenceDiagram: dotted line for alt and empty bracket sho… [#477](https://github.com/knsv/mermaid/pull/477) ([brookhong](https://github.com/brookhong)) -- Add viewbox attr to class diagram [#473](https://github.com/knsv/mermaid/pull/473) ([gnkm](https://github.com/gnkm)) -- add par statement to sequenceDiagram [#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor)) - -## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29) - -[Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0) - -**Implemented enhancements:** - -- npm install -g mermaid does not install phantomjs [#329](https://github.com/knsv/mermaid/issues/329) -- activation boxes [#313](https://github.com/knsv/mermaid/issues/313) - -**Closed issues:** - -- demos on io site not working [#466](https://github.com/knsv/mermaid/issues/466) -- Can not be generated PNG pictures through CLI with Chinese [#451](https://github.com/knsv/mermaid/issues/451) -- Round nodes cannot be styled with CSS classes [#443](https://github.com/knsv/mermaid/issues/443) -- webpack gulp UglifyJsPlugin error. [#440](https://github.com/knsv/mermaid/issues/440) -- String concatenation isn't working [#432](https://github.com/knsv/mermaid/issues/432) -- text flow/wrap in actor box of sequence diagram [#422](https://github.com/knsv/mermaid/issues/422) -- Online live editor still use old version [#402](https://github.com/knsv/mermaid/issues/402) -- uncaught TypeError: t.getTransformToElement is not a function [#401](https://github.com/knsv/mermaid/issues/401) -- Only works when using browserify'd code [#373](https://github.com/knsv/mermaid/issues/373) -- document the use of shebang line in mmd files [#364](https://github.com/knsv/mermaid/issues/364) -- Diagrams are small and unreadable in IE 11 - since 0.5.1 [#356](https://github.com/knsv/mermaid/issues/356) -- \[Feature Request] ER-Diagram Support [#354](https://github.com/knsv/mermaid/issues/354) -- The need for mermaid.css should be mentioned explicitly in the intro docs... [#273](https://github.com/knsv/mermaid/issues/273) - -**Merged pull requests:** - -- Update index.html [#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight)) -- Fix for #416, customizing link style with any color sets `fill` property to `black` instead of `none` [#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin)) -- Allow .node>circle to receive css styles [#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz)) -- Fix spelling [#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn)) -- added tests and fix cli css style selector lowercase problem [#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev)) -- Update d3.js [#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz)) -- added tests to reproduce #434 in flowchart [#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev)) -- Code Climate config [#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott)) -- fix gantt and sequence digram cli cfg [#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev)) -- fix gantt chart cli configuration broken [#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev)) -- fix gantt chart cli configuration parsing including functions [#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev)) -- Uses an empty text node instead of a string for svg group labels [#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick)) -- use tspan via d3.textwrap to place actor text in sequence diagram [#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev)) -- \#422 use foreignObject/div to place actor label in sequence diagram [#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev)) -- Clarify the need for a CSS stylesheet [#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb)) -- Added hads downstream project [#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied)) -- update usage and fix #273 [#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance)) -- Add to downstream projects docs page [#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur)) -- New neutral theme [#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied)) -- fix cli issues [#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page)) -- Add missing space for 'Labels out of bounds' section [#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist)) -- Fix typo: `pats` -> `paths` [#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon)) -- Added class diagram example to README.md [#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion)) -- override normal flowchart arrowhead to allow css styling [#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue)) -- added sphinx extension [#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan)) -- Fix typo in the sequence diagram documentation [#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino)) - -## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0) - -**Closed issues:** - -- Docs css: code hard to read [#324](https://github.com/knsv/mermaid/issues/324) -- About Markpad integration [#323](https://github.com/knsv/mermaid/issues/323) -- How to link backwards in flowchart? [#321](https://github.com/knsv/mermaid/issues/321) -- Help with editor [#310](https://github.com/knsv/mermaid/issues/310) -- \+1 [#293](https://github.com/knsv/mermaid/issues/293) -- Basic chart does not render on Chome, but does in Firefox [#290](https://github.com/knsv/mermaid/issues/290) -- Live editor is broken [#285](https://github.com/knsv/mermaid/issues/285) -- "No such file or directory" trying to run mermaid 0.5.7 on OS X [#284](https://github.com/knsv/mermaid/issues/284) -- participant name as "Long Long Name" [#283](https://github.com/knsv/mermaid/issues/283) -- Windows - cli - could not find phantomjs at the specified path [#236](https://github.com/knsv/mermaid/issues/236) - -**Merged pull requests:** - -- The option of gantt for the spaces for the section names. [#353](https://github.com/knsv/mermaid/pull/353) ([zeroyonichihachi](https://github.com/zeroyonichihachi)) -- Gitgraph: Make reset work with parent ref carets [#350](https://github.com/knsv/mermaid/pull/350) ([raghur](https://github.com/raghur)) -- Remove the text-shadows that make the text look blurry [#349](https://github.com/knsv/mermaid/pull/349) ([AsaAyers](https://github.com/AsaAyers)) -- add line interpolation to linkStyle in flowchart [#346](https://github.com/knsv/mermaid/pull/346) ([AlanHohn](https://github.com/AlanHohn)) -- Support git graph diagrams in mermaid [#344](https://github.com/knsv/mermaid/pull/344) ([raghur](https://github.com/raghur)) -- Build and test execution changes [#338](https://github.com/knsv/mermaid/pull/338) ([ssbarnea](https://github.com/ssbarnea)) -- Reformatting of css files [#331](https://github.com/knsv/mermaid/pull/331) ([Jmuccigr](https://github.com/Jmuccigr)) -- (WIP) Sequence Diagram Title Support [#320](https://github.com/knsv/mermaid/pull/320) ([bronsoja](https://github.com/bronsoja)) -- activations doc + few fixes [#318](https://github.com/knsv/mermaid/pull/318) ([ciekawy](https://github.com/ciekawy)) -- Dark theme for better contrast on darker backgrounds [#317](https://github.com/knsv/mermaid/pull/317) ([crodriguez1a](https://github.com/crodriguez1a)) -- Activations [#316](https://github.com/knsv/mermaid/pull/316) ([ciekawy](https://github.com/ciekawy)) -- Support leading comments for sequenceDiagrams [#312](https://github.com/knsv/mermaid/pull/312) ([ashsearle](https://github.com/ashsearle)) -- Show a little lenience for white-space around names [#309](https://github.com/knsv/mermaid/pull/309) ([ashsearle](https://github.com/ashsearle)) -- Update list of downstream projects [#307](https://github.com/knsv/mermaid/pull/307) ([maxArturo](https://github.com/maxArturo)) -- Issue 299: Sequence diagram Loops: changing boxMargin spoils the "loop" notation [#300](https://github.com/knsv/mermaid/pull/300) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) -- Issue 297 - src/mermaid.js generates bad code [#298](https://github.com/knsv/mermaid/pull/298) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) -- Updated instructions for running tests [#295](https://github.com/knsv/mermaid/pull/295) ([LarryKlugerDS](https://github.com/LarryKlugerDS)) -- Add Markdown Plus to Downstream projects [#288](https://github.com/knsv/mermaid/pull/288) ([tylerlong](https://github.com/tylerlong)) -- Quote phantomPath so that it doesn't fail on window [#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur)) - -## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8) - -## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7) - -**Closed issues:** - -- Mermaid + LightPaper = ❀️ [#280](https://github.com/knsv/mermaid/issues/280) -- Bower Integration [#278](https://github.com/knsv/mermaid/issues/278) -- Mermaid breaks when variables end in 'v' [#276](https://github.com/knsv/mermaid/issues/276) -- sequence diagrams don't support participant aliasing [#263](https://github.com/knsv/mermaid/issues/263) -- One diagram that fails to render stops further execution on the page [#259](https://github.com/knsv/mermaid/issues/259) -- Where to find line layout algorithm? [#258](https://github.com/knsv/mermaid/issues/258) -- Compatibility with node.js [#257](https://github.com/knsv/mermaid/issues/257) -- Label resizing with dynamically loaded fonts [#255](https://github.com/knsv/mermaid/issues/255) -- SVG arrowheads are broken in the CLI [#249](https://github.com/knsv/mermaid/issues/249) -- Cannot read property 'replace' of undefined [#239](https://github.com/knsv/mermaid/issues/239) - -**Merged pull requests:** - -- gh-50 Allow styling of edge labels in css [#267](https://github.com/knsv/mermaid/pull/267) ([Anoia](https://github.com/Anoia)) -- Allow sequenceDiagram participant aliasing [#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042)) - -## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6) - -**Implemented enhancements:** - -- Add download SVG link to the live editor [#144](https://github.com/knsv/mermaid/issues/144) - -**Fixed bugs:** - -- Live Editor: Permalink address not being parsed [#202](https://github.com/knsv/mermaid/issues/202) - -**Closed issues:** - -- title doesn't work in sequenceDiagram [#248](https://github.com/knsv/mermaid/issues/248) -- hypen-minus should be valid in sequence diagram alt/else/etc. descriptions [#247](https://github.com/knsv/mermaid/issues/247) -- Broken in firefox? [#245](https://github.com/knsv/mermaid/issues/245) -- When there is a Chinese symbol in the flowchart, it will crash。 [#238](https://github.com/knsv/mermaid/issues/238) -- Non-alpha characters included in ALPHA token (flow graph jison) [#232](https://github.com/knsv/mermaid/issues/232) -- subgraph not rendering with change to sample [#231](https://github.com/knsv/mermaid/issues/231) -- sequence diagram requires a new line at the end? [#229](https://github.com/knsv/mermaid/issues/229) - -**Merged pull requests:** - -- Make sequenceDiagram terminal newline optional [#253](https://github.com/knsv/mermaid/pull/253) ([gibson042](https://github.com/gibson042)) -- Support sequenceDiagram "over" notes [#252](https://github.com/knsv/mermaid/pull/252) ([gibson042](https://github.com/gibson042)) -- Properly handle "rest of line" statements [#251](https://github.com/knsv/mermaid/pull/251) ([gibson042](https://github.com/gibson042)) -- CLI: Propagate exit code from lib (i.e., phantomjs) [#250](https://github.com/knsv/mermaid/pull/250) ([gibson042](https://github.com/gibson042)) -- flowRender.js - Fix FontAwesome icon insert [#244](https://github.com/knsv/mermaid/pull/244) ([ma-zal](https://github.com/ma-zal)) -- updated sequence diagram link in live editor [#242](https://github.com/knsv/mermaid/pull/242) ([r-a-v-a-s](https://github.com/r-a-v-a-s)) -- updated links in README.md [#240](https://github.com/knsv/mermaid/pull/240) ([r-a-v-a-s](https://github.com/r-a-v-a-s)) -- Ellipse syntax [#237](https://github.com/knsv/mermaid/pull/237) ([spect88](https://github.com/spect88)) -- Allow keywords as suffixes of node ids [#235](https://github.com/knsv/mermaid/pull/235) ([spect88](https://github.com/spect88)) -- Highlighted the editor in the nav [#234](https://github.com/knsv/mermaid/pull/234) ([knsv](https://github.com/knsv)) -- Live editor tweaks [#233](https://github.com/knsv/mermaid/pull/233) ([spect88](https://github.com/spect88)) -- Add a Gitter chat badge to README.md [#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger)) - -## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5) - -**Closed issues:** - -- sequence diagram, arrowhead instead of crosshead [#227](https://github.com/knsv/mermaid/issues/227) - -**Merged pull requests:** - -- Fix a typo: crosshead --> arrowhead [#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong)) - -## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4) - -**Implemented enhancements:** - -- Set log level from mermaid configuration [#220](https://github.com/knsv/mermaid/issues/220) -- Links in sequence diagrams [#159](https://github.com/knsv/mermaid/issues/159) -- Add syntax for double headed arrows [#123](https://github.com/knsv/mermaid/issues/123) - -**Fixed bugs:** - -- comment characters `%%` cause parse error [#141](https://github.com/knsv/mermaid/issues/141) - -**Closed issues:** - -- Marker-end arrow cannot be shown for URL with query parameter [#225](https://github.com/knsv/mermaid/issues/225) -- Please update bower's D3 version [#221](https://github.com/knsv/mermaid/issues/221) -- Width fixed to 400px [#204](https://github.com/knsv/mermaid/issues/204) -- render to png from the cli does not display the marker-end arrow heads [#181](https://github.com/knsv/mermaid/issues/181) - -**Merged pull requests:** - -- Allow `end` as a substring of vertex id [#224](https://github.com/knsv/mermaid/pull/224) ([spect88](https://github.com/spect88)) -- Remove duplicate npm dependencies: d3 and he [#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88)) - -## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3) - -## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2) - -**Implemented enhancements:** - -- Support for hyperlink and tooltip [#34](https://github.com/knsv/mermaid/issues/34) - -**Closed issues:** - -- Installing β€œatom-mermaid\@0.1.3” failed [#218](https://github.com/knsv/mermaid/issues/218) -- node feature request [#211](https://github.com/knsv/mermaid/issues/211) -- Please add prefix for styles [#208](https://github.com/knsv/mermaid/issues/208) -- Bad handling of block arguments [#207](https://github.com/knsv/mermaid/issues/207) -- please consider port to mac osx [#203](https://github.com/knsv/mermaid/issues/203) -- allow phantomjs >=1.9.x [#201](https://github.com/knsv/mermaid/issues/201) -- syntax for venn diagrams? [#200](https://github.com/knsv/mermaid/issues/200) -- Broken CLI Graphs? (v0.5.1) [#196](https://github.com/knsv/mermaid/issues/196) -- Static site does not render under HTTPS [#194](https://github.com/knsv/mermaid/issues/194) -- Error on simple graph [#192](https://github.com/knsv/mermaid/issues/192) -- Escape "\~" [#191](https://github.com/knsv/mermaid/issues/191) -- Trying to add link using 'click' to flowchart [#188](https://github.com/knsv/mermaid/issues/188) -- cli: no lines and arrowheads rendered / only dotted lines [#187](https://github.com/knsv/mermaid/issues/187) -- text of mermaid div displayed on page [#186](https://github.com/knsv/mermaid/issues/186) -- using mermaid with laravel [#185](https://github.com/knsv/mermaid/issues/185) -- Atom editor package [#183](https://github.com/knsv/mermaid/issues/183) -- Auto linewrap for notes in sequence diagrams [#178](https://github.com/knsv/mermaid/issues/178) -- Execute code after initialize [#176](https://github.com/knsv/mermaid/issues/176) -- Autoscaling for all diagram types [#175](https://github.com/knsv/mermaid/issues/175) -- Problem wit click event callback [#174](https://github.com/knsv/mermaid/issues/174) -- How to escape characters? [#170](https://github.com/knsv/mermaid/issues/170) -- it can not work [#167](https://github.com/knsv/mermaid/issues/167) -- Broken subgraph using the CLI [#153](https://github.com/knsv/mermaid/issues/153) -- IE Support issue [#142](https://github.com/knsv/mermaid/issues/142) -- Flowchart truncated [#140](https://github.com/knsv/mermaid/issues/140) -- Double Quote as text is not working [#219](https://github.com/knsv/mermaid/issues/219) -- classDef / class not working with htmlLabels? [#210](https://github.com/knsv/mermaid/issues/210) -- Links in graph missing [#209](https://github.com/knsv/mermaid/issues/209) -- Last word in comment boxes getting cut off by word wrap library : ( [#195](https://github.com/knsv/mermaid/issues/195) -- Escaping characters in sequence diagram [#193](https://github.com/knsv/mermaid/issues/193) -- SVG foreignObject rendering [#180](https://github.com/knsv/mermaid/issues/180) -- IE9 issue [#179](https://github.com/knsv/mermaid/issues/179) -- inoperable in an AMD/requirejs environment: IPython Notebook [#127](https://github.com/knsv/mermaid/issues/127) -- \[Parser] Hyphen in participant name bring TypeError [#74](https://github.com/knsv/mermaid/issues/74) - -**Merged pull requests:** - -- Update flowchart.md [#214](https://github.com/knsv/mermaid/pull/214) ([orschiro](https://github.com/orschiro)) -- Default style when using the CLI [#205](https://github.com/knsv/mermaid/pull/205) ([gillesdemey](https://github.com/gillesdemey)) -- Gantt chart - add minutes and seconds durations [#198](https://github.com/knsv/mermaid/pull/198) ([dbrans](https://github.com/dbrans)) -- Using QUnit for AMD testing [#190](https://github.com/knsv/mermaid/pull/190) ([bollwyvl](https://github.com/bollwyvl)) -- Update phantomscript.js [#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow)) - -## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1) - -**Implemented enhancements:** - -- To SVG Export [#146](https://github.com/knsv/mermaid/issues/146) -- Possibility to set the width of the generated flowchart [#129](https://github.com/knsv/mermaid/issues/129) -- Special characters break parsing [#54](https://github.com/knsv/mermaid/issues/54) -- Responsive graph layout for mobile viewers [#51](https://github.com/knsv/mermaid/issues/51) -- Styling connector lines [#31](https://github.com/knsv/mermaid/issues/31) - -**Fixed bugs:** - -- flowchart - styling of edges via css overrides specific styles set in the graph definition [#128](https://github.com/knsv/mermaid/issues/128) - -**Closed issues:** - -- Live editor is broken [#173](https://github.com/knsv/mermaid/issues/173) -- 0.5.0 no longer respects custom date definitions in Gantt diagrams [#171](https://github.com/knsv/mermaid/issues/171) -- Drop label character restrictions [#162](https://github.com/knsv/mermaid/issues/162) -- can't nest subgraphs in flowchart [#161](https://github.com/knsv/mermaid/issues/161) -- Unable to generate gantt diagram with mermaid CLI [#158](https://github.com/knsv/mermaid/issues/158) -- Inline css by "mermaid" [#157](https://github.com/knsv/mermaid/issues/157) -- Finite State Machine Diagram [#152](https://github.com/knsv/mermaid/issues/152) -- How to center align gantt diagram [#150](https://github.com/knsv/mermaid/issues/150) -- Security concern regarding class definition [#148](https://github.com/knsv/mermaid/issues/148) -- File Extension [#147](https://github.com/knsv/mermaid/issues/147) -- `setTimeout` with clusters problematic with programmatic edits and no callback [#133](https://github.com/knsv/mermaid/issues/133) -- module.exports.cloneCssStyles() in combination with Angularjs breaks display in Chrome and IE [#126](https://github.com/knsv/mermaid/issues/126) -- Gantt - suitable xAxis for longer project [#125](https://github.com/knsv/mermaid/issues/125) -- How to get started with this project ? [#64](https://github.com/knsv/mermaid/issues/64) - -**Merged pull requests:** - -- Remove moot `version` property from bower.json [#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche)) - -## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0) - -**Implemented enhancements:** - -- Add a css file, mermaid.css, with default styling [#122](https://github.com/knsv/mermaid/issues/122) -- software architecture diagram [#36](https://github.com/knsv/mermaid/issues/36) -- Support for bar charts and pie diagrams [#22](https://github.com/knsv/mermaid/issues/22) - -**Closed issues:** - -- uglifyjs wanrings which means we can improve the code [#156](https://github.com/knsv/mermaid/issues/156) -- New(er) features unavailable in downloadable js files? [#151](https://github.com/knsv/mermaid/issues/151) -- Add gh-gapes link to description [#143](https://github.com/knsv/mermaid/issues/143) -- Some examples not displayed on Firefox 36.0.1 [#138](https://github.com/knsv/mermaid/issues/138) -- tags ending in a "v" don't render [#132](https://github.com/knsv/mermaid/issues/132) -- Links in flowchart [#131](https://github.com/knsv/mermaid/issues/131) -- Using the library for iOS development [#130](https://github.com/knsv/mermaid/issues/130) -- Add capability for gantt diagrams [#118](https://github.com/knsv/mermaid/issues/118) -- lower case v causes error in the parser [#108](https://github.com/knsv/mermaid/issues/108) -- Label's css conflict with boostrap's .label [#67](https://github.com/knsv/mermaid/issues/67) -- TypeError: Cannot read property 'layout' of undefined [#37](https://github.com/knsv/mermaid/issues/37) - -**Merged pull requests:** - -- Dev 0.5.0 [#168](https://github.com/knsv/mermaid/pull/168) ([knsv](https://github.com/knsv)) -- Fix spacing [#164](https://github.com/knsv/mermaid/pull/164) ([rhcarvalho](https://github.com/rhcarvalho)) -- Fixing typo: "Think" -> "Thick" [#160](https://github.com/knsv/mermaid/pull/160) ([it0a](https://github.com/it0a)) -- IE, local html, cssRules access is denied [#155](https://github.com/knsv/mermaid/pull/155) ([tylerlong](https://github.com/tylerlong)) -- Add automatically generated change log file. [#139](https://github.com/knsv/mermaid/pull/139) ([skywinder](https://github.com/skywinder)) -- Adding init argument to the global API [#137](https://github.com/knsv/mermaid/pull/137) ([bollwyvl](https://github.com/bollwyvl)) -- Add description of manual calling of init [#136](https://github.com/knsv/mermaid/pull/136) ([bollwyvl](https://github.com/bollwyvl)) -- Allow other forms of node selection for init() [#135](https://github.com/knsv/mermaid/pull/135) ([bollwyvl](https://github.com/bollwyvl)) -- Use a library-level variable for assigning ids [#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl)) - -## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0) - -**Implemented enhancements:** - -- Assymetric shapes not documented [#82](https://github.com/knsv/mermaid/issues/82) -- Improve arrows [#3](https://github.com/knsv/mermaid/issues/3) - -**Fixed bugs:** - -- NoModificationAllowedError [#23](https://github.com/knsv/mermaid/issues/23) - -**Closed issues:** - -- subgraph background is black in rendered flowchart PNG via CLI [#121](https://github.com/knsv/mermaid/issues/121) -- Integrate editor at [#110](https://github.com/knsv/mermaid/issues/110) -- Internet Explorer Support [#99](https://github.com/knsv/mermaid/issues/99) - -## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5) - -## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4) - -**Implemented enhancements:** - -- Apply styling from css when using the CLI utility [#85](https://github.com/knsv/mermaid/issues/85) -- Generated SVG works poorly outside web browsers [#58](https://github.com/knsv/mermaid/issues/58) -- Generating SVG text blob for use in Node [#2](https://github.com/knsv/mermaid/issues/2) - -**Closed issues:** - -- Subgraph syntax bug? [#120](https://github.com/knsv/mermaid/issues/120) -- Live editor [#115](https://github.com/knsv/mermaid/issues/115) -- Error in "Basic Syntax" wiki page [#113](https://github.com/knsv/mermaid/issues/113) -- semicolons, anyone? [#111](https://github.com/knsv/mermaid/issues/111) -- undefined `sequenceConfig` fails [#109](https://github.com/knsv/mermaid/issues/109) -- Sequence Diagrams: Show Actors below as well [#106](https://github.com/knsv/mermaid/issues/106) -- Allow overriding sequence diagram configuration (SVG properties) [#103](https://github.com/knsv/mermaid/issues/103) -- Error when rendering A-- This is the text -- B [#102](https://github.com/knsv/mermaid/issues/102) -- Clipping in documentation [#97](https://github.com/knsv/mermaid/issues/97) -- isolate class styling to the svg container [#92](https://github.com/knsv/mermaid/issues/92) -- Make the new graph declaration more visual [#40](https://github.com/knsv/mermaid/issues/40) - -**Merged pull requests:** - -- Add live editor [#119](https://github.com/knsv/mermaid/pull/119) ([naseer](https://github.com/naseer)) -- Adds CSS option to the CLI [#116](https://github.com/knsv/mermaid/pull/116) ([fardog](https://github.com/fardog)) -- Update flowchart.md in response Issue #113 [#114](https://github.com/knsv/mermaid/pull/114) ([vijay40](https://github.com/vijay40)) -- Ignore all files except the license and dist/ folder when installing with Bower. [#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy)) - -## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3) - -**Implemented enhancements:** - -- Support for dotted links [#26](https://github.com/knsv/mermaid/issues/26) - -**Closed issues:** - -- Missing arrows in sequence diagram [#98](https://github.com/knsv/mermaid/issues/98) -- Error with >9 linkStyles [#95](https://github.com/knsv/mermaid/issues/95) - -**Merged pull requests:** - -- Require d3 directly to better support Node usage [#107](https://github.com/knsv/mermaid/pull/107) ([markdalgleish](https://github.com/markdalgleish)) -- update doc with -c option [#105](https://github.com/knsv/mermaid/pull/105) ([jjmr](https://github.com/jjmr)) -- Add new parameter to the console client to override the svg configuration in sequence diagrams [#104](https://github.com/knsv/mermaid/pull/104) ([jjmr](https://github.com/jjmr)) -- Text based labels, new shape [#101](https://github.com/knsv/mermaid/pull/101) ([bjowes](https://github.com/bjowes)) -- fix html tags in example usage [#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin)) - -## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2) - -**Implemented enhancements:** - -- Make link text look like it is on the line [#53](https://github.com/knsv/mermaid/issues/53) - -**Closed issues:** - -- disable auto render [#91](https://github.com/knsv/mermaid/issues/91) -- Tidy breaks mermaid (linebreaks in \
) [#87](https://github.com/knsv/mermaid/issues/87) -- Bug: \
being rendered as text in node [#73](https://github.com/knsv/mermaid/issues/73) -- Graph edges appear to render outside of the canvas [#70](https://github.com/knsv/mermaid/issues/70) - -**Merged pull requests:** - -- Merge pull request #1 from knsv/master [#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic)) -- Removed duplicated section in flowchart docs [#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime)) -- Grammar changes to sequence page [#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic)) -- Github buttons [#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic)) -- Template change [#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic)) - -## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1) - -**Implemented enhancements:** - -- Support for sequence diagrams [#16](https://github.com/knsv/mermaid/issues/16) -- Client utility for mermaid [#6](https://github.com/knsv/mermaid/issues/6) - -**Closed issues:** - -- Non ASCII chars in labels [#84](https://github.com/knsv/mermaid/issues/84) -- 'undefined' titles of Quicklinks on the usage page [#80](https://github.com/knsv/mermaid/issues/80) -- \[cli] Enhancement proposal: not fail --version / --help if phantomjs isn't installed [#71](https://github.com/knsv/mermaid/issues/71) - -**Merged pull requests:** - -- Flowchart doc: Text in the circle now in a circle [#81](https://github.com/knsv/mermaid/pull/81) ([Grahack](https://github.com/Grahack)) -- Fix for issue #73 [#79](https://github.com/knsv/mermaid/pull/79) ([it0a](https://github.com/it0a)) -- Ink template [#78](https://github.com/knsv/mermaid/pull/78) ([gkchic](https://github.com/gkchic)) -- Show help and version even if phantom isn't present. Fixes #71 [#75](https://github.com/knsv/mermaid/pull/75) ([fardog](https://github.com/fardog)) -- Add apostrophe & 'and' [#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki)) - -## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0) - -**Implemented enhancements:** - -- How do I do comments? [#47](https://github.com/knsv/mermaid/issues/47) -- Improve readability with new line as terminator and whitespace [#38](https://github.com/knsv/mermaid/issues/38) - -**Fixed bugs:** - -- This characters failed the lexical parsing [#46](https://github.com/knsv/mermaid/issues/46) - -**Closed issues:** - -- Trailing whitespace at the end of lines is not ignored [#55](https://github.com/knsv/mermaid/issues/55) -- Use classes instead of inline style for easy styling [#24](https://github.com/knsv/mermaid/issues/24) - -**Merged pull requests:** - -- Adds Command Line Interface for generating PNGs from mermaid description files [#69](https://github.com/knsv/mermaid/pull/69) ([fardog](https://github.com/fardog)) -- Allow special symbols for direction along with acronyms [#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40)) - -## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16) - -**Fixed bugs:** - -- Lines routed outside visible area [#19](https://github.com/knsv/mermaid/issues/19) - -**Closed issues:** - -- Mermaid not rendering properly on Wordpress pages [#59](https://github.com/knsv/mermaid/issues/59) -- Improve example page with live demo [#52](https://github.com/knsv/mermaid/issues/52) -- Does not render upon AngularJS Updates [#45](https://github.com/knsv/mermaid/issues/45) -- Download link in README.MD doesn't work. [#42](https://github.com/knsv/mermaid/issues/42) -- linkStyle usage is not obvious [#41](https://github.com/knsv/mermaid/issues/41) -- Move \*.spec.js in src/ to test/ [#35](https://github.com/knsv/mermaid/issues/35) - -**Merged pull requests:** - -- New grammar will allow statements ending without semicolon as disccused in Issue #38 [#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40)) -- Class based styling [#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes)) -- Fix typos [#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino)) -- Included .DS_Store in gitignore [#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq)) -- Improves readability discussed in issue #38 [#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40)) -- Added a linting task for gulp [#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv)) - -## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15) - -**Fixed bugs:** - -- Error with some characters [#25](https://github.com/knsv/mermaid/issues/25) -- Cap-cased words break parser [#8](https://github.com/knsv/mermaid/issues/8) - -**Closed issues:** - -- Question marks don't render properly with /dist/mermaid.full.min.js [#30](https://github.com/knsv/mermaid/issues/30) -- Provide parse function in browser widthout `require`? [#21](https://github.com/knsv/mermaid/issues/21) -- Better label text support [#18](https://github.com/knsv/mermaid/issues/18) - -**Merged pull requests:** - -- Include bower_components/ to .gitignore [#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv)) -- Fixed reference to Git repo. [#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis)) - -## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14) - -## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13) - -**Implemented enhancements:** - -- Publish to NPM [#7](https://github.com/knsv/mermaid/issues/7) - -**Closed issues:** - -- modified init to be applied more than once [#29](https://github.com/knsv/mermaid/issues/29) -- Wanted to know build process for the project. [#28](https://github.com/knsv/mermaid/issues/28) -- can not support Chinese description [#20](https://github.com/knsv/mermaid/issues/20) -- Support unicode chars in labels [#9](https://github.com/knsv/mermaid/issues/9) - -## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10) - -## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9) - -**Closed issues:** - -- Add link to jsbin playground to README [#11](https://github.com/knsv/mermaid/issues/11) -- What are the requirements ? [#10](https://github.com/knsv/mermaid/issues/10) - -**Merged pull requests:** - -- Allow unicode chars in labels [#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige)) - -## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8) - -## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7) - -**Closed issues:** - -- Provide parser as separate module [#4](https://github.com/knsv/mermaid/issues/4) - -## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6) - -## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5) - -**Merged pull requests:** - -- Added new shapes! [#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes)) - -## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4) - -## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3) - -## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2) - -## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1) - -## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0) - -## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17) - -[Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1) - -## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16) diff --git a/docs/community/development.md b/docs/community/development.md index 58ca4670b..90f728e15 100644 --- a/docs/community/development.md +++ b/docs/community/development.md @@ -4,7 +4,17 @@ > > ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/development.md](../../packages/mermaid/src/docs/community/development.md). -# Development and Contribution πŸ™Œ +# Contributing to Mermaid + +## Contents + +- [Technical Requirements and Setup](#technical-requirements-and-setup) +- [Contributing Code](#contributing-code) +- [Contributing Documentation](#contributing-documentation) +- [Questions or Suggestions?](#questions-or-suggestions) +- [Last Words](#last-words) + +--- So you want to help? That's great! @@ -12,72 +22,167 @@ So you want to help? That's great! Here are a few things to get you started on the right path. -**The Docs Structure is dictated by [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. +## Technical Requirements and Setup -**Note: Commits and Pull Requests should be directed to the develop branch.** +### Technical Requirements -## Branching +These are the tools we use for working with the code and documentation. -Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch. +- [volta](https://volta.sh/) to manage node versions. +- [Node.js](https://nodejs.org/en/). `volta install node` +- [pnpm](https://pnpm.io/) package manager. `volta install pnpm` +- [npx](https://docs.npmjs.com/cli/v8/commands/npx) the packaged executor in npm. This is needed [to install pnpm.](#2-install-pnpm) -Once development is done we branch a `release` branch from `develop` for testing. +Follow [the setup steps below](#setup) to install them and verify they are working -Once the release happens we merge the `release` branch with `master` and kill the `release` branch. +### Setup -This means that **you should branch off your pull request from develop** and direct all Pull Requests to it. +Follow these steps to set up the environment you need to work on code and/or documentation. + +#### 1. Fork and clone the repository + +In GitHub, you first _fork_ a repository when you are going to make changes and submit pull requests. + +Then you _clone_ a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with. + +[Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo) + +#### 2. Install pnpm + +Once you have cloned the repository onto your development machine, change into the `mermaid` project folder so that you can install `pnpm`. You will need `npx` to install pnpm because volta doesn't support it yet. + +Ex: + +```bash +# Change into the mermaid directory (the top level director of the mermaid project repository) +cd mermaid +# npx is required for first install because volta does not support pnpm yet +npx pnpm install +``` + +#### 3. Verify Everything Is Working + +Once you have installed pnpm, you can run the `test` script to verify that pnpm is working _and_ that the repository has been cloned correctly: + +```bash +pnpm test +``` + +The `test` script and others are in the top-level `package.json` file. + +All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.) + +### Docker + +If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands: + +```bash +./run install # npx pnpm install +./run test # pnpm test +``` ## Contributing Code -We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows: +The basic steps for contributing code are: -- Large changes reviewed by knsv or other developer asked to review by knsv -- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators -- Documentation (we encourage updates to the `/packages/mermaid/src/docs` folder; you can submit them via direct commits) +```mermaid-example +graph LR + git[1. Checkout a git branch] --> codeTest[2. Write tests and code] --> doc[3. Update documentation] --> submit[4. Submit a PR] --> review[5. Review and merge] +``` -When you commit code, create a branch with the following naming convention: +```mermaid +graph LR + git[1. Checkout a git branch] --> codeTest[2. Write tests and code] --> doc[3. Update documentation] --> submit[4. Submit a PR] --> review[5. Review and merge] +``` -Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue. +1. **Create** and checkout a git branch and work on your code in the branch +2. Write and update **tests** (unit and perhaps even integration (e2e) tests) (If you do TDD/BDD, the order might be different.) +3. **Let users know** that things have changed or been added in the documents! This is often overlooked, but _critical_ +4. **Submit** your code as a _pull request_. +5. Maintainers will **review** your code. If there are no changes necessary, the PR will be merged. Otherwise, make the requested changes and repeat. -**One example:** +### 1. Checkout a git branch -`feature/945_state_diagrams` +Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. -**Another example:** +Development is done in the `develop` branch. -`bug/123_nasty_bug_branch` +Once development is done we create a `release/vX.X.X` branch from `develop` for testing. -## Contributing to Documentation +Once the release happens we add a tag to the `release` branch and merge it with `master`. The live product and on-line documentation are what is in the `master` branch. -If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature? +**All new work should be based on the `develop` branch.** -The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via **[.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. +**When you are ready to do work, always, ALWAYS:** -> **All the documents displayed in the GitHub.io page are listed in [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**. +1. Make sure you have the most up-to-date version of the `develop` branch. (fetch or pull to update it) +2. Check out the `develop` branch +3. Create a new branch for your work. Please name the branch following our naming convention below. -The contents of are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released. +We use the follow naming convention for branches: -## How to Contribute to Documentation +```text + [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces] +``` -We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator. +- The first part is the **type** of change: a feature, bug, chore, or documentation change ('docs') +- followed by a _slash_ (which helps to group like types together in many git tools) +- followed by the **issue number** +- followed by an _underscore_ ('\_') +- followed by a short text description (but use dashes ('-') or underscores ('\_') instead of spaces) -The documentation is located in the `src/docs` directory and organized according to relevant subfolder. +If your work is specific to a single diagram type, it is a good idea to put the diagram type at the start of the description. This will help us keep release notes organized: it will help us keep changes for a diagram type together. -The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually. +**Ex: A new feature described in issue 2945 that adds a new arrow type called 'florbs' to state diagrams** -We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s) +`feature/2945_state-diagram-new-arrow-florbs` -### Add Unit Tests for Parsing +**Ex: A bug described in issue 1123 that causes random ugly red text in multiple diagram types** +`bug/1123_fix_random_ugly_red_text` -This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible. +### 2. Write Tests -### Add E2E Tests +Tests ensure that each function, module, or part of code does what it says it will do. This is critically +important when other changes are made to ensure that existing code is not broken (no regression). -This tests the rendering and visual appearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks! +Just as important, the tests act as _specifications:_ they specify what the code does (or should do). +Whenever someone is new to a section of code, they should be able to read the tests to get a thorough understanding of what it does and why. + +If you are fixing a bug, you should add tests to ensure that your code has actually fixed the bug, to specify/describe what the code is doing, and to ensure the bug doesn't happen again. +(If there had been a test for the situation, the bug never would have happened in the first place.) +You may need to change existing tests if they were inaccurate. + +If you are adding a feature, you will definitely need to add tests. Depending on the size of your feature, you may need to add integration tests. + +#### Unit Tests + +Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run. + +Unit tests are mandatory all code except the renderers. (The renderers are tested with integration tests.) + +We use [Vitest](https://vitest.dev) to run unit tests. + +You can use the following command to run the unit tests: + +```sh +pnpm test +``` + +When writing new tests, it's easier to have the tests automatically run as you make changes. You can do this by running the following command: + +```sh +pnpm test:watch +``` + +#### Integration/End-to-End (e2e) tests + +These test the rendering and visual appearance of the diagrams. +This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks! To start working with the e2e tests: -1. Run `pnpm run dev` to start the dev server -2. Start **Cypress** by running `pnpm exec cypress open` in the **mermaid** folder. +1. Run `pnpm dev` to start the dev server +2. Start **Cypress** by running `pnpm cypress:open`. The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress. @@ -107,30 +212,162 @@ it('should render forks and joins', () => { }); ``` -### Any Questions or Suggestions? +**_\[TODO - running the tests against what is expected in development. ]_** -After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22). +**_\[TODO - how to generate new screenshots]_** +.... -### How to Contribute a Suggestion +### 3. Update Documentation + +If the users have no way to know that things have changed, then you haven't really _fixed_ anything for the users; you've just added to making Mermaid feel broken. +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! + +We know it can sometimes be hard to code _and_ write user documentation. + +Our documentation is managed in `packages/mermaid/src/docs`. Details on how to edit is in the [Contributing Documentation](#contributing-documentation) section. + +Create another issue specifically for the documentation.\ +You will need to help with the PR, but definitely ask for help if you feel stuck. +When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work! + +When in doubt, write up and submit what you can. It can be clarified and refined later. (With documentation, something is better than nothing!) + +### 4. Submit your pull request + +**\[TODO - PR titles should start with (fix | feat | ....)]** + +We make all changes via Pull Requests (PRs). As we have many Pull Requests from developers new to Mermaid, we have put in place a process wherein _knsv, Knut Sveidqvist_ is in charge of the final release process and the active maintainers are in charge of reviewing and merging most PRs. + +- PRs will be reviewed by active maintainers, who will provide feedback and request changes as needed. +- The maintainers will request a review from knsv, if necessary. +- Once the PR is approved, the maintainers will merge the PR into the `develop` branch. +- When a release is ready, the `release/x.x.x` branch will be created, extensively tested and knsv will be in charge of the release process. + +**Reminder: Pull Requests should be submitted to the develop branch.** + +## Contributing Documentation + +**_\[TODO: This section is still a WIP. It still needs MAJOR revision.]_** + +If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature? + +The docs are located in the `packages/mermaid/src/docs` folder and are written in Markdown. Just pick the right section and start typing. + +The contents of [mermaid.js.org](https://mermaid.js.org/) are based on the docs from the `master` branch. +Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid.js.org/) once published. + +### How to Contribute to Documentation + +We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator. + +The documentation is located in the `packages/mermaid/src/docs` directory and organized according to relevant subfolder. + +The `docs` folder will be automatically generated when committing to `packages/mermaid/src/docs` and **should not** be edited manually. + +```mermaid-example +flowchart LR + classDef default fill:#fff,color:black,stroke:black + + source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"] + +``` + +```mermaid +flowchart LR + classDef default fill:#fff,color:black,stroke:black + + source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"] + +``` + +You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box. +Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly. + +```` +```note +Note content +``` + +```tip +Tip content +``` + +```warning +Warning content +``` + +```danger +Danger content +``` + +```` + +> **Note** +> If the change is _only_ to the documentation, you can get your changes published to the site quicker by making a PR to the `master` branch. + +We encourage contributions to the documentation at [packages/mermaid/src/docs in the _develop_ branch](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). + +**_DO NOT CHANGE FILES IN `/docs`_** + +### The official documentation site + +**[The mermaid documentation site](https://mermaid.js.org/) is powered by [Vitepress](https://vitepress.vuejs.org/).** + +To run the documentation site locally: + +1. Run `pnpm --filter mermaid run docs:dev` to start the dev server. (Or `pnpm docs:dev` inside the `packages/mermaid` directory.) +2. Open in your browser. Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax). To edit Docs on your computer: -1. Find the Markdown file (.md) to edit in the [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs) directory in the `develop` branch. -2. Create a fork of the develop branch. +_\[TODO: need to keep this in sync with [check out a git branch in Contributing Code above](#1-checkout-a-git-branch) ]_ + +1. Create a fork of the develop branch to work on. +2. Find the Markdown file (.md) to edit in the `packages/mermaid/src/docs` directory. 3. Make changes or add new documentation. -4. Commit changes to your fork and push it to GitHub. +4. Commit changes to your branch and push it to GitHub (which should create a new branch). 5. Create a Pull Request of your fork. To edit Docs on GitHub: 1. Login to [GitHub.com](https://www.github.com). -2. Navigate to [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). +2. Navigate to [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs) in the mermaid-js repository. 3. To edit a file, click the pencil icon at the top-right of the file contents panel. 4. Describe what you changed in the **Propose file change** section, located at the bottom of the page. 5. Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch). -6. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button. +6. Visit the Actions tab in Github, `https://github.com//mermaid/actions` and enable the actions for your fork. This will ensure that the documentation is built and updated in your fork. +7. Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button. + +### Documentation organization: Sidebar navigation + +If you want to propose changes to how the documentation is _organized_, such as adding a new section or re-arranging or renaming a section, you must update the **sidebar navigation.** + +The sidebar navigation is defined in [the vitepress configuration file config.ts](../.vitepress/config.ts). + +## Questions or Suggestions? + +#### First search to see if someone has already asked (and hopefully been answered) or suggested the same thing. + +- Search in Discussions +- Search in open Issues +- Search in closed Issues + +If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it. +Use the GitHub reactions to add a thumbs-up to the issue or discussion thread. + +This helps the team know the relative interest in something and helps them set priorities and assignments. + +Feel free to add to the discussion on the issue or topic. + +If you can't find anything that already addresses your question or suggestion, _open a new issue:_ + +Log in to [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22). + +### How to Contribute a Suggestion ## Last Words diff --git a/docs/community/n00b-overview.md b/docs/community/n00b-overview.md index e0056d912..afb110e9e 100644 --- a/docs/community/n00b-overview.md +++ b/docs/community/n00b-overview.md @@ -69,6 +69,6 @@ In fact one can pick up the syntax for it quite easily from the examples given a ## Mermaid is for everyone. -Video [Tutorials](https://mermaid-js.github.io/mermaid/#/../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). +Video [Tutorials](https://mermaid.js.org/config/Tutorials.html) are also available for the mermaid [live editor](https://mermaid.live/). Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. diff --git a/docs/config/directives.md b/docs/config/directives.md index e845596ad..27fd767c7 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -8,11 +8,11 @@ ## Directives -Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. +Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration. -The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level. +The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level. -While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives. +While directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the _option to define the set of configurations_ that you wish to allow diagram authors to override with directives. ## Types of Directives options @@ -20,29 +20,29 @@ Mermaid basically supports two types of configuration options to be overridden b 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: -- theme -- fontFamily -- logLevel -- securityLevel -- startOnLoad -- secure + - theme + - fontFamily + - logLevel + - securityLevel + - startOnLoad + - secure -2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. - For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. +2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. + For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. -**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. +**NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. > **Note** -> We plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs soon. +> We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon. ## Declaring directives Now that we have defined the types of configurations that are available, we can learn how to declare directives. -A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`. +A directive always starts and ends with `%%` signs with directive text in between, like `%% {directive_text} %%`. Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section. -Following code snippet shows the structure of a directive: +The following code snippet shows the structure of a directive: %%{ init: { @@ -61,14 +61,14 @@ Following code snippet shows the structure of a directive: You can also define the directives in a single line, like this: - %%{init: { **insert argument here**}}%% + %%{init: { **insert configuration options here** } }%% For example, the following code snippet: %%{init: { "sequence": { "mirrorActors":false }}}%% **Notes:** -The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored. +The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored. Valid Key Value pairs can be found in config. Example with a simple graph: @@ -87,7 +87,7 @@ A-->B Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself. -Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means: +Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. ```mermaid-example %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%% @@ -101,7 +101,7 @@ Note: You can use 'init' or 'initialize' as both acceptable as init directives. ... ``` -parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`: +For example, parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`: ```json { @@ -115,16 +115,15 @@ This will then be sent to `mermaid.initialize(...)` for rendering. ## Directive Examples -More directive examples for diagram specific configuration overrides -Now that the concept of directives has been explained, Let us see some more examples for directives usage: +Now that the concept of directives has been explained, let us see some more examples of directive usage: -### Changing Theme via directive +### Changing theme via directive -The following code snippet changes theme to forest: +The following code snippet changes `theme` to `forest`: `%%{init: { "theme": "forest" } }%%` -Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`. +Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`. Default Value is `default`. Example: @@ -155,7 +154,7 @@ A --> C[End] ### Changing fontFamily via directive -The following code snippet changes fontFamily to rebuchet MS, Verdana, Arial, Sans-Serif: +The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif: `%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%` @@ -187,11 +186,11 @@ A --> C[End] ### Changing logLevel via directive -The following code snippet changes logLevel to 2: +The following code snippet changes `logLevel` to `2`: `%%{init: { "logLevel": 2 } }%%` -Possible logLevel values are: +Possible `logLevel` values are: - `1` for _debug_, - `2` for _info_ @@ -234,14 +233,14 @@ Some common flowchart configurations are: - _diagramPadding_: number - _useMaxWidth_: number -For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. -_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ +For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. +_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._ The following code snippet changes flowchart config: `%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%` -Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear. +Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`. ```mermaid-example %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%% @@ -267,7 +266,7 @@ A --> C[End] ### Changing Sequence diagram config via directive -Some common sequence configurations are: +Some common sequence diagram configurations are: - _width_: number - _height_: number @@ -278,8 +277,8 @@ Some common sequence configurations are: - _showSequenceNumbers_: boolean - _wrap_: boolean -For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code. -_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_ +For a complete list of sequence diagram configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code. +_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._ So, `wrap` by default has a value of `false` for sequence diagrams. @@ -289,7 +288,7 @@ Let us see an example: sequenceDiagram Alice->Bob: Hello Bob, how are you? -Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? +Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` @@ -298,7 +297,7 @@ Bob->Alice: Cool sequenceDiagram Alice->Bob: Hello Bob, how are you? -Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? +Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` @@ -309,13 +308,13 @@ The following code snippet changes sequence diagram config for `wrap` to `true`: `%%{init: { "sequence": { "wrap": true} } }%%` -Using in the diagram above, the wrap will be enabled. +By applying that snippet to the diagram above, `wrap` will be enabled: ```mermaid-example %%{init: { "sequence": { "wrap": true, "width":300 } } }%% sequenceDiagram Alice->Bob: Hello Bob, how are you? -Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? +Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` @@ -324,7 +323,7 @@ Bob->Alice: Cool %%{init: { "sequence": { "wrap": true, "width":300 } } }%% sequenceDiagram Alice->Bob: Hello Bob, how are you? -Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion? +Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion? Alice->Bob: Good. Bob->Alice: Cool ``` diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md index f84a51b87..527b46d09 100644 --- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md +++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### Defined in -[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98) +[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97) --- @@ -51,4 +51,4 @@ The svg code for the rendered graph. #### Defined in -[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88) +[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index ef04c10c3..591b6841a 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) #### Defined in -[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82) +[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81) ## Variables @@ -96,7 +96,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667) +[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663) ## Functions @@ -127,7 +127,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:306](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L306) +[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308) --- @@ -153,7 +153,7 @@ the cleaned up svgCode #### Defined in -[mermaidAPI.ts:257](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257) +[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256) --- @@ -179,7 +179,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186) +[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185) --- @@ -202,7 +202,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:234](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L234) +[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233) --- @@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170) +[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169) --- @@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156) +[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155) --- @@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important; #### Defined in -[mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127) +[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126) --- @@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -[mermaidAPI.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L285) +[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287) --- @@ -320,4 +320,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:356](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L356) +[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358) diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md index 128e86d21..28db3afff 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations.md @@ -6,6 +6,20 @@ # Integrations +## Recommendations + +### File Extension + +Applications that support mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions. + +### MIME Type + +The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`. + +[IANA](https://www.iana.org/) recognition pending. + +--- + The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications. They also serve as proof of concept, for the variety of things that can be built with mermaid. @@ -16,6 +30,7 @@ They also serve as proof of concept, for the variety of things that can be built - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**) - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action) - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator) + - [GitHub Writer](https://github.com/ckeditor/github-writer) - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**) - [Gitea](https://gitea.io) (**Native support**) - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**) @@ -58,6 +73,8 @@ They also serve as proof of concept, for the variety of things that can be built - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams) - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid) - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams) +- [Nextra](https://nextra.site/) + - [Mermaid](https://nextra.site/docs/guide/mermaid) ## CMS @@ -142,6 +159,8 @@ They also serve as proof of concept, for the variety of things that can be built - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams) - [GNU Nano](https://www.nano-editor.org/) - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid) +- [CKEditor](https://github.com/ckeditor/ckeditor5) + - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid) ## Document Generation diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 0782aa328..a843ae419 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,8 @@ # Announcements -## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers) +## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/) -26 April 2023 Β· 11 mins +8 June 2023 Β· 7 mins -Documentation tends to be bad because companies and projects don’t fully realize the costs of bad documentation. +A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set. diff --git a/docs/news/blog.md b/docs/news/blog.md index 3f99a54f2..48b669d79 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/) + +8 June 2023 Β· 7 mins + +A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set. + ## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers) 26 April 2023 Β· 11 mins diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index b4d527fbf..a47061025 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -32,6 +32,9 @@ flowchart LR > **Note** > The id is what is displayed in the box. +> **πŸ’‘ Tip** +> Instead of `flowchart` one can also use `graph`. + ### A node with text It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text @@ -785,7 +788,10 @@ This feature is applicable to node labels, edge labels, and subgraph labels. ## Interaction -It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. +It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. + +> **Note** +> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. click nodeId callback click nodeId call callback() @@ -913,6 +919,10 @@ In the example below the style defined in the linkStyle statement will belong to linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; +It is also possible to add style to multiple links in a single statement, by separating link numbers with commas: + + linkStyle 1,2,7 color:blue; + ### Styling line curves It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. @@ -951,10 +961,14 @@ flowchart LR More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look. -a class definition looks like the example below: +A class definition looks like the example below: classDef className fill:#f9f,stroke:#333,stroke-width:4px; +Also, it is possible to define style to multiple classes in one statement: + + classDef firstClassName,secondClassName font-size:12pt; + Attachment of a class to a node is done as per below: class nodeId1 className; @@ -1077,7 +1091,8 @@ You can change the renderer to elk by adding this directive: %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% -Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. +> **Note** +> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. ### Width diff --git a/docs/syntax/img/zenuml-participant-annotators.png b/docs/syntax/img/zenuml-participant-annotators.png new file mode 100644 index 000000000..13789371f Binary files /dev/null and b/docs/syntax/img/zenuml-participant-annotators.png differ diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md index 86aa21f72..9e93bd3a4 100644 --- a/docs/syntax/quadrantChart.md +++ b/docs/syntax/quadrantChart.md @@ -46,9 +46,6 @@ quadrantChart ## Syntax -> **Note** -> In place of `` you can use text like `this is a sample text` or inside **double quotes** like `"This type of text may contain unicode like ❀"`. - > **Note** > If there is no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant. > If there are points **x-axis** labels will rendered from left of the respective quadrant also they will be displayed in bottom of the chart, and **y-axis** lables will be rendered in bottom of the respective quadrant, the quadrant text will render at top of the respective quadrant. @@ -152,10 +149,10 @@ Points are used to plot a circle inside the quadrantChart. The syntax is ` %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% quadrantChart x-axis Urgent --> Not Urgent - y-axis Not Important --> important + y-axis Not Important --> "Important ❀" quadrant-1 Plan quadrant-2 Do - quadrant-3 Deligate + quadrant-3 Delegate quadrant-4 Delete ``` @@ -163,9 +160,9 @@ quadrantChart %%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%% quadrantChart x-axis Urgent --> Not Urgent - y-axis Not Important --> important + y-axis Not Important --> "Important ❀" quadrant-1 Plan quadrant-2 Do - quadrant-3 Deligate + quadrant-3 Delegate quadrant-4 Delete ``` diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index f3db4bb59..d9915ff3e 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -137,7 +137,7 @@ timeline section Stone Age 7600 BC : Britain's oldest known house was built in Orkney, Scotland 6000 BC : Sea levels rise and Britain becomes an island.
The people who live here are hunter-gatherers. - section Broze Age + section Bronze Age 2300 BC : People arrive from Europe and settle in Britain.
They bring farming and metalworking. : New styles of pottery and ways of burying the dead appear. 2200 BC : The last major building works are completed at Stonehenge.
People now bury their dead in stone circles. @@ -151,7 +151,7 @@ timeline section Stone Age 7600 BC : Britain's oldest known house was built in Orkney, Scotland 6000 BC : Sea levels rise and Britain becomes an island.
The people who live here are hunter-gatherers. - section Broze Age + section Bronze Age 2300 BC : People arrive from Europe and settle in Britain.
They bring farming and metalworking. : New styles of pottery and ways of burying the dead appear. 2200 BC : The last major building works are completed at Stonehenge.
People now bury their dead in stone circles. diff --git a/docs/syntax/zenuml.md b/docs/syntax/zenuml.md new file mode 100644 index 000000000..9e9b11255 --- /dev/null +++ b/docs/syntax/zenuml.md @@ -0,0 +1,472 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/zenuml.md](../../packages/mermaid/src/docs/syntax/zenuml.md). + +# ZenUML + +> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. + +Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different +syntax than the original Sequence Diagram in mermaid. + +```mermaid-example +zenuml + title Demo + Alice->John: Hello John, how are you? + John->Alice: Great! + Alice->John: See you later! +``` + +```mermaid +zenuml + title Demo + Alice->John: Hello John, how are you? + John->Alice: Great! + Alice->John: See you later! +``` + +## Syntax + +### Participants + +The participants can be defined implicitly as in the first example on this page. The participants or actors are +rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a +different order than how they appear in the first message. It is possible to specify the actor's order of +appearance by doing the following: + +```mermaid-example +zenuml + title Declare participant (optional) + Bob + Alice + Alice->Bob: Hi Bob + Bob->Alice: Hi Alice +``` + +```mermaid +zenuml + title Declare participant (optional) + Bob + Alice + Alice->Bob: Hi Bob + Bob->Alice: Hi Alice +``` + +### Annotators + +If you specifically want to use symbols instead of just rectangles with text you can do so by using the annotator syntax to declare participants as per below. + +```mermaid-example +zenuml + title Annotators + @Actor Alice + @Database Bob + Alice->Bob: Hi Bob + Bob->Alice: Hi Alice +``` + +```mermaid +zenuml + title Annotators + @Actor Alice + @Database Bob + Alice->Bob: Hi Bob + Bob->Alice: Hi Alice +``` + +Here are the available annotators: +![img.png](img/zenuml-participant-annotators.png) + +### Aliases + +The participants can have a convenient identifier and a descriptive label. + +```mermaid-example +zenuml + title Aliases + A as Alice + J as John + A->J: Hello John, how are you? + J->A: Great! +``` + +```mermaid +zenuml + title Aliases + A as Alice + J as John + A->J: Hello John, how are you? + J->A: Great! +``` + +## Messages + +Messages can be one of: + +1. Sync message +2. Async message +3. Creation message +4. Reply message + +### Sync message + +You can think of a sync (blocking) method in a programming language. + +```mermaid-example +zenuml + title Sync message + A.SyncMessage + A.SyncMessage(with, parameters) { + B.nestedSyncMessage() + } +``` + +```mermaid +zenuml + title Sync message + A.SyncMessage + A.SyncMessage(with, parameters) { + B.nestedSyncMessage() + } +``` + +### Async message + +You can think of an async (non-blocking) method in a programming language. +Fire an event and forget about it. + +```mermaid-example +zenuml + title Async message + Alice->Bob: How are you? +``` + +```mermaid +zenuml + title Async message + Alice->Bob: How are you? +``` + +### Creation message + +We use `new` keyword to create an object. + +```mermaid-example +zenuml + new A1 + new A2(with, parameters) +``` + +```mermaid +zenuml + new A1 + new A2(with, parameters) +``` + +### Reply message + +There are three ways to express a reply message: + +```mermaid-example +zenuml + // 1. assign a variable from a sync message. + a = A.SyncMessage() + + // 1.1. optionally give the variable a type + SomeType a = A.SyncMessage() + + // 2. use return keyword + A.SyncMessage() { + return result + } + + // 3. use @return or @reply annotator on an async message + @return + A->B: result +``` + +```mermaid +zenuml + // 1. assign a variable from a sync message. + a = A.SyncMessage() + + // 1.1. optionally give the variable a type + SomeType a = A.SyncMessage() + + // 2. use return keyword + A.SyncMessage() { + return result + } + + // 3. use @return or @reply annotator on an async message + @return + A->B: result +``` + +The third way `@return` is rarely used, but it is useful when you want to return to one level up. + +```mermaid-example +zenuml + title Reply message + Client->A.method() { + B.method() { + if(condition) { + return x1 + // return early + @return + A->Client: x11 + } + } + return x2 + } +``` + +```mermaid +zenuml + title Reply message + Client->A.method() { + B.method() { + if(condition) { + return x1 + // return early + @return + A->Client: x11 + } + } + return x2 + } +``` + +## Nesting + +Sync messages and Creation messages are naturally nestable with `{}`. + +```mermaid-example +zenuml + A.method() { + B.nested_sync_method() + B->C: nested async message + } +``` + +```mermaid +zenuml + A.method() { + B.nested_sync_method() + B->C: nested async message + } +``` + +## Comments + +It is possible to add comments to a sequence diagram with `// comment` syntax. +Comments will be rendered above the messages or fragments. Comments on other places +are ignored. Markdown is supported. + +See the example below: + +```mermaid-example +zenuml + // a comment on a participant will not be rendered + BookService + // a comment on a message. + // **Markdown** is supported. + BookService.getBook() +``` + +```mermaid +zenuml + // a comment on a participant will not be rendered + BookService + // a comment on a message. + // **Markdown** is supported. + BookService.getBook() +``` + +## Loops + +It is possible to express loops in a ZenUML diagram. This is done by any of the +following notations: + +1. while +2. for +3. forEach, foreach +4. loop + +```zenuml +while(condition) { + ...statements... +} +``` + +See the example below: + +```mermaid-example +zenuml + Alice->John: Hello John, how are you? + while(true) { + John->Alice: Great! + } +``` + +```mermaid +zenuml + Alice->John: Hello John, how are you? + while(true) { + John->Alice: Great! + } +``` + +## Alt + +It is possible to express alternative paths in a sequence diagram. This is done by the notation + +```zenuml +if(condition1) { + ...statements... +} else if(condition2) { + ...statements... +} else { + ...statements... +} +``` + +See the example below: + +```mermaid-example +zenuml + Alice->Bob: Hello Bob, how are you? + if(is_sick) { + Bob->Alice: Not so good :( + } else { + Bob->Alice: Feeling fresh like a daisy + } +``` + +```mermaid +zenuml + Alice->Bob: Hello Bob, how are you? + if(is_sick) { + Bob->Alice: Not so good :( + } else { + Bob->Alice: Feeling fresh like a daisy + } +``` + +## Opt + +It is possible to render an `opt` fragment. This is done by the notation + +```zenuml +opt { + ...statements... +} +``` + +See the example below: + +```mermaid-example +zenuml + Alice->Bob: Hello Bob, how are you? + Bob->Alice: Not so good :( + opt { + Bob->Alice: Thanks for asking + } +``` + +```mermaid +zenuml + Alice->Bob: Hello Bob, how are you? + Bob->Alice: Not so good :( + opt { + Bob->Alice: Thanks for asking + } +``` + +## Parallel + +It is possible to show actions that are happening in parallel. + +This is done by the notation + +```zenuml +par { + statement1 + statement2 + statement3 +} +``` + +See the example below: + +```mermaid-example +zenuml + par { + Alice->Bob: Hello guys! + Alice->John: Hello guys! + } +``` + +```mermaid +zenuml + par { + Alice->Bob: Hello guys! + Alice->John: Hello guys! + } +``` + +## Try/Catch/Finally (Break) + +It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions). + +This is done by the notation + + try { + ...statements... + } catch { + ...statements... + } finally { + ...statements... + } + +See the example below: + +```mermaid-example +zenuml + try { + Consumer->API: Book something + API->BookingService: Start booking process + } catch { + API->Consumer: show failure + } finally { + API->BookingService: rollback status + } +``` + +```mermaid +zenuml + try { + Consumer->API: Book something + API->BookingService: Start booking process + } catch { + API->Consumer: show failure + } finally { + API->BookingService: rollback status + } +``` + +## Integrating with your library/website. + +Zenuml uses the experimental lazy loading & async rendering features which could change in the future. + +You can use this method to add mermaid including the zenuml diagram to a web page: + +```html + +``` diff --git a/package.json b/package.json index c5f3d1969..ac197712c 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "mermaid-monorepo", "private": true, - "version": "10.2.0", + "version": "10.2.3", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.5.1", + "packageManager": "pnpm@8.6.2", "keywords": [ "diagram", "markdown", @@ -18,10 +18,11 @@ "build:vite": "ts-node-esm --transpileOnly .vite/build.ts", "build:mermaid": "pnpm build:vite --mermaid", "build:viz": "pnpm build:mermaid --visualize", - "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly", + "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly", "build:watch": "pnpm build:vite --watch", "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", + "dev:coverage": "VITE_COVERAGE=true pnpm dev", "release": "pnpm build", "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .", "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts", @@ -30,6 +31,9 @@ "cypress": "cypress run", "cypress:open": "cypress open", "e2e": "start-server-and-test dev http://localhost:9000/ cypress", + "e2e:coverage": "VITE_COVERAGE=true pnpm e2e", + "coverage:merge": "ts-node-esm scripts/coverage.ts", + "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge", "ci": "vitest run", "test": "pnpm lint && vitest run", "test:watch": "vitest --watch", @@ -55,11 +59,12 @@ ] }, "devDependencies": { - "@applitools/eyes-cypress": "^3.32.0", + "@applitools/eyes-cypress": "^3.33.1", "@commitlint/cli": "^17.6.1", "@commitlint/config-conventional": "^17.6.1", "@cspell/eslint-plugin": "^6.31.1", - "@rollup/plugin-typescript": "^11.1.0", + "@cypress/code-coverage": "^3.10.7", + "@rollup/plugin-typescript": "^11.1.1", "@types/cors": "^2.8.13", "@types/eslint": "^8.37.0", "@types/express": "^4.17.17", @@ -72,15 +77,15 @@ "@types/rollup-plugin-visualizer": "^4.2.1", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", - "@vitest/coverage-c8": "^0.31.0", - "@vitest/spy": "^0.31.0", - "@vitest/ui": "^0.31.0", + "@vitest/coverage-istanbul": "^0.32.2", + "@vitest/spy": "^0.32.2", + "@vitest/ui": "^0.32.2", "concurrently": "^8.0.1", "cors": "^2.8.5", "coveralls": "^3.1.1", "cypress": "^12.10.0", "cypress-image-snapshot": "^4.0.1", - "esbuild": "^0.17.18", + "esbuild": "^0.18.0", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-cypress": "^2.13.2", @@ -101,19 +106,24 @@ "js-yaml": "^4.1.0", "jsdom": "^21.1.1", "lint-staged": "^13.2.1", + "nyc": "^15.1.0", "path-browserify": "^1.0.1", "pnpm": "^8.3.1", "prettier": "^2.8.8", "prettier-plugin-jsdoc": "^0.4.2", "rimraf": "^5.0.0", - "rollup-plugin-visualizer": "^5.9.0", + "rollup-plugin-visualizer": "^5.9.2", "start-server-and-test": "^2.0.0", "ts-node": "^10.9.1", - "typescript": "^5.0.4", - "vite": "^4.3.1", - "vitest": "^0.31.0" + "typescript": "^5.1.3", + "vite": "^4.3.9", + "vite-plugin-istanbul": "^4.1.0", + "vitest": "^0.32.2" }, "volta": { "node": "18.16.0" + }, + "nyc": { + "report-dir": "coverage/cypress" } } diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json index 75272d5a4..1ea4135ef 100644 --- a/packages/mermaid-example-diagram/package.json +++ b/packages/mermaid-example-diagram/package.json @@ -52,9 +52,6 @@ "rimraf": "^5.0.0", "mermaid": "workspace:*" }, - "resolutions": { - "d3": "^7.0.0" - }, "files": [ "dist" ], diff --git a/packages/mermaid-example-diagram/src/detector.ts b/packages/mermaid-example-diagram/src/detector.ts index 93fd42762..54b9d555b 100644 --- a/packages/mermaid-example-diagram/src/detector.ts +++ b/packages/mermaid-example-diagram/src/detector.ts @@ -3,7 +3,7 @@ import type { ExternalDiagramDefinition } from 'mermaid'; const id = 'example-diagram'; const detector = (txt: string) => { - return txt.match(/^\s*example-diagram/) !== null; + return /^\s*example-diagram/.test(txt); }; const loader = async () => { diff --git a/packages/mermaid-zenuml/README.md b/packages/mermaid-zenuml/README.md new file mode 120000 index 000000000..e80740063 --- /dev/null +++ b/packages/mermaid-zenuml/README.md @@ -0,0 +1 @@ +../mermaid/src/docs/syntax/zenuml.md \ No newline at end of file diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json new file mode 100644 index 000000000..cb8da96b6 --- /dev/null +++ b/packages/mermaid-zenuml/package.json @@ -0,0 +1,47 @@ +{ + "name": "@mermaid-js/mermaid-zenuml", + "version": "0.1.0", + "description": "MermaidJS plugin for ZenUML integration", + "module": "dist/mermaid-zenuml.core.mjs", + "types": "dist/detector.d.ts", + "type": "module", + "exports": { + ".": { + "import": "./dist/mermaid-zenuml.core.mjs", + "types": "./dist/detector.d.ts" + }, + "./*": "./*" + }, + "keywords": [ + "diagram", + "markdown", + "zenuml", + "mermaid" + ], + "scripts": { + "prepublishOnly": "pnpm -w run build" + }, + "repository": { + "type": "git", + "url": "https://github.com/mermaid-js/mermaid", + "directory": "packages/mermaid-zenuml" + }, + "contributors": [ + "Peng Xiao (https://github.com/MrCoder)", + "Sidharth Vinod (https://sidharth.dev)", + "Dong Cai (https://github.com/dontry)" + ], + "license": "MIT", + "dependencies": { + "@zenuml/core": "^3.0.0" + }, + "devDependencies": { + "mermaid": "workspace:^" + }, + "peerDependencies": { + "mermaid": "workspace:>=10.0.0" + }, + "files": [ + "dist" + ] +} diff --git a/packages/mermaid-zenuml/src/detector.ts b/packages/mermaid-zenuml/src/detector.ts new file mode 100644 index 000000000..d782ffe33 --- /dev/null +++ b/packages/mermaid-zenuml/src/detector.ts @@ -0,0 +1,20 @@ +import type { ExternalDiagramDefinition } from 'mermaid'; + +const id = 'zenuml'; + +const detector = (txt: string) => { + return /^\s*zenuml/.test(txt); +}; + +const loader = async () => { + const { diagram } = await import('./zenuml-definition.js'); + return { id, diagram }; +}; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid-zenuml/src/mermaidUtils.ts b/packages/mermaid-zenuml/src/mermaidUtils.ts new file mode 100644 index 000000000..623685879 --- /dev/null +++ b/packages/mermaid-zenuml/src/mermaidUtils.ts @@ -0,0 +1,58 @@ +import type { MermaidConfig } from 'mermaid'; + +const warning = (s: string) => { + // Todo remove debug code + // eslint-disable-next-line no-console + console.error('Log function was called before initialization', s); +}; + +export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; + +export const LEVELS: Record = { + trace: 0, + debug: 1, + info: 2, + warn: 3, + error: 4, + fatal: 5, +}; + +export const log: Record = { + trace: warning, + debug: warning, + info: warning, + warn: warning, + error: warning, + fatal: warning, +}; + +export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; +export let getConfig: () => MermaidConfig; +export let sanitizeText: (str: string) => string; +// eslint-disable @typescript-eslint/no-explicit-any +export let setupGraphViewbox: ( + graph: any, + svgElem: any, + padding: any, + useMaxWidth: boolean +) => void; + +export const injectUtils = ( + _log: Record, + _setLogLevel: any, + _getConfig: any, + _sanitizeText: any, + _setupGraphViewbox: any +) => { + _log.info('Mermaid utils injected'); + log.trace = _log.trace; + log.debug = _log.debug; + log.info = _log.info; + log.warn = _log.warn; + log.error = _log.error; + log.fatal = _log.fatal; + setLogLevel = _setLogLevel; + getConfig = _getConfig; + sanitizeText = _sanitizeText; + setupGraphViewbox = _setupGraphViewbox; +}; diff --git a/packages/mermaid-zenuml/src/parser.ts b/packages/mermaid-zenuml/src/parser.ts new file mode 100644 index 000000000..8c0ca55d5 --- /dev/null +++ b/packages/mermaid-zenuml/src/parser.ts @@ -0,0 +1,12 @@ +/** + * ZenUML manage parsing internally. It uses Antlr4 to parse the DSL. + * The parser is defined in https://github.com/ZenUml/vue-sequence/blob/main/src/parser/index.js + * + * This is a dummy parser that satisfies the mermaid API logic. + */ +export default { + parser: { yy: {} }, + parse: () => { + // no op + }, +}; diff --git a/packages/mermaid-zenuml/src/zenuml-definition.ts b/packages/mermaid-zenuml/src/zenuml-definition.ts new file mode 100644 index 000000000..ab287ff81 --- /dev/null +++ b/packages/mermaid-zenuml/src/zenuml-definition.ts @@ -0,0 +1,17 @@ +import { injectUtils } from './mermaidUtils.js'; +import parser from './parser.js'; +import renderer from './zenumlRenderer.js'; + +export const diagram = { + db: { + clear: () => { + // no-op + }, + }, + renderer, + parser, + styles: () => { + // no-op + }, + injectUtils, +}; diff --git a/packages/mermaid-zenuml/src/zenumlRenderer.ts b/packages/mermaid-zenuml/src/zenumlRenderer.ts new file mode 100644 index 000000000..e8ab69cdd --- /dev/null +++ b/packages/mermaid-zenuml/src/zenumlRenderer.ts @@ -0,0 +1,68 @@ +import { getConfig, log } from './mermaidUtils.js'; +import ZenUml from '@zenuml/core'; + +const regexp = /^\s*zenuml/; + +// Create a Zen UML container outside the svg first for rendering, otherwise the Zen UML diagram cannot be rendered properly +function createTemporaryZenumlContainer(id: string) { + const container = document.createElement('div'); + container.id = `container-${id}`; + container.style.display = 'flex'; + container.innerHTML = `
`; + const app = container.querySelector(`#zenUMLApp-${id}`) as HTMLElement; + return { container, app }; +} + +// Create a foreignObject to wrap the Zen UML container in the svg +function createForeignObject(id: string) { + const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); + foreignObject.setAttribute('x', '0'); + foreignObject.setAttribute('y', '0'); + foreignObject.setAttribute('width', '100%'); + foreignObject.setAttribute('height', '100%'); + const { container, app } = createTemporaryZenumlContainer(id); + foreignObject.appendChild(container); + return { foreignObject, container, app }; +} + +/** + * Draws a Zen UML in the tag with id: id based on the graph definition in text. + * + * @param text - The text of the diagram + * @param id - The id of the diagram which will be used as a DOM element id¨ + */ +export const draw = async function (text: string, id: string) { + log.info('draw with Zen UML renderer', ZenUml); + + text = text.replace(regexp, ''); + const { securityLevel } = getConfig(); + // Handle root and Document for when rendering in sandbox mode + let sandboxElement: HTMLIFrameElement | null = null; + if (securityLevel === 'sandbox') { + sandboxElement = document.getElementById('i' + id) as HTMLIFrameElement; + } + + const root = securityLevel === 'sandbox' ? sandboxElement?.contentWindow?.document : document; + + const svgContainer = root?.querySelector(`svg#${id}`); + + if (!root || !svgContainer) { + log.error('Cannot find root or svgContainer'); + return; + } + + const { foreignObject, container, app } = createForeignObject(id); + svgContainer.appendChild(foreignObject); + // @ts-expect-error @zenuml/core@3.0.0 exports the wrong type for ZenUml + const zenuml = new ZenUml(app); + // default is a theme name. More themes to be added and will be configurable in the future + await zenuml.render(text, 'theme-mermaid'); + + const { width, height } = window.getComputedStyle(container); + log.debug('zenuml diagram size', width, height); + svgContainer.setAttribute('style', `width: ${width}; height: ${height};`); +}; + +export default { + draw, +}; diff --git a/packages/mermaid-zenuml/tsconfig.json b/packages/mermaid-zenuml/tsconfig.json new file mode 100644 index 000000000..45076b7b5 --- /dev/null +++ b/packages/mermaid-zenuml/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./dist" + }, + "include": ["./src/**/*.ts"], + "typeRoots": ["./src/types"] +} diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index b9f5117aa..148bab5b6 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.2.0", + "version": "10.2.3", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", @@ -28,7 +28,7 @@ "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": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress", - "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing", + "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && 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:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress", "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"", @@ -74,6 +74,7 @@ "devDependencies": { "@types/cytoscape": "^3.19.9", "@types/d3": "^7.4.0", + "@types/d3-selection": "^3.0.5", "@types/dompurify": "^3.0.2", "@types/jsdom": "^21.1.1", "@types/lodash-es": "^4.17.7", diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts index eac82ee34..7a3ab7f10 100644 --- a/packages/mermaid/src/accessibility.spec.ts +++ b/packages/mermaid/src/accessibility.spec.ts @@ -51,7 +51,6 @@ describe('accessibility', () => { desc: string | null | undefined, givenId: string ) { - // @ts-ignore Required to easily handle the d3 select types const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`); @@ -63,7 +62,6 @@ describe('accessibility', () => { desc: string | null | undefined, givenId: string ) { - // @ts-ignore Required to easily handle the d3 select types const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`); diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 03c04ed09..0253be45d 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -4,7 +4,7 @@ import flowchartV2 from '../diagrams/flowchart/flowDetector-v2.js'; import er from '../diagrams/er/erDetector.js'; import git from '../diagrams/git/gitGraphDetector.js'; import gantt from '../diagrams/gantt/ganttDetector.js'; -import info from '../diagrams/info/infoDetector.js'; +import { info } from '../diagrams/info/infoDetector.js'; import pie from '../diagrams/pie/pieDetector.js'; import quadrantChart from '../diagrams/quadrant-chart/quadrantDetector.js'; import requirement from '../diagrams/requirement/requirementDetector.js'; diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 7e89d9cd7..457dd673b 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -7,6 +7,7 @@ import { addStylesForDiagram } from '../styles.js'; import { DiagramDefinition, DiagramDetector } from './types.js'; import * as _commonDb from '../commonDb.js'; import { parseDirective as _parseDirective } from '../directiveUtils.js'; +import isEmpty from 'lodash-es/isEmpty.js'; /* Packaging and exposing resources for external diagrams so that they can import @@ -50,7 +51,9 @@ export const registerDiagram = ( if (detector) { addDetector(id, detector); } - addStylesForDiagram(id, diagram.styles); + if (!isEmpty(diagram.styles)) { + addStylesForDiagram(id, diagram.styles); + } if (diagram.injectUtils) { diagram.injectUtils( diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts index 8c0e998f6..f8d2e9c41 100644 --- a/packages/mermaid/src/diagram-api/frontmatter.ts +++ b/packages/mermaid/src/diagram-api/frontmatter.ts @@ -1,4 +1,4 @@ -import { DiagramDb } from './types.js'; +import { DiagramDB } from './types.js'; // The "* as yaml" part is necessary for tree-shaking import * as yaml from 'js-yaml'; @@ -22,7 +22,7 @@ type FrontMatterMetadata = { * @param db - Diagram database, could be of any diagram. * @returns text with frontmatter stripped out */ -export function extractFrontMatter(text: string, db: DiagramDb): string { +export function extractFrontMatter(text: string, db: DiagramDB): string { const matches = text.match(frontMatterRegex); if (matches) { const parsed: FrontMatterMetadata = yaml.load(matches[1], { diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index f95ca5ab5..265af6587 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -1,4 +1,6 @@ +import { Diagram } from '../Diagram.js'; import { MermaidConfig } from '../config.type.js'; +import type * as d3 from 'd3'; export interface InjectUtils { _log: any; @@ -13,7 +15,7 @@ export interface InjectUtils { /** * Generic Diagram DB that may apply to any diagram type. */ -export interface DiagramDb { +export interface DiagramDB { clear?: () => void; setDiagramTitle?: (title: string) => void; setDisplayMode?: (title: string) => void; @@ -23,10 +25,10 @@ export interface DiagramDb { } export interface DiagramDefinition { - db: DiagramDb; + db: DiagramDB; renderer: any; parser: any; - styles: any; + styles?: any; init?: (config: MermaidConfig) => void; injectUtils?: ( _log: InjectUtils['_log'], @@ -52,3 +54,31 @@ export interface ExternalDiagramDefinition { export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean; export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>; + +/** + * Type for function draws diagram in the tag with id: id based on the graph definition in text. + * + * @param text - The text of the diagram. + * @param id - The id of the diagram which will be used as a DOM element id. + * @param version - MermaidJS version from package.json. + * @param diagramObject - A standard diagram containing the DB and the text and type etc of the diagram. + */ +export type DrawDefinition = ( + text: string, + id: string, + version: string, + diagramObject: Diagram +) => void; + +/** + * Type for function parse directive from diagram code. + * + * @param statement - + * @param context - + * @param type - + */ +export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void; + +export type HTML = d3.Selection; + +export type SVG = d3.Selection; diff --git a/packages/mermaid/src/diagrams/c4/c4Detector.ts b/packages/mermaid/src/diagrams/c4/c4Detector.ts index e6e82c6be..b06ab6cb1 100644 --- a/packages/mermaid/src/diagrams/c4/c4Detector.ts +++ b/packages/mermaid/src/diagrams/c4/c4Detector.ts @@ -1,12 +1,16 @@ -import type { ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'c4'; -const detector = (txt: string) => { - return txt.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/) !== null; +const detector: DiagramDetector = (txt) => { + return /^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./c4Diagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js index 28600241c..e60e58f21 100644 --- a/packages/mermaid/src/diagrams/c4/c4Renderer.js +++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js @@ -220,7 +220,7 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray, let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text); c4ShapeTypeConf.fontSize = c4ShapeTypeConf.fontSize - 2; c4Shape.typeC4Shape.width = calculateTextWidth( - '<<' + c4Shape.typeC4Shape.text + '>>', + '«' + c4Shape.typeC4Shape.text + '»', c4ShapeTypeConf ); c4Shape.typeC4Shape.height = c4ShapeTypeConf.fontSize + 2; diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index d9e17db54..11a1eb37d 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/packages/mermaid/src/diagrams/class/classDb.ts @@ -1,4 +1,4 @@ -// @ts-expect-error - d3 types issue +// @ts-nocheck - don't check until handle it import { select, Selection } from 'd3'; import { log } from '../../logger.js'; import * as configApi from '../../config.js'; @@ -367,7 +367,6 @@ export const relationType = { const setupToolTips = function (element: Element) { let tooltipElem: Selection = select('.mermaidTooltip'); - // @ts-ignore - _groups is a dynamic property if ((tooltipElem._groups || tooltipElem)[0][0] === null) { tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0); } diff --git a/packages/mermaid/src/diagrams/class/classDetector-V2.ts b/packages/mermaid/src/diagrams/class/classDetector-V2.ts index 9eda53a4b..1823ad002 100644 --- a/packages/mermaid/src/diagrams/class/classDetector-V2.ts +++ b/packages/mermaid/src/diagrams/class/classDetector-V2.ts @@ -1,20 +1,21 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'classDiagram'; const detector: DiagramDetector = (txt, config) => { // If we have configured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram - if ( - txt.match(/^\s*classDiagram/) !== null && - config?.class?.defaultRenderer === 'dagre-wrapper' - ) { + if (/^\s*classDiagram/.test(txt) && config?.class?.defaultRenderer === 'dagre-wrapper') { return true; } // We have not opted to use the new renderer so we should return true if we detect a class diagram - return txt.match(/^\s*classDiagram-v2/) !== null; + return /^\s*classDiagram-v2/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./classDiagram-v2.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/class/classDetector.ts b/packages/mermaid/src/diagrams/class/classDetector.ts index e2eee9bb3..d814003cb 100644 --- a/packages/mermaid/src/diagrams/class/classDetector.ts +++ b/packages/mermaid/src/diagrams/class/classDetector.ts @@ -1,4 +1,8 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'class'; @@ -8,10 +12,10 @@ const detector: DiagramDetector = (txt, config) => { return false; } // We have not opted to use the new renderer so we should return true if we detect a class diagram - return txt.match(/^\s*classDiagram/) !== null; + return /^\s*classDiagram/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./classDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index 352002242..e0cfea641 100644 --- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts +++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts @@ -1,4 +1,4 @@ -// @ts-ignore d3 types are not available +// @ts-nocheck - don't check until handle it import { select, curveLinear } from 'd3'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import { log } from '../../logger.js'; @@ -353,15 +353,11 @@ export const draw = async function (text: string, id: string, _version: string, } const root = securityLevel === 'sandbox' - ? // @ts-ignore Ignore type error for now - - select(sandboxElement.nodes()[0].contentDocument.body) + ? select(sandboxElement.nodes()[0].contentDocument.body) : select('body'); - // @ts-ignore Ignore type error for now const svg = root.select(`[id="${id}"]`); // Run the renderer. This is what draws the final graph. - // @ts-ignore Ignore type error for now const element = root.select('#' + id + ' g'); await render( element, @@ -377,7 +373,6 @@ export const draw = async function (text: string, id: string, _version: string, // Add label rects for non html labels if (!conf?.htmlLabels) { - // @ts-ignore Ignore type error for now const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); for (const label of labels) { diff --git a/packages/mermaid/src/diagrams/er/erDetector.ts b/packages/mermaid/src/diagrams/er/erDetector.ts index b8a191af2..7da6804e0 100644 --- a/packages/mermaid/src/diagrams/er/erDetector.ts +++ b/packages/mermaid/src/diagrams/er/erDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'er'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*erDiagram/) !== null; + return /^\s*erDiagram/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./erDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/er/erDiagram.ts b/packages/mermaid/src/diagrams/er/erDiagram.ts index da3d777ad..adfa525fc 100644 --- a/packages/mermaid/src/diagrams/er/erDiagram.ts +++ b/packages/mermaid/src/diagrams/er/erDiagram.ts @@ -1,4 +1,4 @@ -// @ts-ignore: TODO Fix ts errors +// @ts-ignore: TODO: Fix ts errors import erParser from './parser/erDiagram.jison'; import erDb from './erDb.js'; import erRenderer from './erRenderer.js'; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts index 482bc961c..6cfcf2619 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts +++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts @@ -1,21 +1,24 @@ -import type { MermaidConfig } from '../../../config.type.js'; -import type { ExternalDiagramDefinition, DiagramDetector } from '../../../diagram-api/types.js'; +import type { + ExternalDiagramDefinition, + DiagramDetector, + DiagramLoader, +} from '../../../diagram-api/types.js'; const id = 'flowchart-elk'; -const detector: DiagramDetector = (txt: string, config?: MermaidConfig): boolean => { +const detector: DiagramDetector = (txt, config): boolean => { if ( // If diagram explicitly states flowchart-elk - txt.match(/^\s*flowchart-elk/) || + /^\s*flowchart-elk/.test(txt) || // If a flowchart/graph diagram has their default renderer set to elk - (txt.match(/^\s*flowchart|graph/) && config?.flowchart?.defaultRenderer === 'elk') + (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk') ) { return true; } return false; }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./flowchart-elk-definition.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 6a90c46f5..5ed06723e 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -717,7 +717,7 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) { const edgePath = edgesEl .insert('path') .attr('d', curve(points)) - .attr('class', 'path') + .attr('class', 'path ' + edgeData.classes) .attr('fill', 'none'); const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel'); const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl)); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index f7e1a38db..ceb933e85 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -208,21 +208,22 @@ export const updateLink = function (positions, style) { }); }; -export const addClass = function (id, style) { - if (classes[id] === undefined) { - classes[id] = { id: id, styles: [], textStyles: [] }; - } +export const addClass = function (ids, style) { + ids.split(',').forEach(function (id) { + if (classes[id] === undefined) { + classes[id] = { id, styles: [], textStyles: [] }; + } - if (style !== undefined && style !== null) { - style.forEach(function (s) { - if (s.match('color')) { - const newStyle1 = s.replace('fill', 'bgFill'); - const newStyle2 = newStyle1.replace('color', 'fill'); - classes[id].textStyles.push(newStyle2); - } - classes[id].styles.push(s); - }); - } + if (style !== undefined && style !== null) { + style.forEach(function (s) { + if (s.match('color')) { + const newStyle = s.replace('fill', 'bgFill').replace('color', 'fill'); + classes[id].textStyles.push(newStyle); + } + classes[id].styles.push(s); + }); + } + }); }; /** diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js index 09f8c8678..6f04ca70a 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.js @@ -41,3 +41,26 @@ describe('flow db subgraphs', () => { }); }); }); + +describe('flow db addClass', () => { + beforeEach(() => { + flowDb.clear(); + }); + it('should detect many classes', () => { + flowDb.addClass('a,b', ['stroke-width: 8px']); + const classes = flowDb.getClasses(); + + expect(classes.hasOwnProperty('a')).toBe(true); + expect(classes.hasOwnProperty('b')).toBe(true); + expect(classes['a']['styles']).toEqual(['stroke-width: 8px']); + expect(classes['b']['styles']).toEqual(['stroke-width: 8px']); + }); + + it('should detect single class', () => { + flowDb.addClass('a', ['stroke-width: 8px']); + const classes = flowDb.getClasses(); + + expect(classes.hasOwnProperty('a')).toBe(true); + expect(classes['a']['styles']).toEqual(['stroke-width: 8px']); + }); +}); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts index 9c00545bf..dda5a67f0 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts @@ -1,4 +1,4 @@ -import type { DiagramDetector } from '../../diagram-api/types.js'; +import type { DiagramDetector, DiagramLoader } from '../../diagram-api/types.js'; import type { ExternalDiagramDefinition } from '../../diagram-api/types.js'; const id = 'flowchart-v2'; @@ -12,13 +12,13 @@ const detector: DiagramDetector = (txt, config) => { } // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram - if (txt.match(/^\s*graph/) !== null && config?.flowchart?.defaultRenderer === 'dagre-wrapper') { + if (/^\s*graph/.test(txt) && config?.flowchart?.defaultRenderer === 'dagre-wrapper') { return true; } - return txt.match(/^\s*flowchart/) !== null; + return /^\s*flowchart/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./flowDiagram-v2.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts index 84aafa249..8859ca883 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts @@ -1,4 +1,8 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'flowchart'; @@ -11,10 +15,10 @@ const detector: DiagramDetector = (txt, config) => { ) { return false; } - return txt.match(/^\s*graph/) !== null; + return /^\s*graph/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./flowDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js index 512a0b833..e05c48627 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js @@ -113,6 +113,22 @@ describe('[Style] when parsing', () => { expect(classes['exClass'].styles[1]).toBe('border:1px solid red'); }); + it('should be possible to declare multiple classes', function () { + const res = flow.parser.parse( + 'graph TD;classDef firstClass,secondClass background:#bbb,border:1px solid red;' + ); + + const classes = flow.parser.yy.getClasses(); + + expect(classes['firstClass'].styles.length).toBe(2); + expect(classes['firstClass'].styles[0]).toBe('background:#bbb'); + expect(classes['firstClass'].styles[1]).toBe('border:1px solid red'); + + expect(classes['secondClass'].styles.length).toBe(2); + expect(classes['secondClass'].styles[0]).toBe('background:#bbb'); + expect(classes['secondClass'].styles[1]).toBe('border:1px solid red'); + }); + it('should be possible to declare a class with a dot in the style', function () { const res = flow.parser.parse( 'graph TD;classDef exClass background:#bbb,border:1.5px solid red;' diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 81ff6d755..396402702 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -1,8 +1,8 @@ import { sanitizeUrl } from '@braintree/sanitize-url'; -import dayjs from 'dayjs/esm/index.js'; -import dayjsIsoWeek from 'dayjs/esm/plugin/isoWeek/index.js'; -import dayjsCustomParseFormat from 'dayjs/esm/plugin/customParseFormat/index.js'; -import dayjsAdvancedFormat from 'dayjs/esm/plugin/advancedFormat/index.js'; +import dayjs from 'dayjs'; +import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js'; +import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js'; +import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js'; import { log } from '../../logger.js'; import * as configApi from '../../config.js'; import utils from '../../utils.js'; diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts index 123b4a52d..416368e8f 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts @@ -1,5 +1,5 @@ // @ts-nocheck TODO: Fix TS -import dayjs from 'dayjs/esm/index.js'; +import dayjs from 'dayjs'; import ganttDb from './ganttDb.js'; import { convert } from '../../tests/util.js'; diff --git a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts index 4a736cb90..e2f2a9784 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts +++ b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'gantt'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*gantt/) !== null; + return /^\s*gantt/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./ganttDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index a148d8a9e..ff16fef7c 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -1,4 +1,4 @@ -import dayjs from 'dayjs/esm/index.js'; +import dayjs from 'dayjs'; import { log } from '../../logger.js'; import { select, diff --git a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts index aeb37e5bc..ded434a65 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts +++ b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts @@ -1,13 +1,13 @@ -import type { DiagramDetector } from '../../diagram-api/types.js'; +import type { DiagramDetector, DiagramLoader } from '../../diagram-api/types.js'; import type { ExternalDiagramDefinition } from '../../diagram-api/types.js'; const id = 'gitGraph'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*gitGraph/) !== null; + return /^\s*gitGraph/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./gitGraphDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/info/info.spec.js b/packages/mermaid/src/diagrams/info/info.spec.js deleted file mode 100644 index 6f1a59d1c..000000000 --- a/packages/mermaid/src/diagrams/info/info.spec.js +++ /dev/null @@ -1,16 +0,0 @@ -import { parser } from './parser/info.jison'; -import infoDb from './infoDb.js'; -describe('when parsing an info graph it', function () { - let ex; - beforeEach(function () { - ex = parser; - ex.yy = infoDb; - }); - - it('should handle an info definition', function () { - let str = `info - showInfo`; - - ex.parse(str); - }); -}); diff --git a/packages/mermaid/src/diagrams/info/info.spec.ts b/packages/mermaid/src/diagrams/info/info.spec.ts new file mode 100644 index 000000000..076f04f69 --- /dev/null +++ b/packages/mermaid/src/diagrams/info/info.spec.ts @@ -0,0 +1,24 @@ +// @ts-ignore - jison doesn't export types +import { parser } from './parser/info.jison'; +import { db } from './infoDb.js'; + +describe('info diagram', () => { + beforeEach(() => { + parser.yy = db; + parser.yy.clear(); + }); + + it('should handle an info definition', () => { + const str = `info`; + parser.parse(str); + + expect(db.getInfo()).toBeFalsy(); + }); + + it('should handle an info definition with showInfo', () => { + const str = `info showInfo`; + parser.parse(str); + + expect(db.getInfo()).toBeTruthy(); + }); +}); diff --git a/packages/mermaid/src/diagrams/info/infoDb.js b/packages/mermaid/src/diagrams/info/infoDb.js deleted file mode 100644 index 81ba8057f..000000000 --- a/packages/mermaid/src/diagrams/info/infoDb.js +++ /dev/null @@ -1,36 +0,0 @@ -/** Created by knut on 15-01-14. */ -import { log } from '../../logger.js'; -import { clear } from '../../commonDb.js'; - -var message = ''; -var info = false; - -export const setMessage = (txt) => { - log.debug('Setting message to: ' + txt); - message = txt; -}; - -export const getMessage = () => { - return message; -}; - -export const setInfo = (inf) => { - info = inf; -}; - -export const getInfo = () => { - return info; -}; - -// export const parseError = (err, hash) => { -// global.mermaidAPI.parseError(err, hash) -// } - -export default { - setMessage, - getMessage, - setInfo, - getInfo, - clear, - // parseError -}; diff --git a/packages/mermaid/src/diagrams/info/infoDb.ts b/packages/mermaid/src/diagrams/info/infoDb.ts new file mode 100644 index 000000000..ff4bfcae0 --- /dev/null +++ b/packages/mermaid/src/diagrams/info/infoDb.ts @@ -0,0 +1,23 @@ +import type { InfoFields, InfoDB } from './infoTypes.js'; + +export const DEFAULT_INFO_DB: InfoFields = { + info: false, +} as const; + +let info: boolean = DEFAULT_INFO_DB.info; + +export const setInfo = (toggle: boolean): void => { + info = toggle; +}; + +export const getInfo = (): boolean => info; + +const clear = (): void => { + info = DEFAULT_INFO_DB.info; +}; + +export const db: InfoDB = { + clear, + setInfo, + getInfo, +}; diff --git a/packages/mermaid/src/diagrams/info/infoDetector.ts b/packages/mermaid/src/diagrams/info/infoDetector.ts index ad9b9163d..04d2677ef 100644 --- a/packages/mermaid/src/diagrams/info/infoDetector.ts +++ b/packages/mermaid/src/diagrams/info/infoDetector.ts @@ -1,20 +1,22 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'info'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*info/) !== null; + return /^\s*info/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./infoDiagram.js'); return { id, diagram }; }; -const plugin: ExternalDiagramDefinition = { +export const info: ExternalDiagramDefinition = { id, detector, loader, }; - -export default plugin; diff --git a/packages/mermaid/src/diagrams/info/infoDiagram.ts b/packages/mermaid/src/diagrams/info/infoDiagram.ts index a26e915e5..b21827b5f 100644 --- a/packages/mermaid/src/diagrams/info/infoDiagram.ts +++ b/packages/mermaid/src/diagrams/info/infoDiagram.ts @@ -1,13 +1,11 @@ -import { DiagramDefinition } from '../../diagram-api/types.js'; -// @ts-ignore: TODO Fix ts errors +import type { DiagramDefinition } from '../../diagram-api/types.js'; +// @ts-ignore - jison doesn't export types import parser from './parser/info.jison'; -import db from './infoDb.js'; -import styles from './styles.js'; -import renderer from './infoRenderer.js'; +import { db } from './infoDb.js'; +import { renderer } from './infoRenderer.js'; export const diagram: DiagramDefinition = { parser, db, renderer, - styles, }; diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.js b/packages/mermaid/src/diagrams/info/infoRenderer.js deleted file mode 100644 index 9441a3226..000000000 --- a/packages/mermaid/src/diagrams/info/infoRenderer.js +++ /dev/null @@ -1,57 +0,0 @@ -/** Created by knut on 14-12-11. */ -import { select } from 'd3'; -import { log } from '../../logger.js'; -import { getConfig } from '../../config.js'; - -/** - * Draws a an info picture in the tag with id: id based on the graph definition in text. - * - * @param {any} text - * @param {any} id - * @param {any} version - */ -export const draw = (text, id, version) => { - try { - // const parser = infoParser.parser; - // parser.yy = db; - log.debug('Rendering info diagram\n' + text); - - const securityLevel = getConfig().securityLevel; - // Handle root and Document for when rendering in sandbox mode - let sandboxElement; - if (securityLevel === 'sandbox') { - sandboxElement = select('#i' + id); - } - const root = - securityLevel === 'sandbox' - ? select(sandboxElement.nodes()[0].contentDocument.body) - : select('body'); - - // Parse the graph definition - // parser.parse(text); - // log.debug('Parsed info diagram'); - // Fetch the default direction, use TD if none was found - const svg = root.select('#' + id); - - const g = svg.append('g'); - - g.append('text') // text label for the x axis - .attr('x', 100) - .attr('y', 40) - .attr('class', 'version') - .attr('font-size', '32px') - .style('text-anchor', 'middle') - .text('v ' + version); - - svg.attr('height', 100); - svg.attr('width', 400); - // svg.attr('viewBox', '0 0 300 150'); - } catch (e) { - log.error('Error while rendering info diagram'); - log.error(e.message); - } -}; - -export default { - draw, -}; diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts new file mode 100644 index 000000000..79f3ec992 --- /dev/null +++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts @@ -0,0 +1,50 @@ +import { select } from 'd3'; +import { log } from '../../logger.js'; +import { getConfig } from '../../config.js'; +import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js'; + +/** + * Draws a an info picture in the tag with id: id based on the graph definition in text. + * + * @param text - The text of the diagram. + * @param id - The id of the diagram which will be used as a DOM element id. + * @param version - MermaidJS version. + */ +const draw: DrawDefinition = (text, id, version) => { + try { + log.debug('rendering info diagram\n' + text); + + const { securityLevel } = getConfig(); + // handle root and document for when rendering in sandbox mode + let sandboxElement: HTML | undefined; + let document: Document | null | undefined; + if (securityLevel === 'sandbox') { + sandboxElement = select('#i' + id); + document = sandboxElement.nodes()[0].contentDocument; + } + + // @ts-ignore - figure out how to assign HTML to document type + const root: HTML = + sandboxElement !== undefined && document !== undefined && document !== null + ? select(document) + : select('body'); + + const svg: SVG = root.select('#' + id); + svg.attr('height', 100); + svg.attr('width', 400); + + const g = svg.append('g'); + + g.append('text') // text label for the x axis + .attr('x', 100) + .attr('y', 40) + .attr('class', 'version') + .attr('font-size', '32px') + .style('text-anchor', 'middle') + .text('v ' + version); + } catch (e) { + log.error('error while rendering info diagram', e); + } +}; + +export const renderer = { draw }; diff --git a/packages/mermaid/src/diagrams/info/infoTypes.ts b/packages/mermaid/src/diagrams/info/infoTypes.ts new file mode 100644 index 000000000..239f8fdda --- /dev/null +++ b/packages/mermaid/src/diagrams/info/infoTypes.ts @@ -0,0 +1,11 @@ +import type { DiagramDB } from '../../diagram-api/types.js'; + +export interface InfoFields { + info: boolean; +} + +export interface InfoDB extends DiagramDB { + clear: () => void; + setInfo: (info: boolean) => void; + getInfo: () => boolean; +} diff --git a/packages/mermaid/src/diagrams/info/styles.js b/packages/mermaid/src/diagrams/info/styles.js deleted file mode 100644 index 0b0729813..000000000 --- a/packages/mermaid/src/diagrams/info/styles.js +++ /dev/null @@ -1,3 +0,0 @@ -const getStyles = () => ``; - -export default getStyles; diff --git a/packages/mermaid/src/diagrams/mindmap/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts index 95e16dea9..2b31fc5e8 100644 --- a/packages/mermaid/src/diagrams/mindmap/detector.ts +++ b/packages/mermaid/src/diagrams/mindmap/detector.ts @@ -1,11 +1,15 @@ -import type { ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'mindmap'; -const detector = (txt: string) => { - return txt.match(/^\s*mindmap/) !== null; +const detector: DiagramDetector = (txt) => { + return /^\s*mindmap/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./mindmap-definition.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts index 34d3c0cf6..93eded52c 100644 --- a/packages/mermaid/src/diagrams/pie/pieDetector.ts +++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'pie'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*pie/) !== null; + return /^\s*pie/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./pieDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDetector.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDetector.ts index 06d02356b..9a77ca43a 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDetector.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'quadrantChart'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*quadrantChart/) !== null; + return /^\s*quadrantChart/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./quadrantDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts index 46d3f773b..92943337a 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantRenderer.ts @@ -1,4 +1,4 @@ -// @ts-ignore: TODO Fix ts errors +// @ts-nocheck - don't check until handle it import { select } from 'd3'; import * as configApi from '../../config.js'; import { log } from '../../logger.js'; diff --git a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts index 87fcea790..f8fd33640 100644 --- a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts +++ b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'requirement'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*requirement(Diagram)?/) !== null; + return /^\s*requirement(Diagram)?/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./requirementDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts index a808feea2..c1df22130 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'sequence'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*sequenceDiagram/) !== null; + return /^\s*sequenceDiagram/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./sequenceDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index baa43e3aa..2f0cf2000 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -1,7 +1,7 @@ import common, { calculateMathMLDimensions, hasKatex, renderKatex } from '../common/common.js'; import * as svgDrawCommon from '../common/svgDrawCommon'; import { addFunction } from '../../interactionDb.js'; -import { parseFontSize } from '../../utils.js'; +import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js'; import { sanitizeUrl } from '@braintree/sanitize-url'; import * as configApi from '../../config.js'; @@ -266,15 +266,16 @@ export const drawText = function (elem, textData) { textElem.attr('dy', dy); } + const text = line || ZERO_WIDTH_SPACE; if (textData.tspan) { const span = textElem.append('tspan'); span.attr('x', textData.x); if (textData.fill !== undefined) { span.attr('fill', textData.fill); } - span.text(line); + span.text(text); } else { - textElem.text(line); + textElem.text(text); } if ( textData.valign !== undefined && diff --git a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts index 8a96e93a2..5201f3fae 100644 --- a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts +++ b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts @@ -1,21 +1,22 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'stateDiagram'; -const detector: DiagramDetector = (text, config) => { - if (text.match(/^\s*stateDiagram-v2/) !== null) { +const detector: DiagramDetector = (txt, config) => { + if (/^\s*stateDiagram-v2/.test(txt)) { return true; } - if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper') { - return true; - } - if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper') { + if (/^\s*stateDiagram/.test(txt) && config?.state?.defaultRenderer === 'dagre-wrapper') { return true; } return false; }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./stateDiagram-v2.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/state/stateDetector.ts b/packages/mermaid/src/diagrams/state/stateDetector.ts index eb252305c..5903d06cf 100644 --- a/packages/mermaid/src/diagrams/state/stateDetector.ts +++ b/packages/mermaid/src/diagrams/state/stateDetector.ts @@ -1,4 +1,8 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'state'; @@ -8,10 +12,10 @@ const detector: DiagramDetector = (txt, config) => { if (config?.state?.defaultRenderer === 'dagre-wrapper') { return false; } - return txt.match(/^\s*stateDiagram/) !== null; + return /^\s*stateDiagram/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./stateDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/timeline/detector.ts b/packages/mermaid/src/diagrams/timeline/detector.ts index 57d8f66ad..a6394bd54 100644 --- a/packages/mermaid/src/diagrams/timeline/detector.ts +++ b/packages/mermaid/src/diagrams/timeline/detector.ts @@ -1,12 +1,16 @@ -import type { ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'timeline'; -const detector = (txt: string) => { - return txt.match(/^\s*timeline/) !== null; +const detector: DiagramDetector = (txt) => { + return /^\s*timeline/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./timeline-definition.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts index 65abe8fd9..17460bac2 100644 --- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts +++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts @@ -1,4 +1,4 @@ -// @ts-ignore - db not typed yet +// @ts-nocheck - don't check until handle it import { select, Selection } from 'd3'; import svgDraw from './svgDraw.js'; import { log } from '../../logger.js'; @@ -46,11 +46,9 @@ export const draw = function (text: string, id: string, version: string, diagObj } const root = securityLevel === 'sandbox' - ? // @ts-ignore d3 types are wrong - select(sandboxElement.nodes()[0].contentDocument.body) + ? select(sandboxElement.nodes()[0].contentDocument.body) : select('body'); - // @ts-ignore d3 types are wrong const svg = root.select('#' + id); svg.append('g'); diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts index 0dd488782..cb1d1837f 100644 --- a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts +++ b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts @@ -1,12 +1,16 @@ -import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js'; +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; const id = 'journey'; const detector: DiagramDetector = (txt) => { - return txt.match(/^\s*journey/) !== null; + return /^\s*journey/.test(txt); }; -const loader = async () => { +const loader: DiagramLoader = async () => { const { diagram } = await import('./journeyDiagram.js'); return { id, diagram }; }; diff --git a/packages/mermaid/src/docs/.vitepress/components/Contributors.vue b/packages/mermaid/src/docs/.vitepress/components/Contributors.vue index 37b7b9133..94e918027 100644 --- a/packages/mermaid/src/docs/.vitepress/components/Contributors.vue +++ b/packages/mermaid/src/docs/.vitepress/components/Contributors.vue @@ -5,12 +5,12 @@ import { contributors } from '../contributors';