diff --git a/.build/common.ts b/.build/common.ts index 86ccd15d1..efd0e3a85 100644 --- a/.build/common.ts +++ b/.build/common.ts @@ -33,4 +33,9 @@ export const packageOptions = { packageName: 'mermaid-layout-elk', file: 'layouts.ts', }, + examples: { + name: 'mermaid-examples', + packageName: 'examples', + file: 'index.ts', + }, } as const satisfies Record; diff --git a/.build/types.ts b/.build/types.ts index 9dec05a68..1d439d87c 100644 --- a/.build/types.ts +++ b/.build/types.ts @@ -10,13 +10,16 @@ const buildType = (packageName: string) => { console.log(out.toString()); } } catch (e) { - console.error(e); if (e.stdout.length > 0) { console.error(e.stdout.toString()); } if (e.stderr.length > 0) { console.error(e.stderr.toString()); } + // Exit the build process if we are in CI + if (process.env.CI) { + throw new Error(`Failed to build types for ${packageName}`); + } } }; diff --git a/.changeset/add-vert-tag-bar-chart.md b/.changeset/add-vert-tag-bar-chart.md deleted file mode 100644 index 4ab74059c..000000000 --- a/.changeset/add-vert-tag-bar-chart.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': minor ---- - -feat: Add Vertical Line To Gantt Plot At Specified Time diff --git a/.changeset/beige-peas-shave.md b/.changeset/beige-peas-shave.md new file mode 100644 index 000000000..c405f3dcc --- /dev/null +++ b/.changeset/beige-peas-shave.md @@ -0,0 +1,5 @@ +--- +'@mermaid-js/mermaid-zenuml': patch +--- + +Fixed a critical bug that the ZenUML diagram is not rendered. diff --git a/.changeset/bitter-colts-remain.md b/.changeset/bitter-colts-remain.md deleted file mode 100644 index 9952779c9..000000000 --- a/.changeset/bitter-colts-remain.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@mermaid-js/mermaid-zenuml': major ---- - -Upgraded the dependency @zenuml/core diff --git a/.changeset/curly-coats-tell.md b/.changeset/curly-coats-tell.md deleted file mode 100644 index 65672267c..000000000 --- a/.changeset/curly-coats-tell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -Fix stroke styles for ER diagram to correctly apply path and row-specific styles diff --git a/.changeset/eleven-wolves-deny.md b/.changeset/eleven-wolves-deny.md deleted file mode 100644 index 76bb69ec5..000000000 --- a/.changeset/eleven-wolves-deny.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -chore: Convert StateDB into TypeScript diff --git a/.changeset/gold-shoes-camp.md b/.changeset/gold-shoes-camp.md deleted file mode 100644 index 3018e7381..000000000 --- a/.changeset/gold-shoes-camp.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams diff --git a/.changeset/honest-trees-dress.md b/.changeset/honest-trees-dress.md deleted file mode 100644 index 054f1bedb..000000000 --- a/.changeset/honest-trees-dress.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@mermaid-js/mermaid-zenuml': patch ---- - -chore: bump minimum ZenUML version to 3.23.28 - -commit: 9d06d8f31e7f12af9e9e092214f907f2dc93ad75 diff --git a/.changeset/lemon-masks-unite.md b/.changeset/lemon-masks-unite.md new file mode 100644 index 000000000..306ff1cce --- /dev/null +++ b/.changeset/lemon-masks-unite.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat: Added support for per link curve styling in flowchart diagram using edge ids diff --git a/.changeset/lovely-queens-own.md b/.changeset/lovely-queens-own.md new file mode 100644 index 000000000..edc8dda2d --- /dev/null +++ b/.changeset/lovely-queens-own.md @@ -0,0 +1,8 @@ +--- +'mermaid': patch +--- + +fix(block): overflowing blocks no longer affect later lines + +This may change the layout of block diagrams that have overflowing lines +(i.e. block diagrams that use up more columns that the `columns` specifier). diff --git a/.changeset/neat-moose-compare.md b/.changeset/neat-moose-compare.md deleted file mode 100644 index 98a064789..000000000 --- a/.changeset/neat-moose-compare.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': minor ---- - -feat: Add support for styling Journey Diagram title (color, font-family, and font-size) diff --git a/.changeset/ninety-roses-turn.md b/.changeset/ninety-roses-turn.md new file mode 100644 index 000000000..a69a6e7a0 --- /dev/null +++ b/.changeset/ninety-roses-turn.md @@ -0,0 +1,7 @@ +--- +'mermaid': patch +--- + +fix: log warning for blocks exceeding column width + +This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout. diff --git a/.changeset/proud-seahorses-wash.md b/.changeset/proud-seahorses-wash.md deleted file mode 100644 index 8b844b679..000000000 --- a/.changeset/proud-seahorses-wash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`. diff --git a/.changeset/public-things-stare.md b/.changeset/public-things-stare.md deleted file mode 100644 index f6dc515ee..000000000 --- a/.changeset/public-things-stare.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': minor ---- - -Added support for the click directive in stateDiagram syntax diff --git a/.changeset/quiet-hotels-shine.md b/.changeset/quiet-hotels-shine.md deleted file mode 100644 index d9b6cb39e..000000000 --- a/.changeset/quiet-hotels-shine.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'mermaid': minor -'@mermaid-js/parser': minor ---- - -feat: Add shorter `+: Label` syntax in packet diagram diff --git a/.changeset/sad-mails-accept.md b/.changeset/sad-mails-accept.md deleted file mode 100644 index 11dd69d8d..000000000 --- a/.changeset/sad-mails-accept.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'mermaid': patch -'@mermaid-js/parser': patch ---- - -Refactor grammar so that title don't break Architecture Diagrams diff --git a/.changeset/sixty-deer-tell.md b/.changeset/sixty-deer-tell.md deleted file mode 100644 index fd48d2aea..000000000 --- a/.changeset/sixty-deer-tell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': major ---- - -fix: allow sequence diagram arrows with a trailing colon but no message diff --git a/.changeset/soft-readers-tan.md b/.changeset/soft-readers-tan.md deleted file mode 100644 index ec3fa97af..000000000 --- a/.changeset/soft-readers-tan.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': minor ---- - -feat: Dynamically Render Data Labels Within Bar Charts diff --git a/.changeset/ten-lamps-trade.md b/.changeset/ten-lamps-trade.md deleted file mode 100644 index 991a70daf..000000000 --- a/.changeset/ten-lamps-trade.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: allow colons in events diff --git a/.changeset/yellow-mirrors-change.md b/.changeset/yellow-mirrors-change.md deleted file mode 100644 index 09a766104..000000000 --- a/.changeset/yellow-mirrors-change.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@mermaid-js/mermaid-zenuml': patch ---- - -fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11 - -commit: 0ad44c12feead9d20c6a870a49327ada58d6e657 diff --git a/.changeset/yellow-walls-fry.md b/.changeset/yellow-walls-fry.md deleted file mode 100644 index 75349fd19..000000000 --- a/.changeset/yellow-walls-fry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped. diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt index 285b66365..8b549f888 100644 --- a/.cspell/code-terms.txt +++ b/.cspell/code-terms.txt @@ -47,6 +47,7 @@ edgesep EMPTYSTR enddate ERDIAGRAM +eslint flatmap forwardable frontmatter @@ -87,6 +88,7 @@ NODIR NSTR outdir Qcontrolx +QSTR reinit rels reqs diff --git a/.cspell/contributors.txt b/.cspell/contributors.txt index b7f52f8d0..80f4df22a 100644 --- a/.cspell/contributors.txt +++ b/.cspell/contributors.txt @@ -2,8 +2,10 @@ Ashish Jain cpettitt Dong Cai +knsv +Knut Sveidqvist Nikolay Rozhkov Peng Xiao Per Brolin +Sidharth Vinod subhash-halder -Vinod Sidharth diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt index cb6db41de..b0cfa0a1d 100644 --- a/.cspell/mermaid-terms.txt +++ b/.cspell/mermaid-terms.txt @@ -13,11 +13,10 @@ gitgraph gzipped handDrawn kanban -knsv -Knut marginx marginy Markdownish +mermaidchart mermaidjs mindmap mindmaps @@ -35,7 +34,6 @@ sandboxed siebling statediagram substate -Sveidqvist unfixable Viewbox viewports diff --git a/.esbuild/build.ts b/.esbuild/build.ts index 6bf5f6017..72c0af869 100644 --- a/.esbuild/build.ts +++ b/.esbuild/build.ts @@ -1,5 +1,5 @@ import { build } from 'esbuild'; -import { mkdir, readFile, rename, writeFile } from 'node:fs/promises'; +import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises'; import { packageOptions } from '../.build/common.js'; import { generateLangium } from '../.build/generateLangium.js'; import type { MermaidBuildOptions } from './util.js'; @@ -90,6 +90,7 @@ const buildTinyMermaid = async () => { tinyPkg.version = mermaidPkg.version; await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n'); + await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md'); }; const main = async () => { diff --git a/.github/lychee.toml b/.github/lychee.toml index b4e8ba0fb..fbe7a71a2 100644 --- a/.github/lychee.toml +++ b/.github/lychee.toml @@ -46,13 +46,20 @@ exclude = [ # Drupal 403 "https://(www.)?drupal.org", +# Phbpp 403 +"https://(www.)?phpbb.com", + # Swimm returns 404, even though the link is valid "https://docs.swimm.io", +# Certificate Error +"https://noteshub.app", + # Timeout "https://huehive.co", "https://foswiki.org", "https://www.gnu.org", +"https://mermaid-preview.com" ] # Exclude all private IPs from checking. diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml index 5b1066661..4d2d43408 100644 --- a/.github/workflows/autofix.yml +++ b/.github/workflows/autofix.yml @@ -42,4 +42,4 @@ jobs: working-directory: ./packages/mermaid run: pnpm run docs:build - - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main + - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main diff --git a/.github/workflows/e2e-timings.yml b/.github/workflows/e2e-timings.yml index 00e733c48..5040bb8e4 100644 --- a/.github/workflows/e2e-timings.yml +++ b/.github/workflows/e2e-timings.yml @@ -58,7 +58,7 @@ jobs: echo "EOF" >> $GITHUB_OUTPUT - name: Commit and create pull request - uses: peter-evans/create-pull-request@889dce9eaba7900ce30494f5e1ac7220b27e5c81 + uses: peter-evans/create-pull-request@2e50522bdf313efe32e5628afead9048374012ed with: add-paths: | cypress/timings.json diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index 44860845f..1d1ed30d6 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -29,3 +29,29 @@ jobs: disable-releaser: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: Add "Sponsored by MermaidChart" label + uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + const prNumber = context.payload.pull_request.number; + const { data: commits } = await github.rest.pulls.listCommits({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: prNumber, + }); + + const isSponsored = commits.every( + (c) => c.commit.author.email?.endsWith('@mermaidchart.com') + ); + + if (isSponsored) { + console.log('PR is sponsored. Adding label.'); + await github.rest.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: prNumber, + labels: ['Sponsored by MermaidChart'], + }); + } diff --git a/.github/workflows/validate-lockfile.yml b/.github/workflows/validate-lockfile.yml new file mode 100644 index 000000000..6eb0a63ca --- /dev/null +++ b/.github/workflows/validate-lockfile.yml @@ -0,0 +1,70 @@ +name: Validate pnpm-lock.yaml + +on: + pull_request: + paths: + - 'pnpm-lock.yaml' + - '**/package.json' + - '.github/workflows/validate-lockfile.yml' + +jobs: + validate-lockfile: + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + + - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0 + + - name: Validate pnpm-lock.yaml entries + id: validate # give this step an ID so we can reference its outputs + run: | + issues=() + + # 1) No tarball references + if grep -qF 'tarball:' pnpm-lock.yaml; then + issues+=("• Tarball references found (forbidden)") + fi + + # 2) No unwanted vitepress paths + if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then + issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.") + fi + + # 3) Lockfile only changes when package.json changes + git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt + if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then + issues+=("• pnpm-lock.yaml changed without any package.json modification") + fi + + # If any issues, output them and fail + if [ ${#issues[@]} -gt 0 ]; then + # Use the new GITHUB_OUTPUT approach to set a multiline output + { + echo "errors<> $GITHUB_OUTPUT + exit 1 + fi + + - name: Comment on PR if validation failed + if: failure() + uses: peter-evans/create-or-update-comment@v4 + with: + token: ${{ secrets.GITHUB_TOKEN }} + issue-number: ${{ github.event.pull_request.number }} + body: | + The following issue(s) were detected: + ${{ steps.validate.outputs.errors }} + + Please address these and push an update. + + _Posted automatically by GitHub Actions_ diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 8a4c0a414..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,1005 +0,0 @@ -# Changelog - -## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0) - -### Mermaid is ESM only! - -We've dropped CJS support. So, you will have to update your import scripts as follows. - -```html - -``` - -You can keep using v9 by adding the `@9` in the CDN URL. - -```diff -- -+ -``` - -### mermaid.render is async and doesn't accept callbacks - -```js -// < v10 -mermaid.render('id', 'graph TD;\nA-->B', (svg, bindFunctions) => { - element.innerHTML = svg; - if (bindFunctions) { - bindFunctions(element); - } -}); - -// Shorter syntax -if (bindFunctions) { - bindFunctions(element); -} -// can be replaced with the `?.` shorthand -bindFunctions?.(element); - -// >= v10 with async/await -const { svg, bindFunctions } = await mermaid.render('id', 'graph TD;\nA-->B'); -element.innerHTML = svg; -bindFunctions?.(element); - -// >= v10 with promise.then -mermaid.render('id', 'graph TD;A-->B').then(({ svg, bindFunctions }) => { - element.innerHTML = svg; - bindFunctions?.(element); -}); -``` - -### mermaid.parse is async and ParseError is removed - -```js -// < v10 -mermaid.parse(text, parseError); - -//>= v10 -await mermaid.parse(text).catch(parseError); -// or -try { - await mermaid.parse(text); -} catch (err) { - parseError(err); -} -``` - -### Init deprecated and InitThrowsErrors removed - -The config passed to `init` was not being used earlier. -It will now be used. -The `init` function is deprecated and will be removed in the next major release. -init currently works as a wrapper to `initialize` and `run`. - -```js -// < v10 -mermaid.init(config, selector, cb); - -//>= v10 -mermaid.initialize(config); -mermaid.run({ - querySelector: selector, - postRenderCallback: cb, - suppressErrors: true, -}); -``` - -```js -// < v10 -mermaid.initThrowsErrors(config, selector, cb); - -//>= v10 -mermaid.initialize(config); -mermaid.run({ - querySelector: selector, - postRenderCallback: cb, - suppressErrors: false, -}); -``` - -// TODO: Populate changelog pre v10 - -- Config has a lot of changes -- globalReset resets to `defaultConfig` instead of current config. Use `reset` instead. - -## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD) - -[Full Changelog](https://github.com/knsv/mermaid/compare/8.2.0...HEAD) - -**Closed issues:** - -- Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847) - -## [8.2.0](https://github.com/knsv/mermaid/tree/8.2.0) (2019-07-17) - -[Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...8.2.0) - -**Closed issues:** - -- Create issue templates [\#871](https://github.com/knsv/mermaid/issues/871) -- cross site scripting in mermaid [\#869](https://github.com/knsv/mermaid/issues/869) -- Make Gantt chart date inclusive [\#868](https://github.com/knsv/mermaid/issues/868) -- CHANGELOG missing updates for all versions since 0.4.0 [\#865](https://github.com/knsv/mermaid/issues/865) -- 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) -- found 1 high severity vulnerability [\#839](https://github.com/knsv/mermaid/issues/839) -- Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830) -- Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829) -- Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826) -- typora [\#823](https://github.com/knsv/mermaid/issues/823) -- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815) -- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814) -- How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813) -- How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812) -- no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809) -- uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807) -- Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806) -- how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805) -- UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801) -- Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799) -- fixing class diagram [\#794](https://github.com/knsv/mermaid/issues/794) -- Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782) -- MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781) -- Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766) -- Is there any way to convert flowchart.js code to mermaid code [\#726](https://github.com/knsv/mermaid/issues/726) -- Fixed width of nodes [\#653](https://github.com/knsv/mermaid/issues/653) -- Inline comment [\#650](https://github.com/knsv/mermaid/issues/650) -- alt attribute of img tag in HTML [\#619](https://github.com/knsv/mermaid/issues/619) -- Just wanted to say : THANKS ! [\#618](https://github.com/knsv/mermaid/issues/618) -- "animation" [\#446](https://github.com/knsv/mermaid/issues/446) - -**Merged pull requests:** - -- Trimming whitespace after participant id [\#882](https://github.com/knsv/mermaid/pull/882) ([IOrlandoni](https://github.com/IOrlandoni)) -- chore\(deps\): bump atob from 2.0.3 to 2.1.2 [\#881](https://github.com/knsv/mermaid/pull/881) ([dependabot[bot]](https://github.com/apps/dependabot)) -- chore\(deps\): bump fstream from 1.0.11 to 1.0.12 [\#880](https://github.com/knsv/mermaid/pull/880) ([dependabot[bot]](https://github.com/apps/dependabot)) -- chore\(deps\): bump js-yaml from 3.12.0 to 3.13.1 [\#879](https://github.com/knsv/mermaid/pull/879) ([dependabot[bot]](https://github.com/apps/dependabot)) -- I847 cross site scripting [\#878](https://github.com/knsv/mermaid/pull/878) ([knsv](https://github.com/knsv)) -- Bump lodash.mergewith from 4.6.1 to 4.6.2 [\#877](https://github.com/knsv/mermaid/pull/877) ([dependabot[bot]](https://github.com/apps/dependabot)) -- Adding docs into core repo again [\#876](https://github.com/knsv/mermaid/pull/876) ([knsv](https://github.com/knsv)) -- Bump lodash from 4.17.11 to 4.17.13 [\#875](https://github.com/knsv/mermaid/pull/875) ([dependabot[bot]](https://github.com/apps/dependabot)) -- feat\(stale.yml\): update issue label and bot comment [\#874](https://github.com/knsv/mermaid/pull/874) ([ThePenguin1140](https://github.com/ThePenguin1140)) -- Feature/allow inclusive enddates [\#872](https://github.com/knsv/mermaid/pull/872) ([ThePenguin1140](https://github.com/ThePenguin1140)) -- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf)) - -## [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) - -**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 can't 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 doesnt 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 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) -- Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414) -- 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) -- mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328) -- 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) -- Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301) -- 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) -- node click is not effective [\#272](https://github.com/knsv/mermaid/issues/272) -- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271) -- \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269) -- Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268) -- 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 installion [\#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) -- Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169) -- Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50) -- Graphviz DOT syntax [\#5](https://github.com/knsv/mermaid/issues/5) - -**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)) -- Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj)) -- 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)) -- Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland)) -- 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:** - -- 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) - -**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) -- 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) -- 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)) -- adde 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 https://github.com/raghur/mermaid-filter 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 flowchat? [\#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) - -**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) -- Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202) -- Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144) - -**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) - -**Closed issues:** - -- Weird bug in live editor when using words with substring `end` [\#184](https://github.com/knsv/mermaid/issues/184) -- Custom icons [\#15](https://github.com/knsv/mermaid/issues/15) -- 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) -- Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220) -- 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) -- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159) -- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141) -- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124) -- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123) -- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49) - -**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) - -**Closed issues:** - -- Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218) -- Render mermaid code on websites? [\#215](https://github.com/knsv/mermaid/issues/215) -- Brackets in a node with text? [\#213](https://github.com/knsv/mermaid/issues/213) -- 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 with 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) -- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154) -- Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153) -- Support PlantUML syntax [\#149](https://github.com/knsv/mermaid/issues/149) -- 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) -- Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34) - -**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) - -**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) -- To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146) -- `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133) -- Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129) -- flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128) -- 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) -- Mix horizontal and vertical graph [\#68](https://github.com/knsv/mermaid/issues/68) -- How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64) -- 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) - -**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) - -**Closed issues:** - -- it can not work where graph TD contains chinese character [\#166](https://github.com/knsv/mermaid/issues/166) -- Broken Examples [\#163](https://github.com/knsv/mermaid/issues/163) -- 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 a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122) -- 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) -- 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) - -**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) - -**Closed issues:** - -- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121) -- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110) -- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99) -- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82) -- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23) -- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3) - -## [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) - -**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) -- 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) -- Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40) -- Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2) - -**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) - -**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) -- Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26) - -**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) - -**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) -- Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53) - -**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) - -**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) -- Neural Networks [\#39](https://github.com/knsv/mermaid/issues/39) -- Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16) -- Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6) - -**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) - -**Closed issues:** - -- Consider shipping a standalone executable [\#65](https://github.com/knsv/mermaid/issues/65) -- Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55) -- How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47) -- This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46) -- tutorial for creating new type of graph/layout [\#44](https://github.com/knsv/mermaid/issues/44) -- Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38) -- 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) - -**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) -- Create image file via CLI? [\#48](https://github.com/knsv/mermaid/issues/48) -- 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) -- Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19) - -**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 readablity 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) - -**Closed issues:** - -- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30) -- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25) -- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21) -- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18) -- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8) - -**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) - -**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) -- Container support [\#27](https://github.com/knsv/mermaid/issues/27) -- can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20) -- Node Label text mistaken for Direction [\#17](https://github.com/knsv/mermaid/issues/17) -- Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9) -- Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7) - -## [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) - -\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/GitHub-Changelog-Generator)_ diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 120000 index 000000000..c68d3f76d --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1 @@ +./packages/mermaid/CHANGELOG.md \ No newline at end of file diff --git a/README.md b/README.md index 760ce0f25..3f26a75f2 100644 --- a/README.md +++ b/README.md @@ -95,10 +95,6 @@ In our release process we rely heavily on visual regression tests using [applito -## Mermaid AI Bot - -[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more. - ## Examples **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).** diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts deleted file mode 100644 index 97bd01665..000000000 --- a/__mocks__/d3.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js'; - -export const select = function () { - return new MockedD3(); -}; - -export const selectAll = function () { - return new MockedD3(); -}; - -export const curveBasis = 'basis'; -export const curveLinear = 'linear'; -export const curveCardinal = 'cardinal'; diff --git a/cypress.config.ts b/cypress.config.ts index 50ea940e9..cc176b330 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -26,7 +26,10 @@ export default eyesPlugin( config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true'; if (config.env.useArgos) { - registerArgosTask(on, config); + registerArgosTask(on, config, { + // Enable upload to Argos only when it runs on CI. + uploadToArgos: !!process.env.CI, + }); } else { addMatchImageSnapshotPlugin(on, config); } diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js index 589a30fde..f01d59375 100644 --- a/cypress/integration/rendering/block.spec.js +++ b/cypress/integration/rendering/block.spec.js @@ -384,4 +384,17 @@ describe('Block diagram', () => { {} ); }); + + it('BL30: block should overflow if too wide for columns', () => { + imgSnapshotTest( + `block-beta + columns 2 + fit:2 + overflow:3 + short:1 + also_overflow:2 +`, + {} + ); + }); }); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 97fc1ecbd..9ad2b5604 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1113,4 +1113,24 @@ end ); }); }); + + it('6617: Per Link Curve Styling using edge Ids', () => { + imgSnapshotTest( + `flowchart TD + A e1@-->B e5@--> E + E e7@--> D + B e3@-->D + A e2@-->C e4@-->D + C e6@--> F + F e8@--> D + e1@{ curve: natural } + e2@{ curve: stepAfter } + e3@{ curve: monotoneY } + e4@{ curve: bumpY } + e5@{ curve: linear } + e6@{ curve: catmullRom } + e7@{ curve: cardinal } + ` + ); + }); }); diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts index c64538875..2a32b9d07 100644 --- a/cypress/integration/rendering/packet.spec.ts +++ b/cypress/integration/rendering/packet.spec.ts @@ -1,7 +1,7 @@ import { imgSnapshotTest } from '../../helpers/util'; describe('packet structure', () => { - it('should render a simple packet diagram', () => { + it('should render a simple packet-beta diagram', () => { imgSnapshotTest( `packet-beta title Hello world @@ -10,9 +10,18 @@ describe('packet structure', () => { ); }); + it('should render a simple packet diagram', () => { + imgSnapshotTest( + `packet + title Hello world + 0-10: "hello" +` + ); + }); + it('should render a simple packet diagram without ranges', () => { imgSnapshotTest( - `packet-beta + `packet 0: "h" 1: "i" ` @@ -21,7 +30,7 @@ describe('packet structure', () => { it('should render a complex packet diagram', () => { imgSnapshotTest( - `packet-beta + `packet 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" @@ -52,7 +61,7 @@ describe('packet structure', () => { packet: showBits: false --- - packet-beta + packet 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts index dc6fab364..3785f5fcc 100644 --- a/cypress/integration/rendering/timeline.spec.ts +++ b/cypress/integration/rendering/timeline.spec.ts @@ -161,4 +161,68 @@ describe('Timeline diagram', () => { {} ); }); + + it('11: should render timeline with many stacked events and proper timeline line length', () => { + imgSnapshotTest( + `timeline + title Medical Device Lifecycle + section Pre-Development + Quality Management System : Regulatory Compliance : Risk Management + section Development + Management Responsibility : Planning Activities : Human Resources + Resource Management : Management Reviews : Infrastructure + section Post-Development + Product Realization Activities : Planning Activities : Customer-related Processes + Post-Production Activities : Feedback : Complaints : Adverse Events + : Research and Development : Purchasing Activities + : Production Activities : Installation Activities + : Servicing Activities : Post-Market Surveillance + `, + {} + ); + }); + + it('12: should render timeline with proper vertical line lengths for all columns', () => { + imgSnapshotTest( + `--- +config: + theme: base + themeVariables: + fontFamily: Fira Sans + fontSize: 17px + cScale0: '#b3cde0' + cScale1: '#f49090' + cScale2: '#85d5b8' +--- + +timeline + title Medical Device Lifecycle + section Planning + Quality Management System (4): Regulatory Compliance (4.1.1) + : Risk Management (4.1.2) + Management Resposibility (5): Planning Activities (5.4) + : Management Reviews (5.6) + Resource Management (6): Human Resources (6.2) + : Infrastructure (6.3) + section Realization + Research and Development (7.3): RnD Planning (7.3.2) + : Inputs (7.3.3) + : Outputs (7.3.4) + : Review (7.3.5) + : Verification (7.3.6) + : Validation (7.3.7) + Purchasing (7.4): Purchasing Process (7.4.1) + : Purchasing Information (7.4.2) + Production (7.5): Production Activities (7.5.1) + : Production Feedback (8.2.1) + Installation (7.5.3): Installation Activities (7.5.3) + Servicing (7.5.4): Servicing Activities (7.5.4) + section Post-Production + Post-Market Activities (8): Feedback (8.2.1) + : Complaints (8.2.2) + : Adverse Events (8.2.3) + `, + {} + ); + }); }); diff --git a/cypress/integration/rendering/treemap.spec.ts b/cypress/integration/rendering/treemap.spec.ts new file mode 100644 index 000000000..92fcb5808 --- /dev/null +++ b/cypress/integration/rendering/treemap.spec.ts @@ -0,0 +1,382 @@ +import { imgSnapshotTest } from '../../helpers/util.ts'; + +describe('Treemap Diagram', () => { + it('1: should render a basic treemap', () => { + imgSnapshotTest( + `treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 + `, + {} + ); + }); + + it('2: should render a hierarchical treemap', () => { + imgSnapshotTest( + `treemap-beta +"Products" + "Electronics" + "Phones": 50 + "Computers": 30 + "Accessories": 20 + "Clothing" + "Men's" + "Shirts": 10 + "Pants": 15 + "Women's" + "Dresses": 20 + "Skirts": 10 + `, + {} + ); + }); + + it('3: should render a treemap with styling using classDef', () => { + imgSnapshotTest( + `treemap-beta +"Section 1" + "Leaf 1.1": 12 + "Section 1.2":::class1 + "Leaf 1.2.1": 12 +"Section 2" + "Leaf 2.1": 20:::class1 + "Leaf 2.2": 25 + "Leaf 2.3": 12 + +classDef class1 fill:red,color:blue,stroke:#FFD600; + `, + {} + ); + }); + + it('4: should handle long text that wraps', () => { + imgSnapshotTest( + `treemap-beta +"Main Category" + "This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50 + "Short item": 20 + `, + {} + ); + }); + + it('5: should render with a forest theme', () => { + imgSnapshotTest( + `--- +config: + theme: forest +--- +treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 + `, + {} + ); + }); + + it('6: should handle multiple levels of nesting', () => { + imgSnapshotTest( + `treemap-beta +"Level 1" + "Level 2A" + "Level 3A": 10 + "Level 3B": 15 + "Level 2B" + "Level 3C": 20 + "Level 3D" + "Level 4A": 5 + "Level 4B": 5 + `, + {} + ); + }); + + it('7: should handle classDef with multiple styles', () => { + imgSnapshotTest( + `treemap-beta +"Main" + "A": 20 + "B":::important + "B1": 10 + "B2": 15 + "C": 5:::secondary + +classDef important fill:#f96,stroke:#333,stroke-width:2px; +classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5; + `, + {} + ); + }); + + it('8: should handle dollar value formatting with thousands separator', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: "$0,0" +--- +treemap +"Budget" + "Operations" + "Salaries": 700000 + "Equipment": 200000 + "Supplies": 100000 + "Marketing" + "Advertising": 400000 + "Events": 100000 + `, + {} + ); + }); + + it('8a: should handle percentage formatting', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: ".1%" +--- +treemap-beta +"Market Share" + "Company A": 0.35 + "Company B": 0.25 + "Company C": 0.15 + "Others": 0.25 + `, + {} + ); + }); + + it('8b: should handle decimal formatting', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: ".2f" +--- +treemap-beta +"Metrics" + "Conversion Rate": 0.0567 + "Bounce Rate": 0.6723 + "Click-through Rate": 0.1289 + "Engagement": 0.4521 + `, + {} + ); + }); + + it('8c: should handle dollar sign with decimal places', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: "$.2f" +--- +treemap-beta +"Product Prices" + "Basic": 19.99 + "Standard": 49.99 + "Premium": 99.99 + "Enterprise": 199.99 + `, + {} + ); + }); + + it('8d: should handle dollar sign with thousands separator and decimal places', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: "$,.2f" +--- +treemap-beta +"Revenue" + "Q1": 1250345.75 + "Q2": 1645789.25 + "Q3": 1845123.50 + "Q4": 2145678.75 + `, + {} + ); + }); + + it('8e: should handle simple thousands separator', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: "," +--- +treemap-beta +"User Counts" + "Active Users": 1250345 + "New Signups": 45789 + "Churned": 12350 + "Converted": 78975 + `, + {} + ); + }); + + it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: "$,.0f" +--- +treemap-beta +"Sales by Region" + "North": 1234567 + "South": 7654321 + "East": 4567890 + "West": 9876543 + `, + {} + ); + }); + + it('8g: should handle scientific notation format', () => { + imgSnapshotTest( + `--- +config: + treemap: + valueFormat: ".2e" +--- +treemap-beta +"Scientific Values" + "Value 1": 1234567 + "Value 2": 0.0000123 + "Value 3": 1000000000 + `, + {} + ); + }); + + it('9: should handle a complex example with multiple features', () => { + imgSnapshotTest( + `--- +config: + theme: dark + treemap: + valueFormat: "$0,0" +--- +treemap-beta +"Company Budget" + "Engineering":::engineering + "Frontend": 300000 + "Backend": 400000 + "DevOps": 200000 + "Marketing":::marketing + "Digital": 250000 + "Print": 100000 + "Events": 150000 + "Sales":::sales + "Direct": 500000 + "Channel": 300000 + +classDef engineering fill:#6b9bc3,stroke:#333; +classDef marketing fill:#c36b9b,stroke:#333; +classDef sales fill:#c3a66b,stroke:#333; + `, + {} + ); + }); + + it('10: should render the example from documentation', () => { + imgSnapshotTest( + ` + treemap-beta + "Section 1" + "Leaf 1.1": 12 + "Section 1.2":::class1 + "Leaf 1.2.1": 12 + "Section 2" + "Leaf 2.1": 20:::class1 + "Leaf 2.2": 25 + "Leaf 2.3": 12 + + classDef class1 fill:red,color:blue,stroke:#FFD600; + `, + {} + ); + }); + + it('11: should handle comments', () => { + imgSnapshotTest( + ` + treemap-beta + %% This is a comment + "Category A" + "Item A1": 10 + "Item A2": 20 + %% Another comment + "Category B" + "Item B1": 15 + "Item B2": 25 + `, + {} + ); + }); + /* + it.skip('12: should render a treemap with title', () => { + imgSnapshotTest( + ` + treemap-beta + title Treemap with Title + "Category A" + "Item A1": 10 + "Item A2": 20 + "Category B" + "Item B1": 15 + "Item B2": 25 + `, + {} + ); + }); + + it.skip('13: should render a treemap with accessibility attributes', () => { + imgSnapshotTest( + ` + treemap-beta + accTitle: Accessible Treemap Title + accDescr: This is a description of the treemap for accessibility purposes + "Category A" + "Item A1": 10 + "Item A2": 20 + "Category B" + "Item B1": 15 + "Item B2": 25 + `, + {} + ); + }); + + it.skip('14: should render a treemap with title and accessibility attributes', () => { + imgSnapshotTest( + ` + treemap + title Treemap with Title and Accessibility + accTitle: Accessible Treemap Title + accDescr: This is a description of the treemap for accessibility purposes + "Category A" + "Item A1": 10 + "Item A2": 20 + "Category B" + "Item B1": 15 + "Item B2": 25 + `, + {} + ); + }); + */ +}); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 38ac97b45..ec39aa3a9 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -32,8 +32,26 @@ href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" rel="stylesheet" /> + + + + + +

Treemap Diagram Demo

+

This is a demo of the new treemap diagram type in Mermaid.

+ +

Basic Treemap Example

+
+treemap
+    "Root"
+        "Branch 1"
+            "Leaf 1.1": 10
+            "Leaf 1.2": 15
+        "Branch 2"
+            "Branch 2.1"
+                "Leaf 2.1.1": 20
+                "Leaf 2.1.2": 25
+            "Leaf 2.2": 25
+            "Leaf 2.3": 30
+    
+ +

Technology Stack Treemap Example

+
+treemap
+    "Technology Stack"
+        "Frontend"
+            "React": 35
+            "CSS": 15
+            "HTML": 10
+        "Backend"
+            "Node.js": 25
+            "Express": 10
+            "MongoDB": 15
+        "DevOps"
+            "Docker": 10
+            "Kubernetes": 15
+            "CI/CD": 5
+    
+ + + + diff --git a/docs/community/contributing.md b/docs/community/contributing.md index 596b26430..ce010b316 100644 --- a/docs/community/contributing.md +++ b/docs/community/contributing.md @@ -301,7 +301,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on 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 for all code except the renderers. (The renderers are tested with integration tests.) +Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.) We use [Vitest](https://vitest.dev) to run unit tests. @@ -327,6 +327,30 @@ When using Docker prepend your command with `./run`: ./run pnpm test ``` +##### Testing the DOM + +One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout. + +The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment. + +> \[!NOTE] +> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment. + +Example : + +```typescript +import { ensureNodeFromSelector, jsdomIt } from './tests/util.js'; + +jsdomIt('should add element "thing" in the SVG', ({ svg }) => { + // Code in this block runs in a pseudo-browser environment + addThing(svg); // The svg item is the D3 selection of the SVG node + const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API + expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG +}); +``` + +They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though. + #### Integration / End-to-End (E2E) Tests These test the rendering and visual appearance of the diagrams. diff --git a/docs/community/new-diagram.md b/docs/community/new-diagram.md index c214afa64..847f3ef35 100644 --- a/docs/community/new-diagram.md +++ b/docs/community/new-diagram.md @@ -111,3 +111,13 @@ const themes = { ``` The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups. + +## Examples + +The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram. + +You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram. + +Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array. + +Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram. diff --git a/docs/config/setup/defaultConfig/variables/configKeys.md b/docs/config/setup/defaultConfig/variables/configKeys.md index 4aa7405e1..222111bd5 100644 --- a/docs/config/setup/defaultConfig/variables/configKeys.md +++ b/docs/config/setup/defaultConfig/variables/configKeys.md @@ -12,4 +12,4 @@ > `const` **configKeys**: `Set`<`string`> -Defined in: [packages/mermaid/src/defaultConfig.ts:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278) +Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290) diff --git a/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md b/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md index 34e475388..35efcddeb 100644 --- a/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md +++ b/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md @@ -10,7 +10,7 @@ # Interface: ExternalDiagramDefinition -Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99) +Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/me > **detector**: `DiagramDetector` -Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101) +Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96) --- @@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/m > **id**: `string` -Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100) +Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95) --- @@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/m > **loader**: `DiagramLoader` -Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102) +Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97) diff --git a/docs/config/setup/mermaid/interfaces/Mermaid.md b/docs/config/setup/mermaid/interfaces/Mermaid.md index 2e5cc3571..fd15b306b 100644 --- a/docs/config/setup/mermaid/interfaces/Mermaid.md +++ b/docs/config/setup/mermaid/interfaces/Mermaid.md @@ -10,7 +10,7 @@ # Interface: Mermaid -Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418) +Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/ > **contentLoaded**: () => `void` -Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) +Defined in: [packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447) \##contentLoaded Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the @@ -34,7 +34,7 @@ page. > **detectType**: (`text`, `config`?) => `string` -Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438) +Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449) Detects the type of the graph text. @@ -86,11 +86,28 @@ A graph definition key --- +### getRegisteredDiagramsMetadata() + +> **getRegisteredDiagramsMetadata**: () => `Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[] + +Defined in: [packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451) + +Gets the metadata for all registered diagrams. +Currently only the id is returned. + +#### Returns + +`Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[] + +An array of objects with the id of the diagram. + +--- + ### ~~init()~~ > **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`> -Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) +Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) ## init @@ -138,7 +155,7 @@ Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead. > **initialize**: (`config`) => `void` -Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) +Defined in: [packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446) Used to set configurations for mermaid. This function should be called before the run function. @@ -161,7 +178,7 @@ Configuration object for mermaid. > **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }> -Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) +Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) **`Internal`** @@ -175,7 +192,7 @@ Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [o > **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)> -Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426) +Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) Parse the text and validate the syntax. @@ -243,7 +260,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not > `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md) -Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420) +Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) --- @@ -251,7 +268,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/ > **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`> -Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) +Defined in: [packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445) Used to register external diagram types. @@ -281,7 +298,7 @@ If opts.lazyLoad is false, the diagrams will be loaded immediately. > **registerIconPacks**: (`iconLoaders`) => `void` -Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439) +Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450) #### Parameters @@ -299,7 +316,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/ > **registerLayoutLoaders**: (`loaders`) => `void` -Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) +Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444) #### Parameters @@ -317,7 +334,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/ > **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)> -Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427) +Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438) #### Parameters @@ -349,7 +366,7 @@ Deprecated for external use. > **run**: (`options`) => `Promise`<`void`> -Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) +Defined in: [packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443) ## run @@ -393,7 +410,7 @@ Optional runtime configs > **setParseErrorHandler**: (`parseErrorHandler`) => `void` -Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) +Defined in: [packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448) ## setParseErrorHandler Alternative to directly setting parseError using: @@ -424,4 +441,4 @@ New parseError() callback. > **startOnLoad**: `boolean` -Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419) +Defined in: [packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) diff --git a/docs/config/setup/mermaid/interfaces/ParseOptions.md b/docs/config/setup/mermaid/interfaces/ParseOptions.md index e3a968378..ea96f2706 100644 --- a/docs/config/setup/mermaid/interfaces/ParseOptions.md +++ b/docs/config/setup/mermaid/interfaces/ParseOptions.md @@ -10,7 +10,7 @@ # Interface: ParseOptions -Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59) +Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mer > `optional` **suppressErrors**: `boolean` -Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64) +Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77) If `true`, parse will return `false` instead of throwing error when the diagram is invalid. The `parseError` function will not be called. diff --git a/docs/config/setup/mermaid/interfaces/ParseResult.md b/docs/config/setup/mermaid/interfaces/ParseResult.md index 95d662b42..7a5990610 100644 --- a/docs/config/setup/mermaid/interfaces/ParseResult.md +++ b/docs/config/setup/mermaid/interfaces/ParseResult.md @@ -10,7 +10,7 @@ # Interface: ParseResult -Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67) +Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mer > **config**: [`MermaidConfig`](MermaidConfig.md) -Defined in: [packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75) +Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88) The config passed as YAML frontmatter or directives @@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives > **diagramType**: `string` -Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71) +Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84) The diagram type, e.g. 'flowchart', 'sequence', etc. diff --git a/docs/config/setup/mermaid/interfaces/RenderResult.md b/docs/config/setup/mermaid/interfaces/RenderResult.md index c6dc3cf08..fc5fac4f5 100644 --- a/docs/config/setup/mermaid/interfaces/RenderResult.md +++ b/docs/config/setup/mermaid/interfaces/RenderResult.md @@ -10,7 +10,7 @@ # Interface: RenderResult -Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85) +Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98) ## Properties @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mer > `optional` **bindFunctions**: (`element`) => `void` -Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103) +Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116) Bind function to be called after the svg has been inserted into the DOM. This is necessary for adding event listeners to the elements in the svg. @@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. > **diagramType**: `string` -Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93) +Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106) The diagram type, e.g. 'flowchart', 'sequence', etc. @@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc. > **svg**: `string` -Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89) +Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102) The svg code for the rendered graph. diff --git a/docs/config/setup/mermaid/type-aliases/SVG.md b/docs/config/setup/mermaid/type-aliases/SVG.md index 2c72882ae..8bfb7bda0 100644 --- a/docs/config/setup/mermaid/type-aliases/SVG.md +++ b/docs/config/setup/mermaid/type-aliases/SVG.md @@ -12,4 +12,4 @@ > **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`> -Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130) +Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126) diff --git a/docs/config/setup/mermaid/type-aliases/SVGGroup.md b/docs/config/setup/mermaid/type-aliases/SVGGroup.md index 30ada9928..5e53052fd 100644 --- a/docs/config/setup/mermaid/type-aliases/SVGGroup.md +++ b/docs/config/setup/mermaid/type-aliases/SVGGroup.md @@ -12,4 +12,4 @@ > **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`> -Defined in: [packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132) +Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128) diff --git a/docs/config/setup/mermaid/variables/default.md b/docs/config/setup/mermaid/variables/default.md index 24ec84128..a953a641b 100644 --- a/docs/config/setup/mermaid/variables/default.md +++ b/docs/config/setup/mermaid/variables/default.md @@ -12,4 +12,4 @@ > `const` **default**: [`Mermaid`](../interfaces/Mermaid.md) -Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) +Defined in: [packages/mermaid/src/mermaid.ts:454](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L454) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 27cf22ee1..cc5dbad1a 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -84,6 +84,7 @@ To add an integration to this list, see the [Integrations - create page](./integ LLM integrations to create mermaid diagrams using AI from text descriptions. - [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams) +- [MCP Server Mermaid](https://github.com/hustcc/mcp-mermaid) - Generate mermaid diagram and chart with AI MCP dynamically. ### CRM/ERP @@ -245,7 +246,7 @@ Communication tools and platforms | GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension) | | Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | - | | Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) | -| Markdown Diagrams | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) | +| Markdown Diagrams | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) | | Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) | | Extensions for Mermaid | - | - | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) | | Chrome Diagrammer | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - | @@ -270,5 +271,6 @@ Communication tools and platforms - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin) - [Reveal CK](https://github.com/jedcn/reveal-ck) - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin) +- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer) diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md index 921368406..9538243f3 100644 --- a/docs/ecosystem/integrations-create.md +++ b/docs/ecosystem/integrations-create.md @@ -16,9 +16,7 @@ Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/do ### MIME Type -The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`. - -Currently pending [IANA](https://www.iana.org/) recognition. +The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is [`text/vnd.mermaid`](https://www.iana.org/assignments/media-types/application/vnd.mermaid). ## Showcase diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index 79fe3c788..8100a1846 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -30,7 +30,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun Official Mermaid Chart plugins: - - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart) + - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts) - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview) - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud) - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) diff --git a/docs/public/1-Callout-Easy.svg b/docs/public/1-Callout-Easy.svg new file mode 100644 index 000000000..a6e9251a0 --- /dev/null +++ b/docs/public/1-Callout-Easy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/2-Callout-Integrations.svg b/docs/public/2-Callout-Integrations.svg new file mode 100644 index 000000000..b5ebdf055 --- /dev/null +++ b/docs/public/2-Callout-Integrations.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/3-Callout-Awards.svg b/docs/public/3-Callout-Awards.svg new file mode 100644 index 000000000..f10c0fc39 --- /dev/null +++ b/docs/public/3-Callout-Awards.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/hero-chart-dark.svg b/docs/public/hero-chart-dark.svg new file mode 100644 index 000000000..2beb9bdab --- /dev/null +++ b/docs/public/hero-chart-dark.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/hero-chart.svg b/docs/public/hero-chart.svg new file mode 100644 index 000000000..fbc675f3a --- /dev/null +++ b/docs/public/hero-chart.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/icons/ai-diagram.svg b/docs/public/icons/ai-diagram.svg new file mode 100644 index 000000000..d3ff002f6 --- /dev/null +++ b/docs/public/icons/ai-diagram.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/icons/ai-repair.svg b/docs/public/icons/ai-repair.svg new file mode 100644 index 000000000..1e255ac81 --- /dev/null +++ b/docs/public/icons/ai-repair.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/icons/comment.svg b/docs/public/icons/comment.svg new file mode 100644 index 000000000..626bfd265 --- /dev/null +++ b/docs/public/icons/comment.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/icons/folder.svg b/docs/public/icons/folder.svg new file mode 100644 index 000000000..a443f1699 --- /dev/null +++ b/docs/public/icons/folder.svg @@ -0,0 +1,11 @@ + + + diff --git a/docs/public/icons/group.svg b/docs/public/icons/group.svg new file mode 100644 index 000000000..8a7443b6e --- /dev/null +++ b/docs/public/icons/group.svg @@ -0,0 +1,11 @@ + + + diff --git a/docs/public/icons/groups.svg b/docs/public/icons/groups.svg new file mode 100644 index 000000000..c827bebc6 --- /dev/null +++ b/docs/public/icons/groups.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/icons/open-source.svg b/docs/public/icons/open-source.svg new file mode 100644 index 000000000..d6c1f9843 --- /dev/null +++ b/docs/public/icons/open-source.svg @@ -0,0 +1,11 @@ + + + + diff --git a/docs/public/icons/plugins.svg b/docs/public/icons/plugins.svg new file mode 100644 index 000000000..fbf4a4800 --- /dev/null +++ b/docs/public/icons/plugins.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/icons/presentation.svg b/docs/public/icons/presentation.svg new file mode 100644 index 000000000..4c679a19e --- /dev/null +++ b/docs/public/icons/presentation.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/icons/public.svg b/docs/public/icons/public.svg new file mode 100644 index 000000000..3d563baa1 --- /dev/null +++ b/docs/public/icons/public.svg @@ -0,0 +1,11 @@ + + + diff --git a/docs/public/icons/terminal.svg b/docs/public/icons/terminal.svg new file mode 100644 index 000000000..5af2408d4 --- /dev/null +++ b/docs/public/icons/terminal.svg @@ -0,0 +1,11 @@ + + + diff --git a/docs/public/icons/version-history.svg b/docs/public/icons/version-history.svg new file mode 100644 index 000000000..bacb28629 --- /dev/null +++ b/docs/public/icons/version-history.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/icons/whiteboard.svg b/docs/public/icons/whiteboard.svg new file mode 100644 index 000000000..9ac13652a --- /dev/null +++ b/docs/public/icons/whiteboard.svg @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/docs/public/mermaid-logo-horizontal.svg b/docs/public/mermaid-logo-horizontal.svg new file mode 100644 index 000000000..34b3bb124 --- /dev/null +++ b/docs/public/mermaid-logo-horizontal.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index e9feb8874..5f827e52a 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1795,15 +1795,54 @@ It is possible to style the type of curve used for lines between items, if the d Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, and `stepBefore`. +For a full list of available curves, including an explanation of custom curves, refer to +the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. + +Line styling can be achieved in two ways: + +1. Change the curve style of all the lines +2. Change the curve style of a particular line + +#### Diagram level curve style + In this example, a left-to-right graph uses the `stepBefore` curve style: ``` -%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%% +--- +config: + flowchart: + curve: stepBefore +--- graph LR ``` -For a full list of available curves, including an explanation of custom curves, refer to -the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. +#### Edge level curve style using Edge IDs (v\+) + +You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax: + +```mermaid-example +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```mermaid +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```info +Any edge curve style modified at the edge level overrides the diagram level style. +``` + +```info +If the same edge is modified multiple times the last modification will be rendered. +``` ### Styling a node @@ -1949,7 +1988,7 @@ flowchart TD There are two ways to display these FontAwesome icons: -### Register FontAwesome icon packs (v\+) +### Register FontAwesome icon packs (v11.7.0+) You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md). diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index efe305f3b..c42aecc69 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -17,18 +17,18 @@ This diagram type is particularly useful for developers, network engineers, educ ## Syntax ``` -packet-beta +packet start: "Block name" %% Single-bit block start-end: "Block name" %% Multi-bit blocks ... More Fields ... ``` -### Bits Syntax (v\+) +### Bits Syntax (v11.7.0+) Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+` to set the number of bits, thus: ``` -packet-beta +packet +1: "Block name" %% Single-bit block +8: "Block name" %% 8-bit block 9-15: "Manually set start and end, it's fine to mix and match" @@ -41,7 +41,7 @@ packet-beta --- title: "TCP Packet" --- -packet-beta +packet 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" @@ -65,7 +65,7 @@ packet-beta --- title: "TCP Packet" --- -packet-beta +packet 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" @@ -86,7 +86,7 @@ packet-beta ``` ```mermaid-example -packet-beta +packet title UDP Packet +16: "Source Port" +16: "Destination Port" @@ -96,7 +96,7 @@ title UDP Packet ``` ```mermaid -packet-beta +packet title UDP Packet +16: "Source Port" +16: "Destination Port" @@ -144,7 +144,7 @@ config: packet: startByteColor: red --- -packet-beta +packet 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" diff --git a/docs/syntax/treemap.md b/docs/syntax/treemap.md new file mode 100644 index 000000000..1ee916ff9 --- /dev/null +++ b/docs/syntax/treemap.md @@ -0,0 +1,353 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md). + +# Treemap Diagram + +> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches. + +> **Warning** +> This is a new diagram type in Mermaid. Its syntax may evolve in future versions. + +## Introduction + +Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy. + +Treemap diagrams are particularly useful for: + +- Visualizing hierarchical data structures +- Comparing proportions between categories +- Displaying large amounts of hierarchical data in a limited space +- Identifying patterns and outliers in hierarchical data + +## Syntax + +``` +treemap-beta +"Section 1" + "Leaf 1.1": 12 + "Section 1.2" + "Leaf 1.2.1": 12 +"Section 2" + "Leaf 2.1": 20 + "Leaf 2.2": 25 +``` + +### Node Definition + +Nodes in a treemap are defined using the following syntax: + +- **Section/Parent nodes**: Defined with quoted text `"Section Name"` +- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value` +- **Hierarchy**: Created using indentation (spaces or tabs) +- **Styling**: Nodes can be styled using the `:::class` syntax + +## Examples + +### Basic Treemap + +```mermaid-example +treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 +``` + +```mermaid +treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 +``` + +### Hierarchical Treemap + +```mermaid-example +treemap-beta +"Products" + "Electronics" + "Phones": 50 + "Computers": 30 + "Accessories": 20 + "Clothing" + "Men's": 40 + "Women's": 40 +``` + +```mermaid +treemap-beta +"Products" + "Electronics" + "Phones": 50 + "Computers": 30 + "Accessories": 20 + "Clothing" + "Men's": 40 + "Women's": 40 +``` + +### Treemap with Styling + +```mermaid-example +treemap-beta +"Section 1" + "Leaf 1.1": 12 + "Section 1.2":::class1 + "Leaf 1.2.1": 12 +"Section 2" + "Leaf 2.1": 20:::class1 + "Leaf 2.2": 25 + "Leaf 2.3": 12 + +classDef class1 fill:red,color:blue,stroke:#FFD600; +``` + +```mermaid +treemap-beta +"Section 1" + "Leaf 1.1": 12 + "Section 1.2":::class1 + "Leaf 1.2.1": 12 +"Section 2" + "Leaf 2.1": 20:::class1 + "Leaf 2.2": 25 + "Leaf 2.3": 12 + +classDef class1 fill:red,color:blue,stroke:#FFD600; +``` + +## Styling and Configuration + +Treemap diagrams can be customized using Mermaid's styling and configuration options. + +### Using classDef for Styling + +You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types: + +```mermaid-example +treemap-beta +"Main" + "A": 20 + "B":::important + "B1": 10 + "B2": 15 + "C": 5 + +classDef important fill:#f96,stroke:#333,stroke-width:2px; +``` + +```mermaid +treemap-beta +"Main" + "A": 20 + "B":::important + "B1": 10 + "B2": 15 + "C": 5 + +classDef important fill:#f96,stroke:#333,stroke-width:2px; +``` + +### Theme Configuration + +You can customize the colors of your treemap using the theme configuration: + +```mermaid-example +--- +config: + theme: 'forest' +--- +treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 +``` + +```mermaid +--- +config: + theme: 'forest' +--- +treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 +``` + +### Diagram Padding + +You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option: + +```mermaid-example +--- +config: + treemap: + diagramPadding: 200 +--- +treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 +``` + +```mermaid +--- +config: + treemap: + diagramPadding: 200 +--- +treemap-beta +"Category A" + "Item A1": 10 + "Item A2": 20 +"Category B" + "Item B1": 15 + "Item B2": 25 +``` + +## Configuration Options + +The treemap diagram supports the following configuration options: + +| Option | Description | Default | +| -------------- | --------------------------------------------------------------------------- | ------- | +| useMaxWidth | When true, the diagram width is set to 100% and scales with available space | true | +| padding | Internal padding between nodes | 10 | +| diagramPadding | Padding around the entire diagram | 8 | +| showValues | Whether to show values in the treemap | true | +| nodeWidth | Width of nodes | 100 | +| nodeHeight | Height of nodes | 40 | +| borderWidth | Width of borders | 1 | +| valueFontSize | Font size for values | 12 | +| labelFontSize | Font size for labels | 14 | +| valueFormat | Format for values (see Value Formatting section) | ',' | + +## Advanced Features + +### Value Formatting + +Values in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats. + +Some common format patterns: + +- `,` - Thousands separator (default) +- `$` - Add dollar sign +- `.1f` - Show one decimal place +- `.1%` - Show as percentage with one decimal place +- `$0,0` - Dollar sign with thousands separator +- `$.2f` - Dollar sign with 2 decimal places +- `$,.2f` - Dollar sign with thousands separator and 2 decimal places + +The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options. + +Example with currency formatting: + +```mermaid-example +--- +config: + treemap: + valueFormat: '$0,0' +--- +treemap-beta +"Budget" + "Operations" + "Salaries": 700000 + "Equipment": 200000 + "Supplies": 100000 + "Marketing" + "Advertising": 400000 + "Events": 100000 +``` + +```mermaid +--- +config: + treemap: + valueFormat: '$0,0' +--- +treemap-beta +"Budget" + "Operations" + "Salaries": 700000 + "Equipment": 200000 + "Supplies": 100000 + "Marketing" + "Advertising": 400000 + "Events": 100000 +``` + +Example with percentage formatting: + +```mermaid-example +--- +config: + treemap: + valueFormat: '$.1%' +--- +treemap-beta +"Market Share" + "Company A": 0.35 + "Company B": 0.25 + "Company C": 0.15 + "Others": 0.25 +``` + +```mermaid +--- +config: + treemap: + valueFormat: '$.1%' +--- +treemap-beta +"Market Share" + "Company A": 0.35 + "Company B": 0.25 + "Company C": 0.15 + "Others": 0.25 +``` + +## Common Use Cases + +Treemap diagrams are commonly used for: + +1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions +2. **File System Analysis**: Showing disk space usage by folders and files +3. **Population Demographics**: Displaying population distribution across regions and subregions +4. **Product Hierarchies**: Visualizing product categories and their sales volumes +5. **Organizational Structures**: Representing departments and team sizes in a company + +## Limitations + +- Treemap diagrams work best when the data has a natural hierarchy +- Very small values may be difficult to see or label in a treemap diagram +- Deep hierarchies (many levels) can be challenging to represent clearly +- Treemap diagrams are not well suited for representing data with negative values + +## Related Diagrams + +If treemap diagrams don't suit your needs, consider these alternatives: + +- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy +- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid). +- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data + +## Notes + +The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository. diff --git a/package.json b/package.json index f0c5b8467..c407d1158 100644 --- a/package.json +++ b/package.json @@ -64,10 +64,10 @@ }, "devDependencies": { "@applitools/eyes-cypress": "^3.44.9", - "@argos-ci/cypress": "^4.0.3", + "@argos-ci/cypress": "^5.0.2", "@changesets/changelog-github": "^0.5.1", "@changesets/cli": "^2.27.12", - "@cspell/eslint-plugin": "^8.19.3", + "@cspell/eslint-plugin": "^8.19.4", "@cypress/code-coverage": "^3.12.49", "@eslint/js": "^9.26.0", "@rollup/plugin-typescript": "^12.1.2", @@ -83,51 +83,51 @@ "@vitest/spy": "^3.0.6", "@vitest/ui": "^3.0.6", "ajv": "^8.17.1", - "chokidar": "^3.6.0", + "chokidar": "3.6.0", "concurrently": "^9.1.2", "cors": "^2.8.5", "cpy-cli": "^5.0.0", "cross-env": "^7.0.3", - "cspell": "^8.6.1", - "cypress": "^14.0.3", + "cspell": "^9.1.3", + "cypress": "^14.5.1", "cypress-image-snapshot": "^4.0.1", "cypress-split": "^1.24.14", "esbuild": "^0.25.0", "eslint": "^9.26.0", - "eslint-config-prettier": "^10.1.1", + "eslint-config-prettier": "^10.1.8", "eslint-plugin-cypress": "^4.3.0", - "eslint-plugin-html": "^8.1.2", - "eslint-plugin-jest": "^28.11.0", - "eslint-plugin-jsdoc": "^50.6.9", + "eslint-plugin-html": "^8.1.3", + "eslint-plugin-jest": "^28.11.2", + "eslint-plugin-jsdoc": "^50.6.17", "eslint-plugin-json": "^4.0.1", "eslint-plugin-lodash": "^8.0.0", "eslint-plugin-markdown": "^5.1.0", "eslint-plugin-no-only-tests": "^3.3.0", "eslint-plugin-tsdoc": "^0.4.0", - "eslint-plugin-unicorn": "^59.0.0", + "eslint-plugin-unicorn": "^59.0.1", "express": "^5.1.0", "globals": "^16.0.0", "globby": "^14.0.2", "husky": "^9.1.7", - "jest": "^29.7.0", + "jest": "^30.0.4", "jison": "^0.4.18", "js-yaml": "^4.1.0", - "jsdom": "^26.0.0", + "jsdom": "^26.1.0", "langium-cli": "3.3.0", - "lint-staged": "^15.2.11", + "lint-staged": "^16.1.2", "markdown-table": "^3.0.4", "nyc": "^17.1.0", "path-browserify": "^1.0.1", "prettier": "^3.5.2", "prettier-plugin-jsdoc": "^1.3.2", "rimraf": "^6.0.1", - "rollup-plugin-visualizer": "^5.14.0", + "rollup-plugin-visualizer": "^6.0.3", "start-server-and-test": "^2.0.10", "tslib": "^2.8.1", "tsx": "^4.7.3", "typescript": "~5.7.3", - "typescript-eslint": "^8.32.0", - "vite": "^6.1.1", + "typescript-eslint": "^8.32.1", + "vite": "^7.0.3", "vite-plugin-istanbul": "^7.0.0", "vitest": "^3.0.6" }, @@ -139,8 +139,13 @@ "roughjs": "patches/roughjs.patch" }, "onlyBuiltDependencies": [ + "canvas", "cypress", "esbuild" + ], + "ignoredBuiltDependencies": [ + "sharp", + "vue-demi" ] } } diff --git a/packages/examples/CHANGELOG.md b/packages/examples/CHANGELOG.md new file mode 100644 index 000000000..befef1a41 --- /dev/null +++ b/packages/examples/CHANGELOG.md @@ -0,0 +1,14 @@ +# @mermaid-js/examples + +## 1.0.0 + +### Minor Changes + +- [#6453](https://github.com/mermaid-js/mermaid/pull/6453) [`4936ef5`](https://github.com/mermaid-js/mermaid/commit/4936ef5c306d2f892cca9a95a5deac4af6d4882b) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Add examples for diagrams in the `@mermaid-js/examples` package + +### Patch Changes + +- [#6510](https://github.com/mermaid-js/mermaid/pull/6510) [`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Move packet diagram out of beta + +- Updated dependencies [[`5acbd7e`](https://github.com/mermaid-js/mermaid/commit/5acbd7e762469d9d89a9c77faf6617ee13367f3a), [`d90634b`](https://github.com/mermaid-js/mermaid/commit/d90634bf2b09e586b055729e07e9a1a31b21827c), [`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6), [`3e3ae08`](https://github.com/mermaid-js/mermaid/commit/3e3ae089305e1c7b9948b9e149eba6854fe7f2d6), [`d3e2be3`](https://github.com/mermaid-js/mermaid/commit/d3e2be35be066adeb7fd502b4a24c223c3b53947), [`637680d`](https://github.com/mermaid-js/mermaid/commit/637680d4d9e39b4f8cb6f05b4cb261e8f5693ac3)]: + - mermaid@11.9.0 diff --git a/packages/examples/README.md b/packages/examples/README.md new file mode 100644 index 000000000..603d0cea8 --- /dev/null +++ b/packages/examples/README.md @@ -0,0 +1,41 @@ +# @mermaid-js/examples + +The `@mermaid-js/examples` package contains a collection of examples used by tools like [mermaid.live](https://mermaid.live) to help users get started with new diagrams. + +You can duplicate an existing diagram example file, e.g., `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram. + +Then, import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array. + +Each diagram should have at least one example, which should be marked as the default. It's a good idea to add more examples to showcase different features of the diagram. + +## Usage + +```bash +pnpm add @mermaid-js/examples +``` + +A sample usage of the package in mermaid.live, to get the default example for every diagram type: + +```ts +import { diagramData } from '@mermaid-js/examples'; + +type DiagramDefinition = (typeof diagramData)[number]; + +const isValidDiagram = (diagram: DiagramDefinition): diagram is Required => { + return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0); +}; + +export const getSampleDiagrams = () => { + const diagrams = diagramData + .filter((d) => isValidDiagram(d)) + .map(({ examples, ...rest }) => ({ + ...rest, + example: examples?.filter(({ isDefault }) => isDefault)[0], + })); + const examples: Record = {}; + for (const diagram of diagrams) { + examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code; + } + return examples; +}; +``` diff --git a/packages/examples/package.json b/packages/examples/package.json new file mode 100644 index 000000000..26ae83e15 --- /dev/null +++ b/packages/examples/package.json @@ -0,0 +1,36 @@ +{ + "name": "@mermaid-js/examples", + "version": "1.0.0", + "description": "Mermaid examples package", + "author": "Sidharth Vinod", + "type": "module", + "module": "./dist/mermaid-examples.core.mjs", + "types": "./dist/mermaid.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/mermaid-examples.core.mjs", + "default": "./dist/mermaid-examples.core.mjs" + } + }, + "files": [ + "dist" + ], + "repository": { + "type": "git", + "url": "https://github.com/mermaid-js/mermaid" + }, + "scripts": { + "clean": "rimraf dist" + }, + "dependencies": {}, + "devDependencies": { + "mermaid": "workspace:*" + }, + "peerDependencies": { + "mermaid": "workspace:~" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/examples/src/example.spec.ts b/packages/examples/src/example.spec.ts new file mode 100644 index 000000000..71e3e6fab --- /dev/null +++ b/packages/examples/src/example.spec.ts @@ -0,0 +1,34 @@ +import mermaid from 'mermaid'; +import { diagramData } from './index.js'; + +describe('examples', () => { + beforeAll(async () => { + // To trigger the diagram registration + await mermaid.registerExternalDiagrams([]); + }); + + it('should have examples for each diagrams', () => { + const skippedDiagrams = [ + // These diagrams have no examples + 'error', + 'info', + '---', + // These diagrams have v2 versions, with examples + 'class', + 'graph', + 'flowchart-elk', + 'flowchart', + 'state', + ]; + const diagrams = mermaid + .getRegisteredDiagramsMetadata() + .filter((d) => !skippedDiagrams.includes(d.id)); + expect(diagrams.length).toBeGreaterThan(0); + for (const diagram of diagrams) { + const data = diagramData.find((d) => d.id === diagram.id)!; + expect(data, `Example for ${diagram.id} is not defined`).toBeDefined(); + expect(data.examples.length).toBeGreaterThan(0); + expect(data.examples.filter((e) => e.isDefault).length).toBe(1); + } + }); +}); diff --git a/packages/examples/src/examples/architecture.ts b/packages/examples/src/examples/architecture.ts new file mode 100644 index 000000000..d2b53d26c --- /dev/null +++ b/packages/examples/src/examples/architecture.ts @@ -0,0 +1,24 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'architecture', + name: 'Architecture Diagram', + description: 'Visualize system architecture and components', + examples: [ + { + title: 'Basic System Architecture', + isDefault: true, + code: `architecture-beta + group api(cloud)[API] + + service db(database)[Database] in api + service disk1(disk)[Storage] in api + service disk2(disk)[Storage] in api + service server(server)[Server] in api + + db:L -- R:server + disk1:T -- B:server + disk2:T -- B:db`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/block.ts b/packages/examples/src/examples/block.ts new file mode 100644 index 000000000..4ea374b52 --- /dev/null +++ b/packages/examples/src/examples/block.ts @@ -0,0 +1,27 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'block', + name: 'Block Diagram', + description: 'Create block-based visualizations with beta styling', + examples: [ + { + title: 'Basic Block Layout', + isDefault: true, + code: `block-beta +columns 1 + db(("DB")) + blockArrowId6<["   "]>(down) + block:ID + A + B["A wide one in the middle"] + C + end + space + D + ID --> D + C --> D + style B fill:#969,stroke:#333,stroke-width:4px`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/c4.ts b/packages/examples/src/examples/c4.ts new file mode 100644 index 000000000..40ea86bc8 --- /dev/null +++ b/packages/examples/src/examples/c4.ts @@ -0,0 +1,47 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'c4', + name: 'C4 Diagram', + description: + 'Visualize software architecture using the C4 model (Context, Container, Component, Code)', + examples: [ + { + title: 'Internet Banking System Context', + isDefault: true, + code: `C4Context + title System Context diagram for Internet Banking System + Enterprise_Boundary(b0, "BankBoundary0") { + Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") + Person(customerB, "Banking Customer B") + Person_Ext(customerC, "Banking Customer C", "desc") + + Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") + + System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + + Enterprise_Boundary(b1, "BankBoundary") { + SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + System_Boundary(b2, "BankBoundary2") { + System(SystemA, "Banking System A") + System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.") + } + + System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") + SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") + + Boundary(b3, "BankBoundary3", "boundary") { + SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.") + SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") + } + } + } + + BiRel(customerA, SystemAA, "Uses") + BiRel(SystemAA, SystemE, "Uses") + Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") + Rel(SystemC, customerA, "Sends e-mails to")`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/class.ts b/packages/examples/src/examples/class.ts new file mode 100644 index 000000000..41d54bb3a --- /dev/null +++ b/packages/examples/src/examples/class.ts @@ -0,0 +1,34 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'classDiagram', + name: 'Class Diagram', + description: 'Visualize class structures and relationships in object-oriented programming', + examples: [ + { + title: 'Basic Class Inheritance', + isDefault: true, + code: `classDiagram + Animal <|-- Duck + Animal <|-- Fish + Animal <|-- Zebra + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class Duck{ + +String beakColor + +swim() + +quack() + } + class Fish{ + -int sizeInFeet + -canEat() + } + class Zebra{ + +bool is_wild + +run() + }`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/er.ts b/packages/examples/src/examples/er.ts new file mode 100644 index 000000000..faa36f3c2 --- /dev/null +++ b/packages/examples/src/examples/er.ts @@ -0,0 +1,36 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'er', + name: 'Entity Relationship Diagram', + description: 'Visualize database schemas and relationships between entities', + examples: [ + { + title: 'Basic ER Schema', + isDefault: true, + code: `erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ ORDER_ITEM : contains + PRODUCT ||--o{ ORDER_ITEM : includes + CUSTOMER { + string id + string name + string email + } + ORDER { + string id + date orderDate + string status + } + PRODUCT { + string id + string name + float price + } + ORDER_ITEM { + int quantity + float price + }`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/flowchart.ts b/packages/examples/src/examples/flowchart.ts new file mode 100644 index 000000000..655e5795e --- /dev/null +++ b/packages/examples/src/examples/flowchart.ts @@ -0,0 +1,19 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'flowchart-v2', + name: 'Flowchart', + description: 'Visualize flowcharts and directed graphs', + examples: [ + { + title: 'Basic Flowchart', + isDefault: true, + code: `flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car]`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/gantt.ts b/packages/examples/src/examples/gantt.ts new file mode 100644 index 000000000..989eac572 --- /dev/null +++ b/packages/examples/src/examples/gantt.ts @@ -0,0 +1,22 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'gantt', + name: 'Gantt Chart', + description: 'Visualize project schedules and timelines', + examples: [ + { + title: 'Basic Project Timeline', + isDefault: true, + code: `gantt + title A Gantt Diagram + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/git.ts b/packages/examples/src/examples/git.ts new file mode 100644 index 000000000..64ba5df82 --- /dev/null +++ b/packages/examples/src/examples/git.ts @@ -0,0 +1,28 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'gitGraph', + name: 'Git Graph', + description: 'Visualize Git repository history and branch relationships', + examples: [ + { + title: 'Basic Git Flow', + isDefault: true, + code: `gitGraph + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + branch feature + checkout feature + commit + commit + checkout main + merge feature`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/kanban.ts b/packages/examples/src/examples/kanban.ts new file mode 100644 index 000000000..480059fb8 --- /dev/null +++ b/packages/examples/src/examples/kanban.ts @@ -0,0 +1,37 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'kanban', + name: 'Kanban Diagram', + description: 'Visualize work items in a Kanban board', + examples: [ + { + title: 'Kanban Diagram', + isDefault: true, + code: `--- +config: + kanban: + ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#' +--- +kanban + Todo + [Create Documentation] + docs[Create Blog about the new diagram] + [In progress] + id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.] + id9[Ready for deploy] + id8[Design grammar]@{ assigned: 'knsv' } + id10[Ready for test] + id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' } + id66[last item]@{ priority: 'Very Low', assigned: 'knsv' } + id11[Done] + id5[define getData] + id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'} + id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' } + + id12[Can't reproduce] + id3[Weird flickering in Firefox] +`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/mindmap.ts b/packages/examples/src/examples/mindmap.ts new file mode 100644 index 000000000..cba39ef91 --- /dev/null +++ b/packages/examples/src/examples/mindmap.ts @@ -0,0 +1,32 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'mindmap', + name: 'Mindmap', + description: 'Visualize ideas and concepts in a tree-like structure', + examples: [ + { + title: 'Basic Mindmap', + isDefault: true, + code: `mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectiveness
and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid`, + }, + ], +} satisfies DiagramMetadata; + +// cspell:ignore Buzan diff --git a/packages/examples/src/examples/packet.ts b/packages/examples/src/examples/packet.ts new file mode 100644 index 000000000..7acb97256 --- /dev/null +++ b/packages/examples/src/examples/packet.ts @@ -0,0 +1,34 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'packet', + name: 'Packet Diagram', + description: 'Visualize packet data and network traffic', + examples: [ + { + title: 'TCP Packet', + isDefault: true, + code: `--- +title: "TCP Packet" +--- +packet +0-15: "Source Port" +16-31: "Destination Port" +32-63: "Sequence Number" +64-95: "Acknowledgment Number" +96-99: "Data Offset" +100-105: "Reserved" +106: "URG" +107: "ACK" +108: "PSH" +109: "RST" +110: "SYN" +111: "FIN" +112-127: "Window" +128-143: "Checksum" +144-159: "Urgent Pointer" +160-191: "(Options and Padding)" +192-255: "Data (variable length)"`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/pie.ts b/packages/examples/src/examples/pie.ts new file mode 100644 index 000000000..d75fa5cf3 --- /dev/null +++ b/packages/examples/src/examples/pie.ts @@ -0,0 +1,17 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'pie', + name: 'Pie Chart', + description: 'Visualize data as proportional segments of a circle', + examples: [ + { + title: 'Basic Pie Chart', + isDefault: true, + code: `pie title Pets adopted by volunteers + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/quadrant-chart.ts b/packages/examples/src/examples/quadrant-chart.ts new file mode 100644 index 000000000..c013f57d6 --- /dev/null +++ b/packages/examples/src/examples/quadrant-chart.ts @@ -0,0 +1,27 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'quadrantChart', + name: 'Quadrant Chart', + description: 'Visualize items in a 2x2 matrix based on two variables', + examples: [ + { + title: 'Product Positioning', + isDefault: true, + code: `quadrantChart + title Reach and engagement of campaigns + x-axis Low Reach --> High Reach + y-axis Low Engagement --> High Engagement + quadrant-1 We should expand + quadrant-2 Need to promote + quadrant-3 Re-evaluate + quadrant-4 May be improved + Campaign A: [0.3, 0.6] + Campaign B: [0.45, 0.23] + Campaign C: [0.57, 0.69] + Campaign D: [0.78, 0.34] + Campaign E: [0.40, 0.34] + Campaign F: [0.35, 0.78]`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/radar.ts b/packages/examples/src/examples/radar.ts new file mode 100644 index 000000000..4798ffe17 --- /dev/null +++ b/packages/examples/src/examples/radar.ts @@ -0,0 +1,25 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'radar', + name: 'Radar Diagram', + description: 'Visualize data in a radial format', + examples: [ + { + title: 'Student Grades', + isDefault: true, + code: `--- +title: "Grades" +--- +radar-beta + axis m["Math"], s["Science"], e["English"] + axis h["History"], g["Geography"], a["Art"] + curve a["Alice"]{85, 90, 80, 70, 75, 90} + curve b["Bob"]{70, 75, 85, 80, 90, 85} + + max 100 + min 0 +`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/requirement.ts b/packages/examples/src/examples/requirement.ts new file mode 100644 index 000000000..6804ffdf8 --- /dev/null +++ b/packages/examples/src/examples/requirement.ts @@ -0,0 +1,27 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'requirement', + name: 'Requirement Diagram', + description: 'Visualize system requirements and their relationships', + examples: [ + { + title: 'Basic Requirements', + code: `requirementDiagram + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + element test_entity { + type: simulation + } + + test_entity - satisfies -> test_req`, + isDefault: true, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/sankey.ts b/packages/examples/src/examples/sankey.ts new file mode 100644 index 000000000..99a2c07be --- /dev/null +++ b/packages/examples/src/examples/sankey.ts @@ -0,0 +1,88 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'sankey', + name: 'Sankey Diagram', + description: 'Visualize flow quantities between different stages or processes', + examples: [ + { + title: 'Energy Flow', + isDefault: true, + code: `--- +config: + sankey: + showValues: false +--- +sankey-beta + +Agricultural 'waste',Bio-conversion,124.729 +Bio-conversion,Liquid,0.597 +Bio-conversion,Losses,26.862 +Bio-conversion,Solid,280.322 +Bio-conversion,Gas,81.144 +Biofuel imports,Liquid,35 +Biomass imports,Solid,35 +Coal imports,Coal,11.606 +Coal reserves,Coal,63.965 +Coal,Solid,75.571 +District heating,Industry,10.639 +District heating,Heating and cooling - commercial,22.505 +District heating,Heating and cooling - homes,46.184 +Electricity grid,Over generation / exports,104.453 +Electricity grid,Heating and cooling - homes,113.726 +Electricity grid,H2 conversion,27.14 +Electricity grid,Industry,342.165 +Electricity grid,Road transport,37.797 +Electricity grid,Agriculture,4.412 +Electricity grid,Heating and cooling - commercial,40.858 +Electricity grid,Losses,56.691 +Electricity grid,Rail transport,7.863 +Electricity grid,Lighting & appliances - commercial,90.008 +Electricity grid,Lighting & appliances - homes,93.494 +Gas imports,NGas,40.719 +Gas reserves,NGas,82.233 +Gas,Heating and cooling - commercial,0.129 +Gas,Losses,1.401 +Gas,Thermal generation,151.891 +Gas,Agriculture,2.096 +Gas,Industry,48.58 +Geothermal,Electricity grid,7.013 +H2 conversion,H2,20.897 +H2 conversion,Losses,6.242 +H2,Road transport,20.897 +Hydro,Electricity grid,6.995 +Liquid,Industry,121.066 +Liquid,International shipping,128.69 +Liquid,Road transport,135.835 +Liquid,Domestic aviation,14.458 +Liquid,International aviation,206.267 +Liquid,Agriculture,3.64 +Liquid,National navigation,33.218 +Liquid,Rail transport,4.413 +Marine algae,Bio-conversion,4.375 +NGas,Gas,122.952 +Nuclear,Thermal generation,839.978 +Oil imports,Oil,504.287 +Oil reserves,Oil,107.703 +Oil,Liquid,611.99 +Other waste,Solid,56.587 +Other waste,Bio-conversion,77.81 +Pumped heat,Heating and cooling - homes,193.026 +Pumped heat,Heating and cooling - commercial,70.672 +Solar PV,Electricity grid,59.901 +Solar Thermal,Heating and cooling - homes,19.263 +Solar,Solar Thermal,19.263 +Solar,Solar PV,59.901 +Solid,Agriculture,0.882 +Solid,Thermal generation,400.12 +Solid,Industry,46.477 +Thermal generation,Electricity grid,525.531 +Thermal generation,Losses,787.129 +Thermal generation,District heating,79.329 +Tidal,Electricity grid,9.452 +UK land based bioenergy,Bio-conversion,182.01 +Wave,Electricity grid,19.013 +Wind,Electricity grid,289.366`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/sequence.ts b/packages/examples/src/examples/sequence.ts new file mode 100644 index 000000000..7110e6f3d --- /dev/null +++ b/packages/examples/src/examples/sequence.ts @@ -0,0 +1,18 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'sequence', + name: 'Sequence Diagram', + description: 'Visualize interactions between objects over time', + examples: [ + { + title: 'Basic Sequence', + isDefault: true, + code: `sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great!`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/state.ts b/packages/examples/src/examples/state.ts new file mode 100644 index 000000000..bfe1c0600 --- /dev/null +++ b/packages/examples/src/examples/state.ts @@ -0,0 +1,20 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'stateDiagram', + name: 'State Diagram', + description: 'Visualize the states and transitions of a system', + examples: [ + { + title: 'Basic State Diagram', + code: `stateDiagram-v2 + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*]`, + isDefault: true, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/timeline.ts b/packages/examples/src/examples/timeline.ts new file mode 100644 index 000000000..87b604422 --- /dev/null +++ b/packages/examples/src/examples/timeline.ts @@ -0,0 +1,20 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'timeline', + name: 'Timeline Diagram', + description: 'Visualize events and milestones in chronological order', + examples: [ + { + title: 'Project Timeline', + isDefault: true, + code: `timeline + title History of Social Media Platform + 2002 : LinkedIn + 2004 : Facebook + : Google + 2005 : YouTube + 2006 : Twitter`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/treemap.ts b/packages/examples/src/examples/treemap.ts new file mode 100644 index 000000000..a37a95d43 --- /dev/null +++ b/packages/examples/src/examples/treemap.ts @@ -0,0 +1,21 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'treemap', + name: 'Treemap', + description: 'Visualize hierarchical data as nested rectangles', + examples: [ + { + title: 'Treemap', + isDefault: true, + code: `treemap-beta +"Section 1" + "Leaf 1.1": 12 + "Section 1.2" + "Leaf 1.2.1": 12 +"Section 2" + "Leaf 2.1": 20 + "Leaf 2.2": 25`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/user-journey.ts b/packages/examples/src/examples/user-journey.ts new file mode 100644 index 000000000..9c3ccec17 --- /dev/null +++ b/packages/examples/src/examples/user-journey.ts @@ -0,0 +1,22 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'journey', + name: 'User Journey Diagram', + description: 'Visualize user interactions and experiences with a system', + examples: [ + { + title: 'My Working Day', + isDefault: true, + code: `journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 5: Me`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/examples/xychart.ts b/packages/examples/src/examples/xychart.ts new file mode 100644 index 000000000..5fb692b46 --- /dev/null +++ b/packages/examples/src/examples/xychart.ts @@ -0,0 +1,19 @@ +import type { DiagramMetadata } from '../types.js'; + +export default { + id: 'xychart', + name: 'XY Chart', + description: 'Create scatter plots and line charts with customizable axes', + examples: [ + { + title: 'Sales Revenue', + isDefault: true, + code: `xychart-beta + title "Sales Revenue" + x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] + y-axis "Revenue (in $)" 4000 --> 11000 + bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] + line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`, + }, + ], +} satisfies DiagramMetadata; diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts new file mode 100644 index 000000000..eb9160bcf --- /dev/null +++ b/packages/examples/src/index.ts @@ -0,0 +1,48 @@ +import type { DiagramMetadata } from './types.js'; +import flowChart from './examples/flowchart.js'; +import c4 from './examples/c4.js'; +import kanban from './examples/kanban.js'; +import classDiagram from './examples/class.js'; +import sequenceDiagram from './examples/sequence.js'; +import pieDiagram from './examples/pie.js'; +import userJourneyDiagram from './examples/user-journey.js'; +import mindmapDiagram from './examples/mindmap.js'; +import requirementDiagram from './examples/requirement.js'; +import radarDiagram from './examples/radar.js'; +import stateDiagram from './examples/state.js'; +import erDiagram from './examples/er.js'; +import gitDiagram from './examples/git.js'; +import architectureDiagram from './examples/architecture.js'; +import xychartDiagram from './examples/xychart.js'; +import sankeyDiagram from './examples/sankey.js'; +import ganttDiagram from './examples/gantt.js'; +import timelineDiagram from './examples/timeline.js'; +import quadrantChart from './examples/quadrant-chart.js'; +import packetDiagram from './examples/packet.js'; +import blockDiagram from './examples/block.js'; +import treemapDiagram from './examples/treemap.js'; + +export const diagramData: DiagramMetadata[] = [ + flowChart, + c4, + kanban, + classDiagram, + sequenceDiagram, + pieDiagram, + userJourneyDiagram, + mindmapDiagram, + requirementDiagram, + radarDiagram, + stateDiagram, + erDiagram, + gitDiagram, + architectureDiagram, + xychartDiagram, + sankeyDiagram, + ganttDiagram, + timelineDiagram, + quadrantChart, + packetDiagram, + blockDiagram, + treemapDiagram, +]; diff --git a/packages/examples/src/types.ts b/packages/examples/src/types.ts new file mode 100644 index 000000000..1658f588c --- /dev/null +++ b/packages/examples/src/types.ts @@ -0,0 +1,12 @@ +export interface Example { + title: string; + code: string; + isDefault?: boolean; +} + +export interface DiagramMetadata { + id: string; + name: string; + description: string; + examples: Example[]; +} diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json new file mode 100644 index 000000000..320d730e1 --- /dev/null +++ b/packages/examples/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src", + "module": "Node16", + "moduleResolution": "Node16" + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] +} diff --git a/packages/mermaid-layout-elk/CHANGELOG.md b/packages/mermaid-layout-elk/CHANGELOG.md index 319d6b828..96b5d2fae 100644 --- a/packages/mermaid-layout-elk/CHANGELOG.md +++ b/packages/mermaid-layout-elk/CHANGELOG.md @@ -1,5 +1,14 @@ # @mermaid-js/layout-elk +## 0.1.8 + +### Patch Changes + +- [#6648](https://github.com/mermaid-js/mermaid/pull/6648) [`85c5b9b`](https://github.com/mermaid-js/mermaid/commit/85c5b9b4c064e2edabf21757c8215a1018d4d288) Thanks [@knsv](https://github.com/knsv)! - Make elk respect the order of nodes based from the code + +- Updated dependencies [[`97b79c3`](https://github.com/mermaid-js/mermaid/commit/97b79c3578a2004c63fa32f6d5e17bd8a536e13a), [`b1cf291`](https://github.com/mermaid-js/mermaid/commit/b1cf29127348602137552405e3300dee1697f0de), [`a4754ad`](https://github.com/mermaid-js/mermaid/commit/a4754ad195e70d52fbd46ef44f40797d2d215e41), [`2b05d7e`](https://github.com/mermaid-js/mermaid/commit/2b05d7e1edef635e6c80cb383b10ea0a89279f41), [`41e84b7`](https://github.com/mermaid-js/mermaid/commit/41e84b726a1f2df002b77c4b0071e2c15e47838e), [`d63d3bf`](https://github.com/mermaid-js/mermaid/commit/d63d3bf1e7596ac7eeb24ba06cbc7a70f9c8b070), [`aa6cb86`](https://github.com/mermaid-js/mermaid/commit/aa6cb86899968c65561eebfc1d54dd086b1518a2), [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde), [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038), [`c17277e`](https://github.com/mermaid-js/mermaid/commit/c17277e743b1c12e4134fba44c62a7d5885f2574), [`a1ba65c`](https://github.com/mermaid-js/mermaid/commit/a1ba65c0c08432ec36e772570c3a5899cb57c102), [`1ddaf10`](https://github.com/mermaid-js/mermaid/commit/1ddaf10b89d8c7311c5e10d466b42fa36b61210b), [`ca80f71`](https://github.com/mermaid-js/mermaid/commit/ca80f719eac86cf4c31392105d5d896f39b84bbc), [`bca6ed6`](https://github.com/mermaid-js/mermaid/commit/bca6ed67c3e0db910bf498fdd0fc0346c02d392b)]: + - mermaid@11.7.0 + ## 0.1.7 ### Patch Changes diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json index 2ce9bc278..023958c1f 100644 --- a/packages/mermaid-layout-elk/package.json +++ b/packages/mermaid-layout-elk/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/layout-elk", - "version": "0.1.7", + "version": "0.1.8", "description": "ELK layout engine for mermaid", "module": "dist/mermaid-layout-elk.core.mjs", "types": "dist/layouts.d.ts", diff --git a/packages/mermaid-layout-elk/src/find-common-ancestor.d.ts b/packages/mermaid-layout-elk/src/find-common-ancestor.d.ts new file mode 100644 index 000000000..3db494a1b --- /dev/null +++ b/packages/mermaid-layout-elk/src/find-common-ancestor.d.ts @@ -0,0 +1,5 @@ +export interface TreeData { + parentById: Record; + childrenById: Record; +} +export declare const findCommonAncestor: (id1: string, id2: string, { parentById }: TreeData) => string; diff --git a/packages/mermaid-layout-elk/src/render.d.ts b/packages/mermaid-layout-elk/src/render.d.ts new file mode 100644 index 000000000..af574df43 --- /dev/null +++ b/packages/mermaid-layout-elk/src/render.d.ts @@ -0,0 +1,2 @@ +import type { InternalHelpers, LayoutData, RenderOptions, SVG } from 'mermaid'; +export declare const render: (data4Layout: LayoutData, svg: SVG, { common, getConfig, insertCluster, insertEdge, insertEdgeLabel, insertMarkers, insertNode, interpolateToCurve, labelHelper, log, positionEdgeLabel, }: InternalHelpers, { algorithm }: RenderOptions) => Promise; diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 3dd04314a..ff366a105 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -2,6 +2,7 @@ import { curveLinear } from 'd3'; import ELK from 'elkjs/lib/elk.bundled.js'; import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid'; import { type TreeData, findCommonAncestor } from './find-common-ancestor.js'; +import type { NodeChildren } from 'mermaid/dist/rendering-util/types.js'; type Node = LayoutData['nodes'][number]; // Used to calculate distances in order to avoid floating number rounding issues when comparing floating numbers @@ -14,7 +15,7 @@ interface LabelData { } interface NodeWithVertex extends Omit { - children?: unknown[]; + children?: NodeChildren; labelData?: LabelData; domId?: Node['domId'] | SVGGroup | d3.Selection; } @@ -495,6 +496,7 @@ export const render = async ( id: 'root', layoutOptions: { 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', + 'elk.layered.crossingMinimization.forceNodeModelOrder': true, 'elk.algorithm': algorithm, 'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy, 'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges, @@ -509,7 +511,6 @@ export const render = async ( // 'spacing.edgeEdge': 10, // 'spacing.edgeEdgeBetweenLayers': 20, // 'spacing.nodeSelfLoop': 20, - // Tweaking options // 'elk.layered.nodePlacement.favorStraightEdges': true, // 'nodePlacement.feedbackEdges': true, diff --git a/packages/mermaid-zenuml/CHANGELOG.md b/packages/mermaid-zenuml/CHANGELOG.md new file mode 100644 index 000000000..57e8795a4 --- /dev/null +++ b/packages/mermaid-zenuml/CHANGELOG.md @@ -0,0 +1,14 @@ +# @mermaid-js/mermaid-zenuml + +## 0.2.1 + +### Patch Changes + +- [#6581](https://github.com/mermaid-js/mermaid/pull/6581) [`941bc69`](https://github.com/mermaid-js/mermaid/commit/941bc698350bd103b2a431ed8fed0c7b0d92fff0) Thanks [@MrCoder](https://github.com/MrCoder)! - Upgraded the dependency @zenuml/core + +- [#6319](https://github.com/mermaid-js/mermaid/pull/6319) [`9d06d8f`](https://github.com/mermaid-js/mermaid/commit/9d06d8f31e7f12af9e9e092214f907f2dc93ad75) Thanks [@renovate](https://github.com/apps/renovate)! - chore: bump minimum ZenUML version to 3.23.28 + +- [#5737](https://github.com/mermaid-js/mermaid/pull/5737) [`0ad44c1`](https://github.com/mermaid-js/mermaid/commit/0ad44c12feead9d20c6a870a49327ada58d6e657) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11 + +- Updated dependencies [[`97b79c3`](https://github.com/mermaid-js/mermaid/commit/97b79c3578a2004c63fa32f6d5e17bd8a536e13a), [`b1cf291`](https://github.com/mermaid-js/mermaid/commit/b1cf29127348602137552405e3300dee1697f0de), [`a4754ad`](https://github.com/mermaid-js/mermaid/commit/a4754ad195e70d52fbd46ef44f40797d2d215e41), [`2b05d7e`](https://github.com/mermaid-js/mermaid/commit/2b05d7e1edef635e6c80cb383b10ea0a89279f41), [`41e84b7`](https://github.com/mermaid-js/mermaid/commit/41e84b726a1f2df002b77c4b0071e2c15e47838e), [`d63d3bf`](https://github.com/mermaid-js/mermaid/commit/d63d3bf1e7596ac7eeb24ba06cbc7a70f9c8b070), [`aa6cb86`](https://github.com/mermaid-js/mermaid/commit/aa6cb86899968c65561eebfc1d54dd086b1518a2), [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde), [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038), [`c17277e`](https://github.com/mermaid-js/mermaid/commit/c17277e743b1c12e4134fba44c62a7d5885f2574), [`a1ba65c`](https://github.com/mermaid-js/mermaid/commit/a1ba65c0c08432ec36e772570c3a5899cb57c102), [`1ddaf10`](https://github.com/mermaid-js/mermaid/commit/1ddaf10b89d8c7311c5e10d466b42fa36b61210b), [`ca80f71`](https://github.com/mermaid-js/mermaid/commit/ca80f719eac86cf4c31392105d5d896f39b84bbc), [`bca6ed6`](https://github.com/mermaid-js/mermaid/commit/bca6ed67c3e0db910bf498fdd0fc0346c02d392b)]: + - mermaid@11.7.0 diff --git a/packages/mermaid-zenuml/README.md b/packages/mermaid-zenuml/README.md deleted file mode 120000 index 4300aecbe..000000000 --- a/packages/mermaid-zenuml/README.md +++ /dev/null @@ -1 +0,0 @@ -../mermaid/src/docs/syntax/zenuml.md diff --git a/packages/mermaid-zenuml/README.md b/packages/mermaid-zenuml/README.md new file mode 100644 index 000000000..b26295807 --- /dev/null +++ b/packages/mermaid-zenuml/README.md @@ -0,0 +1,384 @@ +# @mermaid-js/mermaid-zenuml + +MermaidJS plugin for ZenUML integration - A powerful sequence diagram rendering engine. + +> 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 +zenuml + BookLibService.Borrow(id) { + User = Session.GetUser() + if(User.isActive) { + try { + BookRepository.Update(id, onLoan, User) + receipt = new Receipt(id, dueDate) + } catch (BookNotFoundException) { + ErrorService.onException(BookNotFoundException) + } finally { + Connection.close() + } + } + return receipt + } +``` + +## Installation + +### With bundlers + +```sh +npm install @mermaid-js/mermaid-zenuml +``` + +```ts +import mermaid from 'mermaid'; +import zenuml from '@mermaid-js/mermaid-zenuml'; + +await mermaid.registerExternalDiagrams([zenuml]); +``` + +### With CDN + +```html + +``` + +> [!NOTE] +> ZenUML uses experimental lazy loading & async rendering features which could change in the future. + +## Basic Usage + +Once the plugin is registered, you can create ZenUML diagrams using the `zenuml` syntax: + +```mermaid +zenuml + Controller.Get(id) { + Service.Get(id) { + item = Repository.Get(id) + if(item) { + return item + } else { + return null + } + } + return result + } +``` + +## ZenUML Syntax Reference + +### 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 +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 +zenuml + title Annotators + @Actor Alice + @Database Bob + Alice->Bob: Hi Bob + Bob->Alice: Hi Alice +``` + +Available annotators include: + +- `@Actor` - Human figure +- `@Database` - Database symbol +- `@Boundary` - Boundary symbol +- `@Control` - Control symbol +- `@Entity` - Entity symbol +- `@Queue` - Queue symbol + +### Aliases + +The participants can have a convenient identifier and a descriptive label. + +```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 +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 +zenuml + title Async message + Alice->Bob: How are you? +``` + +### Creation message + +We use `new` keyword to create an object. + +```mermaid +zenuml + new A1 + new A2(with, parameters) +``` + +### Reply message + +There are three ways to express a reply message: + +```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 +zenuml + title Reply message + Client->A.method() { + B.method() { + if(condition) { + return x1 + // return early + @return + A->Client: x11 + } + } + return x2 + } +``` + +## Advanced Features + +### Nesting + +Sync messages and Creation messages are naturally nestable with `{}`. + +```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. + +```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... +} +``` + +Example: + +```mermaid +zenuml + Alice->John: Hello John, how are you? + while(true) { + John->Alice: Great! + } +``` + +### Alt (Alternative paths) + +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... +} +``` + +Example: + +```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 (Optional) + +It is possible to render an `opt` fragment. This is done by the notation + +```zenuml +opt { + ...statements... +} +``` + +Example: + +```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 +} +``` + +Example: + +```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... +} +``` + +Example: + +```mermaid +zenuml + try { + Consumer->API: Book something + API->BookingService: Start booking process + } catch { + API->Consumer: show failure + } finally { + API->BookingService: rollback status + } +``` + +## Contributing + +This package is part of the [Mermaid](https://github.com/mermaid-js/mermaid) project. See the main repository for contributing guidelines. + +## Contributors + +- [Peng Xiao](https://github.com/MrCoder) +- [Sidharth Vinod](https://sidharth.dev) +- [Dong Cai](https://github.com/dontry) + +## License + +MIT + +## Links + +- [ZenUML Official Website](https://zenuml.com) +- [Mermaid Documentation](https://mermaid.js.org) +- [GitHub Repository](https://github.com/mermaid-js/mermaid) diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json index e70d62197..ec7b9486d 100644 --- a/packages/mermaid-zenuml/package.json +++ b/packages/mermaid-zenuml/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/mermaid-zenuml", - "version": "0.3.0", + "version": "0.2.1", "description": "MermaidJS plugin for ZenUML integration", "module": "dist/mermaid-zenuml.core.mjs", "types": "dist/detector.d.ts", @@ -33,7 +33,7 @@ ], "license": "MIT", "dependencies": { - "@zenuml/core": "^3.31.1" + "@zenuml/core": "^3.35.2" }, "devDependencies": { "mermaid": "workspace:^" diff --git a/packages/mermaid-zenuml/src/zenuml.d.ts b/packages/mermaid-zenuml/src/zenuml.d.ts new file mode 100644 index 000000000..eac411bd2 --- /dev/null +++ b/packages/mermaid-zenuml/src/zenuml.d.ts @@ -0,0 +1,11 @@ +declare module '@zenuml/core' { + interface RenderOptions { + theme?: string; + mode?: string; + } + + export default class ZenUml { + constructor(container: Element); + render(text: string, options?: RenderOptions): Promise; + } +} diff --git a/packages/mermaid-zenuml/src/zenumlRenderer.ts b/packages/mermaid-zenuml/src/zenumlRenderer.ts index f9dd57996..42ec8fcb4 100644 --- a/packages/mermaid-zenuml/src/zenumlRenderer.ts +++ b/packages/mermaid-zenuml/src/zenumlRenderer.ts @@ -53,7 +53,6 @@ export const draw = async function (text: string, id: string) { 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: 'default', mode: 'static' }); diff --git a/packages/mermaid/CHANGELOG.md b/packages/mermaid/CHANGELOG.md index b57b83b6a..49756233a 100644 --- a/packages/mermaid/CHANGELOG.md +++ b/packages/mermaid/CHANGELOG.md @@ -1,5 +1,87 @@ # mermaid +## 11.9.0 + +### Minor Changes + +- [#6453](https://github.com/mermaid-js/mermaid/pull/6453) [`5acbd7e`](https://github.com/mermaid-js/mermaid/commit/5acbd7e762469d9d89a9c77faf6617ee13367f3a) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Add `getRegisteredDiagramsMetadata` to `mermaid`, which returns all the registered diagram IDs in mermaid + +### Patch Changes + +- [#6738](https://github.com/mermaid-js/mermaid/pull/6738) [`d90634b`](https://github.com/mermaid-js/mermaid/commit/d90634bf2b09e586b055729e07e9a1a31b21827c) Thanks [@shubham-mermaid](https://github.com/shubham-mermaid)! - chore: Updated TreeMapDB to use class based approach + +- [#6510](https://github.com/mermaid-js/mermaid/pull/6510) [`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Move packet diagram out of beta + +- [#6747](https://github.com/mermaid-js/mermaid/pull/6747) [`3e3ae08`](https://github.com/mermaid-js/mermaid/commit/3e3ae089305e1c7b9948b9e149eba6854fe7f2d6) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: adjust sequence diagram title positioning to prevent overlap with top border in Safari + +- [#6751](https://github.com/mermaid-js/mermaid/pull/6751) [`d3e2be3`](https://github.com/mermaid-js/mermaid/commit/d3e2be35be066adeb7fd502b4a24c223c3b53947) Thanks [@darshanr0107](https://github.com/darshanr0107)! - chore: Update MindmapDB to use class based approach + +- [#6715](https://github.com/mermaid-js/mermaid/pull/6715) [`637680d`](https://github.com/mermaid-js/mermaid/commit/637680d4d9e39b4f8cb6f05b4cb261e8f5693ac3) Thanks [@Syn3ugar](https://github.com/Syn3ugar)! - fix(timeline): fix loading `leftMargin` from config + + The `timeline.leftMargin` config value should now correctly control the size of the left margin, instead of being ignored. + +- Updated dependencies [[`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6)]: + - @mermaid-js/parser@0.6.2 + +## 11.8.1 + +### Patch Changes + +- Updated dependencies [[`0da2922`](https://github.com/mermaid-js/mermaid/commit/0da2922ee7f47959e324ec10d3d21ee70594f557)]: + - @mermaid-js/parser@0.6.1 + +## 11.8.0 + +### Minor Changes + +- [#6590](https://github.com/mermaid-js/mermaid/pull/6590) [`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee) Thanks [@knsv](https://github.com/knsv)! - Adding support for the new diagram type nested treemap + +### Patch Changes + +- [#6707](https://github.com/mermaid-js/mermaid/pull/6707) [`592c5bb`](https://github.com/mermaid-js/mermaid/commit/592c5bb880c3b942710a2878d386bcb3eb35c137) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Log a warning when duplicate commit IDs are encountered in gitGraph to help identify and debug rendering issues caused by non-unique IDs. + +- Updated dependencies [[`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee)]: + - @mermaid-js/parser@0.6.0 + +## 11.7.0 + +### Minor Changes + +- [#6479](https://github.com/mermaid-js/mermaid/pull/6479) [`97b79c3`](https://github.com/mermaid-js/mermaid/commit/97b79c3578a2004c63fa32f6d5e17bd8a536e13a) Thanks [@monicanguyen25](https://github.com/monicanguyen25)! - feat: Add Vertical Line To Gantt Plot At Specified Time + +- [#6225](https://github.com/mermaid-js/mermaid/pull/6225) [`41e84b7`](https://github.com/mermaid-js/mermaid/commit/41e84b726a1f2df002b77c4b0071e2c15e47838e) Thanks [@Shahir-47](https://github.com/Shahir-47)! - feat: Add support for styling Journey Diagram title (color, font-family, and font-size) + +- [#6423](https://github.com/mermaid-js/mermaid/pull/6423) [`aa6cb86`](https://github.com/mermaid-js/mermaid/commit/aa6cb86899968c65561eebfc1d54dd086b1518a2) Thanks [@BambioGaming](https://github.com/BambioGaming)! - Added support for the click directive in stateDiagram syntax + +- [#5980](https://github.com/mermaid-js/mermaid/pull/5980) [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde) Thanks [@BryanCrotazGivEnergy](https://github.com/BryanCrotazGivEnergy)! - feat: Add shorter `+: Label` syntax in packet diagram + +- [#6523](https://github.com/mermaid-js/mermaid/pull/6523) [`c17277e`](https://github.com/mermaid-js/mermaid/commit/c17277e743b1c12e4134fba44c62a7d5885f2574) Thanks [@NourBenz](https://github.com/NourBenz)! - fix: allow sequence diagram arrows with a trailing colon but no message + +- [#6475](https://github.com/mermaid-js/mermaid/pull/6475) [`a1ba65c`](https://github.com/mermaid-js/mermaid/commit/a1ba65c0c08432ec36e772570c3a5899cb57c102) Thanks [@Shahir-47](https://github.com/Shahir-47)! - feat: Dynamically Render Data Labels Within Bar Charts + +### Patch Changes + +- [#6588](https://github.com/mermaid-js/mermaid/pull/6588) [`b1cf291`](https://github.com/mermaid-js/mermaid/commit/b1cf29127348602137552405e3300dee1697f0de) Thanks [@omkarht](https://github.com/omkarht)! - Fix stroke styles for ER diagram to correctly apply path and row-specific styles + +- [#6296](https://github.com/mermaid-js/mermaid/pull/6296) [`a4754ad`](https://github.com/mermaid-js/mermaid/commit/a4754ad195e70d52fbd46ef44f40797d2d215e41) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Convert StateDB into TypeScript + +- [#6463](https://github.com/mermaid-js/mermaid/pull/6463) [`2b05d7e`](https://github.com/mermaid-js/mermaid/commit/2b05d7e1edef635e6c80cb383b10ea0a89279f41) Thanks [@AaronMoat](https://github.com/AaronMoat)! - fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams + +- [#6282](https://github.com/mermaid-js/mermaid/pull/6282) [`d63d3bf`](https://github.com/mermaid-js/mermaid/commit/d63d3bf1e7596ac7eeb24ba06cbc7a70f9c8b070) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`. + +- [#6407](https://github.com/mermaid-js/mermaid/pull/6407) [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038) Thanks [@thomascizeron](https://github.com/thomascizeron)! - Refactor grammar so that title don't break Architecture Diagrams + +- [#6343](https://github.com/mermaid-js/mermaid/pull/6343) [`1ddaf10`](https://github.com/mermaid-js/mermaid/commit/1ddaf10b89d8c7311c5e10d466b42fa36b61210b) Thanks [@jeswr](https://github.com/jeswr)! - fix: allow colons in events + +- [#6616](https://github.com/mermaid-js/mermaid/pull/6616) [`ca80f71`](https://github.com/mermaid-js/mermaid/commit/ca80f719eac86cf4c31392105d5d896f39b84bbc) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(timeline): ensure consistent vertical line lengths with visible arrowheads + + Fixed timeline diagrams where vertical dashed lines from tasks had inconsistent lengths. All vertical lines now extend to the same depth regardless of the number of events in each column, with sufficient padding to clearly display both the dashed line pattern and complete arrowheads. + +- [#6566](https://github.com/mermaid-js/mermaid/pull/6566) [`bca6ed6`](https://github.com/mermaid-js/mermaid/commit/bca6ed67c3e0db910bf498fdd0fc0346c02d392b) Thanks [@arpitjain099](https://github.com/arpitjain099)! - fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped. + +- Updated dependencies [[`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde), [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038)]: + - @mermaid-js/parser@0.5.0 + ## 11.6.0 ### Minor Changes @@ -199,3 +281,1005 @@ - Updated dependencies [[`5013484`](https://github.com/mermaid-js/mermaid/commit/50134849246141ec400e33e08c12c10539b84de9)]: - @mermaid-js/parser@0.1.0 + +## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0) + +### Mermaid is ESM only! + +We've dropped CJS support. So, you will have to update your import scripts as follows. + +```html + +``` + +You can keep using v9 by adding the `@9` in the CDN URL. + +```diff +- ++ +``` + +### mermaid.render is async and doesn't accept callbacks + +```js +// < v10 +mermaid.render('id', 'graph TD;\nA-->B', (svg, bindFunctions) => { + element.innerHTML = svg; + if (bindFunctions) { + bindFunctions(element); + } +}); + +// Shorter syntax +if (bindFunctions) { + bindFunctions(element); +} +// can be replaced with the `?.` shorthand +bindFunctions?.(element); + +// >= v10 with async/await +const { svg, bindFunctions } = await mermaid.render('id', 'graph TD;\nA-->B'); +element.innerHTML = svg; +bindFunctions?.(element); + +// >= v10 with promise.then +mermaid.render('id', 'graph TD;A-->B').then(({ svg, bindFunctions }) => { + element.innerHTML = svg; + bindFunctions?.(element); +}); +``` + +### mermaid.parse is async and ParseError is removed + +```js +// < v10 +mermaid.parse(text, parseError); + +//>= v10 +await mermaid.parse(text).catch(parseError); +// or +try { + await mermaid.parse(text); +} catch (err) { + parseError(err); +} +``` + +### Init deprecated and InitThrowsErrors removed + +The config passed to `init` was not being used earlier. +It will now be used. +The `init` function is deprecated and will be removed in the next major release. +init currently works as a wrapper to `initialize` and `run`. + +```js +// < v10 +mermaid.init(config, selector, cb); + +//>= v10 +mermaid.initialize(config); +mermaid.run({ + querySelector: selector, + postRenderCallback: cb, + suppressErrors: true, +}); +``` + +```js +// < v10 +mermaid.initThrowsErrors(config, selector, cb); + +//>= v10 +mermaid.initialize(config); +mermaid.run({ + querySelector: selector, + postRenderCallback: cb, + suppressErrors: false, +}); +``` + +// TODO: Populate changelog pre v10 + +- Config has a lot of changes +- globalReset resets to `defaultConfig` instead of current config. Use `reset` instead. + +## [Unreleased](https://github.com/knsv/mermaid/tree/HEAD) + +[Full Changelog](https://github.com/knsv/mermaid/compare/8.2.0...HEAD) + +**Closed issues:** + +- Cross-Site Scripting:DOM - Issue [\#847](https://github.com/knsv/mermaid/issues/847) + +## [8.2.0](https://github.com/knsv/mermaid/tree/8.2.0) (2019-07-17) + +[Full Changelog](https://github.com/knsv/mermaid/compare/8.1.0...8.2.0) + +**Closed issues:** + +- Create issue templates [\#871](https://github.com/knsv/mermaid/issues/871) +- cross site scripting in mermaid [\#869](https://github.com/knsv/mermaid/issues/869) +- Make Gantt chart date inclusive [\#868](https://github.com/knsv/mermaid/issues/868) +- CHANGELOG missing updates for all versions since 0.4.0 [\#865](https://github.com/knsv/mermaid/issues/865) +- 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) +- found 1 high severity vulnerability [\#839](https://github.com/knsv/mermaid/issues/839) +- Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830) +- Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829) +- Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826) +- typora [\#823](https://github.com/knsv/mermaid/issues/823) +- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815) +- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814) +- How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813) +- How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812) +- no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809) +- uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807) +- Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806) +- how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805) +- UOEProcessShow [\#801](https://github.com/knsv/mermaid/issues/801) +- Why the use of code blocks? [\#799](https://github.com/knsv/mermaid/issues/799) +- fixing class diagram [\#794](https://github.com/knsv/mermaid/issues/794) +- Autonumber support in sequence diagrams [\#782](https://github.com/knsv/mermaid/issues/782) +- MomentJS dependency [\#781](https://github.com/knsv/mermaid/issues/781) +- Feature : Can we color code the flow/arrows [\#766](https://github.com/knsv/mermaid/issues/766) +- Is there any way to convert flowchart.js code to mermaid code [\#726](https://github.com/knsv/mermaid/issues/726) +- Fixed width of nodes [\#653](https://github.com/knsv/mermaid/issues/653) +- Inline comment [\#650](https://github.com/knsv/mermaid/issues/650) +- alt attribute of img tag in HTML [\#619](https://github.com/knsv/mermaid/issues/619) +- Just wanted to say : THANKS ! [\#618](https://github.com/knsv/mermaid/issues/618) +- "animation" [\#446](https://github.com/knsv/mermaid/issues/446) + +**Merged pull requests:** + +- Trimming whitespace after participant id [\#882](https://github.com/knsv/mermaid/pull/882) ([IOrlandoni](https://github.com/IOrlandoni)) +- chore\(deps\): bump atob from 2.0.3 to 2.1.2 [\#881](https://github.com/knsv/mermaid/pull/881) ([dependabot[bot]](https://github.com/apps/dependabot)) +- chore\(deps\): bump fstream from 1.0.11 to 1.0.12 [\#880](https://github.com/knsv/mermaid/pull/880) ([dependabot[bot]](https://github.com/apps/dependabot)) +- chore\(deps\): bump js-yaml from 3.12.0 to 3.13.1 [\#879](https://github.com/knsv/mermaid/pull/879) ([dependabot[bot]](https://github.com/apps/dependabot)) +- I847 cross site scripting [\#878](https://github.com/knsv/mermaid/pull/878) ([knsv](https://github.com/knsv)) +- Bump lodash.mergewith from 4.6.1 to 4.6.2 [\#877](https://github.com/knsv/mermaid/pull/877) ([dependabot[bot]](https://github.com/apps/dependabot)) +- Adding docs into core repo again [\#876](https://github.com/knsv/mermaid/pull/876) ([knsv](https://github.com/knsv)) +- Bump lodash from 4.17.11 to 4.17.13 [\#875](https://github.com/knsv/mermaid/pull/875) ([dependabot[bot]](https://github.com/apps/dependabot)) +- feat\(stale.yml\): update issue label and bot comment [\#874](https://github.com/knsv/mermaid/pull/874) ([ThePenguin1140](https://github.com/ThePenguin1140)) +- Feature/allow inclusive enddates [\#872](https://github.com/knsv/mermaid/pull/872) ([ThePenguin1140](https://github.com/ThePenguin1140)) +- Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf)) + +## [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) + +**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 can't 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 doesnt 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 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) +- Live editor sticky sidebar [\#414](https://github.com/knsv/mermaid/issues/414) +- 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) +- mermaid -v filename.mmd gives You must specify at least one source file. [\#328](https://github.com/knsv/mermaid/issues/328) +- 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) +- Theme for dark background [\#301](https://github.com/knsv/mermaid/issues/301) +- 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) +- node click is not effective [\#272](https://github.com/knsv/mermaid/issues/272) +- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271) +- \[Feature request\] gantt diagram axis format [\#269](https://github.com/knsv/mermaid/issues/269) +- Not Able to See Labels even htmlLabels:false added [\#268](https://github.com/knsv/mermaid/issues/268) +- 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 installion [\#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) +- Implement render function for server side rendering using phantomjs [\#169](https://github.com/knsv/mermaid/issues/169) +- Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50) +- Graphviz DOT syntax [\#5](https://github.com/knsv/mermaid/issues/5) + +**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)) +- Support Multi-line Actor Descriptions [\#764](https://github.com/knsv/mermaid/pull/764) ([watsoncj](https://github.com/watsoncj)) +- 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)) +- Sequence numbers [\#722](https://github.com/knsv/mermaid/pull/722) ([paulbland](https://github.com/paulbland)) +- 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:** + +- 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) + +**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) +- 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) +- 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)) +- adde 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 https://github.com/raghur/mermaid-filter 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 flowchat? [\#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) + +**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) +- Live Editor: Permalink address not being parsed [\#202](https://github.com/knsv/mermaid/issues/202) +- Add download SVG link to the live editor [\#144](https://github.com/knsv/mermaid/issues/144) + +**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) + +**Closed issues:** + +- Weird bug in live editor when using words with substring `end` [\#184](https://github.com/knsv/mermaid/issues/184) +- Custom icons [\#15](https://github.com/knsv/mermaid/issues/15) +- 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) +- Set log level from mermaid configuration [\#220](https://github.com/knsv/mermaid/issues/220) +- 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) +- Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159) +- comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141) +- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124) +- Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123) +- Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49) + +**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) + +**Closed issues:** + +- Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218) +- Render mermaid code on websites? [\#215](https://github.com/knsv/mermaid/issues/215) +- Brackets in a node with text? [\#213](https://github.com/knsv/mermaid/issues/213) +- 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 with 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) +- UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154) +- Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153) +- Support PlantUML syntax [\#149](https://github.com/knsv/mermaid/issues/149) +- 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) +- Support for hyperlink and tooltip [\#34](https://github.com/knsv/mermaid/issues/34) + +**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) + +**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) +- To SVG Export [\#146](https://github.com/knsv/mermaid/issues/146) +- `setTimeout` with clusters problematic with programmatic edits and no callback [\#133](https://github.com/knsv/mermaid/issues/133) +- Possibility to set the width of the generated flowchart [\#129](https://github.com/knsv/mermaid/issues/129) +- flowchart - styling of edges via css overrides specific styles set in the graph definition [\#128](https://github.com/knsv/mermaid/issues/128) +- 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) +- Mix horizontal and vertical graph [\#68](https://github.com/knsv/mermaid/issues/68) +- How to get started with this project ? [\#64](https://github.com/knsv/mermaid/issues/64) +- 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) + +**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) + +**Closed issues:** + +- it can not work where graph TD contains chinese character [\#166](https://github.com/knsv/mermaid/issues/166) +- Broken Examples [\#163](https://github.com/knsv/mermaid/issues/163) +- 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 a css file, mermaid.css, with default styling [\#122](https://github.com/knsv/mermaid/issues/122) +- 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) +- 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) + +**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) + +**Closed issues:** + +- subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121) +- Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110) +- Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99) +- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82) +- NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23) +- Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3) + +## [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) + +**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) +- 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) +- Make the new graph declaration more visual [\#40](https://github.com/knsv/mermaid/issues/40) +- Generating SVG text blob for use in Node [\#2](https://github.com/knsv/mermaid/issues/2) + +**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) + +**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) +- Support for dotted links [\#26](https://github.com/knsv/mermaid/issues/26) + +**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) + +**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) +- Make link text look like it is on the line [\#53](https://github.com/knsv/mermaid/issues/53) + +**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) + +**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) +- Neural Networks [\#39](https://github.com/knsv/mermaid/issues/39) +- Support for sequence diagrams [\#16](https://github.com/knsv/mermaid/issues/16) +- Client utility for mermaid [\#6](https://github.com/knsv/mermaid/issues/6) + +**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) + +**Closed issues:** + +- Consider shipping a standalone executable [\#65](https://github.com/knsv/mermaid/issues/65) +- Trailing whitespace at the end of lines is not ignored [\#55](https://github.com/knsv/mermaid/issues/55) +- How do I do comments? [\#47](https://github.com/knsv/mermaid/issues/47) +- This characters failed the lexical parsing [\#46](https://github.com/knsv/mermaid/issues/46) +- tutorial for creating new type of graph/layout [\#44](https://github.com/knsv/mermaid/issues/44) +- Improve readability with new line as terminator and whitespace [\#38](https://github.com/knsv/mermaid/issues/38) +- 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) + +**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) +- Create image file via CLI? [\#48](https://github.com/knsv/mermaid/issues/48) +- 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) +- Lines routed outside visible area [\#19](https://github.com/knsv/mermaid/issues/19) + +**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 readablity 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) + +**Closed issues:** + +- Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30) +- Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25) +- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21) +- Better label text support [\#18](https://github.com/knsv/mermaid/issues/18) +- Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8) + +**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) + +**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) +- Container support [\#27](https://github.com/knsv/mermaid/issues/27) +- can not support Chinese description [\#20](https://github.com/knsv/mermaid/issues/20) +- Node Label text mistaken for Direction [\#17](https://github.com/knsv/mermaid/issues/17) +- Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9) +- Publish to NPM [\#7](https://github.com/knsv/mermaid/issues/7) + +## [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/packages/mermaid/package.json b/packages/mermaid/package.json index c3b3af8fb..9b888760c 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "11.6.0", + "version": "11.9.0", "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.", "type": "module", "module": "./dist/mermaid.core.mjs", @@ -79,7 +79,7 @@ "dagre-d3-es": "7.0.11", "dayjs": "^1.11.13", "dompurify": "^3.2.5", - "katex": "^0.16.9", + "katex": "^0.16.22", "khroma": "^2.1.0", "lodash-es": "^4.17.21", "marked": "^15.0.7", @@ -106,13 +106,14 @@ "@types/stylis": "^4.2.7", "@types/uuid": "^10.0.0", "ajv": "^8.17.1", - "chokidar": "^3.6.0", + "canvas": "^3.1.0", + "chokidar": "3.6.0", "concurrently": "^9.1.2", "csstree-validator": "^4.0.1", "globby": "^14.0.2", "jison": "^0.4.18", "js-base64": "^3.7.7", - "jsdom": "^26.0.0", + "jsdom": "^26.1.0", "json-schema-to-typescript": "^15.0.4", "micromatch": "^4.0.8", "path-browserify": "^1.0.1", diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts index f5998c475..8e4a268df 100644 --- a/packages/mermaid/src/accessibility.spec.ts +++ b/packages/mermaid/src/accessibility.spec.ts @@ -1,28 +1,25 @@ -import { MockedD3 } from './tests/MockedD3.js'; -import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js'; -import type { D3Element } from './types.js'; +import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js'; +import { ensureNodeFromSelector, jsdomIt } from './tests/util.js'; +import { expect } from 'vitest'; describe('accessibility', () => { - const fauxSvgNode: MockedD3 = new MockedD3(); - describe('setA11yDiagramInfo', () => { - it('should set svg element role to "graphics-document document"', () => { - const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); - setA11yDiagramInfo(fauxSvgNode, 'flowchart'); - expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document'); + jsdomIt('should set svg element role to "graphics-document document"', ({ svg }) => { + setA11yDiagramInfo(svg, 'flowchart'); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('role')).toBe('graphics-document document'); }); - it('should set aria-roledescription to the diagram type', () => { - const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); - setA11yDiagramInfo(fauxSvgNode, 'flowchart'); - expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart'); + jsdomIt('should set aria-roledescription to the diagram type', ({ svg }) => { + setA11yDiagramInfo(svg, 'flowchart'); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-roledescription')).toBe('flowchart'); }); - it('should not set aria-roledescription if the diagram type is empty', () => { - const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); - setA11yDiagramInfo(fauxSvgNode, ''); - expect(svgAttrSpy).toHaveBeenCalledTimes(1); - expect(svgAttrSpy).toHaveBeenCalledWith('role', expect.anything()); // only called to set the role + jsdomIt('should not set aria-roledescription if the diagram type is empty', ({ svg }) => { + setA11yDiagramInfo(svg, ''); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-roledescription')).toBeNull(); }); }); @@ -39,115 +36,78 @@ describe('accessibility', () => { expect(noInsertAttrSpy).not.toHaveBeenCalled(); }); - // convenience functions to DRY up the spec - - function expectAriaLabelledByItTitleId( - svgD3Node: D3Element, - title: string | undefined, - desc: string | undefined, - givenId: string - ): void { - const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); - addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); - expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`); - } - - function expectAriaDescribedByItDescId( - svgD3Node: D3Element, - title: string | undefined, - desc: string | undefined, - givenId: string - ): void { - const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node); - addSVGa11yTitleDescription(svgD3Node, title, desc, givenId); - expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`); - } - - function a11yTitleTagInserted( - svgD3Node: D3Element, - title: string | undefined, - desc: string | undefined, - givenId: string, - callNumber: number - ): void { - a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title); - } - - function a11yDescTagInserted( - svgD3Node: D3Element, - title: string | undefined, - desc: string | undefined, - givenId: string, - callNumber: number - ): void { - a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc); - } - - function a11yTagInserted( - _svgD3Node: D3Element, - title: string | undefined, - desc: string | undefined, - givenId: string, - callNumber: number, - expectedPrefix: string, - expectedText: string | undefined - ): void { - const fauxInsertedD3: MockedD3 = new MockedD3(); - const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3); - const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3); - const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text'); - - addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId); - expect(svginsertpy).toHaveBeenCalledWith(expectedPrefix, ':first-child'); - expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`); - expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText); - } - describe('with a11y title', () => { const a11yTitle = 'a11y title'; describe('with a11y description', () => { const a11yDesc = 'a11y description'; - it('should set aria-labelledby to the title id inserted as a child', () => { - expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + jsdomIt('should set aria-labelledby to the title id inserted as a child', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-labelledby')).toBe(`chart-title-${givenId}`); }); - it('should set aria-describedby to the description id inserted as a child', () => { - expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); - }); + jsdomIt( + 'should set aria-describedby to the description id inserted as a child', + ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-describedby')).toBe(`chart-desc-${givenId}`); + } + ); - it('should insert title tag as the first child with the text set to the accTitle given', () => { - a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2); - }); + jsdomIt( + 'should insert title tag as the first child with the text set to the accTitle given', + ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const titleNode = ensureNodeFromSelector('title', svgNode); + expect(titleNode?.innerHTML).toBe(a11yTitle); + } + ); - it('should insert desc tag as the 2nd child with the text set to accDescription given', () => { - a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); - }); + jsdomIt( + 'should insert desc tag as the 2nd child with the text set to accDescription given', + ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const descNode = ensureNodeFromSelector('desc', svgNode); + expect(descNode?.innerHTML).toBe(a11yDesc); + } + ); }); - describe(`without a11y description`, () => { + describe(`without a11y description`, {}, () => { const a11yDesc = undefined; - it('should set aria-labelledby to the title id inserted as a child', () => { - expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId); + jsdomIt('should set aria-labelledby to the title id inserted as a child', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-labelledby')).toBe(`chart-title-${givenId}`); }); - it('should not set aria-describedby', () => { - const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything()); + jsdomIt('should not set aria-describedby', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-describedby')).toBeNull(); }); - it('should insert title tag as the first child with the text set to the accTitle given', () => { - a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); - }); + jsdomIt( + 'should insert title tag as the first child with the text set to the accTitle given', + ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const titleNode = ensureNodeFromSelector('title', svgNode); + expect(titleNode?.innerHTML).toBe(a11yTitle); + } + ); - it('should not insert description tag', () => { - const fauxTitle: MockedD3 = new MockedD3(); - const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child'); + jsdomIt('should not insert description tag', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const descNode = svgNode.querySelector('desc'); + expect(descNode).toBeNull(); }); }); }); @@ -158,55 +118,66 @@ describe('accessibility', () => { describe('with a11y description', () => { const a11yDesc = 'a11y description'; - it('should not set aria-labelledby', () => { - const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything()); + jsdomIt('should not set aria-labelledby', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-labelledby')).toBeNull(); }); - it('should not insert title tag', () => { - const fauxTitle: MockedD3 = new MockedD3(); - const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child'); + jsdomIt('should not insert title tag', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const titleNode = svgNode.querySelector('title'); + expect(titleNode).toBeNull(); }); - it('should set aria-describedby to the description id inserted as a child', () => { - expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId); - }); + jsdomIt( + 'should set aria-describedby to the description id inserted as a child', + ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-describedby')).toBe(`chart-desc-${givenId}`); + } + ); - it('should insert desc tag as the 2nd child with the text set to accDescription given', () => { - a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1); - }); + jsdomIt( + 'should insert desc tag as the 2nd child with the text set to accDescription given', + ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const descNode = ensureNodeFromSelector('desc', svgNode); + expect(descNode?.innerHTML).toBe(a11yDesc); + } + ); }); describe('without a11y description', () => { const a11yDesc = undefined; - it('should not set aria-labelledby', () => { - const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything()); + jsdomIt('should not set aria-labelledby', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-labelledby')).toBeNull(); }); - it('should not set aria-describedby', () => { - const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything()); + jsdomIt('should not set aria-describedby', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + expect(svgNode.getAttribute('aria-describedby')).toBeNull(); }); - it('should not insert title tag', () => { - const fauxTitle: MockedD3 = new MockedD3(); - const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child'); + jsdomIt('should not insert title tag', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const titleNode = svgNode.querySelector('title'); + expect(titleNode).toBeNull(); }); - it('should not insert description tag', () => { - const fauxDesc: MockedD3 = new MockedD3(); - const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc); - addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId); - expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child'); + jsdomIt('should not insert description tag', ({ svg }) => { + addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId); + const svgNode = ensureNodeFromSelector('svg'); + const descNode = svgNode.querySelector('desc'); + expect(descNode).toBeNull(); }); }); }); diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 11ff581c1..468f8e192 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -262,6 +262,18 @@ const config: RequiredDeep = { radar: { ...defaultConfigJson.radar, }, + treemap: { + useMaxWidth: true, + padding: 10, + diagramPadding: 8, + showValues: true, + nodeWidth: 100, + nodeHeight: 40, + borderWidth: 1, + valueFontSize: 12, + labelFontSize: 14, + valueFormat: ',', + }, }; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index d18aab957..97b9852ff 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -27,6 +27,7 @@ import block from '../diagrams/block/blockDetector.js'; import architecture from '../diagrams/architecture/architectureDetector.js'; import { registerLazyLoadedDiagrams } from './detectType.js'; import { registerDiagram } from './diagramAPI.js'; +import { treemap } from '../diagrams/treemap/detector.js'; import '../type.d.ts'; let hasLoadedDiagrams = false; @@ -99,6 +100,7 @@ export const addDiagrams = () => { packet, xychart, block, - radar + radar, + treemap ); }; diff --git a/packages/mermaid/src/diagram-api/loadDiagram.ts b/packages/mermaid/src/diagram-api/loadDiagram.ts index 1ec01ec06..b3c1cdb57 100644 --- a/packages/mermaid/src/diagram-api/loadDiagram.ts +++ b/packages/mermaid/src/diagram-api/loadDiagram.ts @@ -7,20 +7,21 @@ export const loadRegisteredDiagrams = async () => { // Load all lazy loaded diagrams in parallel const results = await Promise.allSettled( Object.entries(detectors).map(async ([key, { detector, loader }]) => { - if (loader) { + if (!loader) { + return; + } + try { + getDiagram(key); + } catch { try { - getDiagram(key); - } catch { - try { - // Register diagram if it is not already registered - const { diagram, id } = await loader(); - registerDiagram(id, diagram, detector); - } catch (err) { - // Remove failed diagram from detectors - log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`); - delete detectors[key]; - throw err; - } + // Register diagram if it is not already registered + const { diagram, id } = await loader(); + registerDiagram(id, diagram, detector); + } catch (err) { + // Remove failed diagram from detectors + log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`); + delete detectors[key]; + throw err; } } }) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index fdb175e52..56364e9c6 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type * as d3 from 'd3'; -import type { SetRequired } from 'type-fest'; +import type { SetOptional, SetRequired } from 'type-fest'; import type { Diagram } from '../Diagram.js'; import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js'; @@ -91,17 +91,13 @@ export interface DiagramDefinition { ) => void; } -export interface DetectorRecord { - detector: DiagramDetector; - loader?: DiagramLoader; -} - export interface ExternalDiagramDefinition { id: string; detector: DiagramDetector; loader: DiagramLoader; } +export type DetectorRecord = SetOptional, 'loader'>; export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean; export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>; diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index 9479e5108..1505b1950 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -379,6 +379,15 @@ function layoutArchitecture( }, }, ], + layout: { + name: 'grid', + boundingBox: { + x1: 0, + x2: 100, + y1: 0, + y2: 100, + }, + }, }); // Remove element after layout renderEl.remove(); diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index d6e35ed15..39a8b47a0 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/packages/mermaid/src/diagrams/block/blockDB.ts @@ -92,7 +92,20 @@ export const setCssClass = function (itemIds: string, cssClassName: string) { const populateBlockDatabase = (_blockList: Block[], parent: Block): void => { const blockList = _blockList.flat(); const children = []; + const columnSettingBlock = blockList.find((b) => b?.type === 'column-setting'); + const column = columnSettingBlock?.columns ?? -1; for (const block of blockList) { + if ( + typeof column === 'number' && + column > 0 && + block.type !== 'column-setting' && + typeof block.widthInColumns === 'number' && + block.widthInColumns > column + ) { + log.warn( + `Block ${block.id} width ${block.widthInColumns} exceeds configured column width ${column}` + ); + } if (block.label) { block.label = sanitizeText(block.label); } @@ -287,7 +300,7 @@ const setBlock = (block: Block) => { blockDatabase.set(block.id, block); }; -const getLogger = () => console; +const getLogger = () => log; /** * Return all of the style classes diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index a00e935ac..ea0de6312 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/packages/mermaid/src/diagrams/block/layout.ts @@ -270,7 +270,12 @@ function layoutBlocks(block: Block, db: BlockDB) { if (child.children) { layoutBlocks(child, db); } - columnPos += child?.widthInColumns ?? 1; + let columnsFilled = child?.widthInColumns ?? 1; + if (columns > 0) { + // Make sure overflowing lines do not affect later lines + columnsFilled = Math.min(columnsFilled, columns - (columnPos % columns)); + } + columnPos += columnsFilled; log.debug('abc88 columnsPos', child, columnPos); } } diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts index 4bf3290d8..21da4e440 100644 --- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts +++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts @@ -1,6 +1,7 @@ // @ts-ignore: jison doesn't export types import block from './block.jison'; import db from '../blockDB.js'; +import { log } from '../../../logger.js'; describe('Block diagram', function () { describe('when parsing a block diagram graph it should handle > ', function () { @@ -402,6 +403,25 @@ columns 1 const B = blocks[0]; expect(B.styles).toContain('fill:#f9F'); }); + it('should log a warning when block width exceeds column width', () => { + const str = `block-beta + columns 1 + A:1 + B:2 + C:3 + D:4 + E:3 + F:2 + G:1`; + + const logWarnSpy = vi.spyOn(log, 'warn').mockImplementation(() => undefined); + + block.parse(str); + + expect(logWarnSpy).toHaveBeenCalledWith('Block B width 2 exceeds configured column width 1'); + + logWarnSpy.mockRestore(); + }); }); describe('prototype properties', function () { diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts index 8d12de00b..44a6ed052 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts @@ -125,4 +125,43 @@ describe('flow db getData', () => { const { edges } = flowDb.getData(); expect(edges[0].curve).toBe('basis'); }); + + it('should support modifying interpolate using edge id syntax', () => { + flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('C', { text: 'C', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addVertex('D', { text: 'D', type: 'text' }, undefined, [], [], '', {}, undefined); + flowDb.addLink(['A'], ['B'], {}); + flowDb.addLink(['A'], ['C'], { id: 'e2' }); + flowDb.addLink(['B'], ['D'], { id: 'e3' }); + flowDb.addLink(['C'], ['D'], {}); + flowDb.updateLinkInterpolate(['default'], 'stepBefore'); + flowDb.updateLinkInterpolate([0], 'basis'); + flowDb.addVertex( + 'e2', + { text: 'Shouldnt be used', type: 'text' }, + undefined, + [], + [], + '', + {}, + ' curve: monotoneX ' + ); + flowDb.addVertex( + 'e3', + { text: 'Shouldnt be used', type: 'text' }, + undefined, + [], + [], + '', + {}, + ' curve: catmullRom ' + ); + + const { edges } = flowDb.getData(); + expect(edges[0].curve).toBe('basis'); + expect(edges[1].curve).toBe('monotoneX'); + expect(edges[2].curve).toBe('catmullRom'); + expect(edges[3].curve).toBe('stepBefore'); + }); }); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index 65f8c4a05..b729a85e0 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -139,6 +139,9 @@ export class FlowDB implements DiagramDB { if (edgeDoc?.animation !== undefined) { edge.animation = edgeDoc.animation; } + if (edgeDoc?.curve !== undefined) { + edge.interpolate = edgeDoc.curve; + } return; } diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js index 6b1bc7fbb..5dfd648ca 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js @@ -37,6 +37,59 @@ describe('[Lines] when parsing', () => { expect(edges[1].interpolate).toBe('cardinal'); }); + it('should handle edge curve properties using edge ID', function () { + const res = flow.parser.parse( + 'graph TD\n' + + 'A e1@-->B\n' + + 'A uniqueName@-->C\n' + + 'e1@{curve: basis}\n' + + 'uniqueName@{curve: cardinal}' + ); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].interpolate).toBe('basis'); + expect(edges[1].interpolate).toBe('cardinal'); + }); + + it('should handle edge curve properties using edge ID but without overriding default', function () { + const res = flow.parser.parse( + 'graph TD\n' + + 'A e1@-->B\n' + + 'A-->C\n' + + 'linkStyle default interpolate linear\n' + + 'e1@{curve: stepAfter}' + ); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].interpolate).toBe('stepAfter'); + expect(edges.defaultInterpolate).toBe('linear'); + }); + + it('should handle edge curve properties using edge ID mixed with line interpolation', function () { + const res = flow.parser.parse( + 'graph TD\n' + + 'A e1@-->B-->D\n' + + 'A-->C e4@-->D-->E\n' + + 'linkStyle default interpolate linear\n' + + 'linkStyle 1 interpolate basis\n' + + 'e1@{curve: monotoneX}\n' + + 'e4@{curve: stepBefore}' + ); + + const vert = flow.parser.yy.getVertices(); + const edges = flow.parser.yy.getEdges(); + + expect(edges[0].interpolate).toBe('monotoneX'); + expect(edges[1].interpolate).toBe('basis'); + expect(edges.defaultInterpolate).toBe('linear'); + expect(edges[3].interpolate).toBe('stepBefore'); + expect(edges.defaultInterpolate).toBe('linear'); + }); + it('should handle line interpolation multi-numbered definitions', function () { const res = flow.parser.parse( 'graph TD\n' + 'A-->B\n' + 'A-->C\n' + 'linkStyle 0,1 interpolate basis' diff --git a/packages/mermaid/src/diagrams/git/gitGraph.spec.ts b/packages/mermaid/src/diagrams/git/gitGraph.spec.ts index fed21dd19..ee20a9aaf 100644 --- a/packages/mermaid/src/diagrams/git/gitGraph.spec.ts +++ b/packages/mermaid/src/diagrams/git/gitGraph.spec.ts @@ -1,4 +1,4 @@ -import { rejects } from 'assert'; +import { log } from '../../logger.js'; import { db } from './gitGraphAst.js'; import { parser } from './gitGraphParser.js'; @@ -1319,4 +1319,42 @@ describe('when parsing a gitGraph', function () { } }); }); + it('should log a warning when two commits have the same ID', async () => { + const str = `gitGraph + commit id:"initial commit" + commit id:"work on first release" + commit id:"design freeze from here" + branch v1-rc + checkout v1-rc + commit id:"bugfix 1" + commit id:"bigfix 2" tag:"v1.0.1" + branch FORK-v1.0-MDR + checkout FORK-v1.0-MDR + commit id:"working on MDR" + checkout v1-rc + commit id:"minor design changes for MDR" tag:"v1.0.2" + checkout FORK-v1.0-MDR + merge v1-rc + checkout main + commit id:"new feature for v1.1…" + checkout FORK-v1.0-MDR + commit id:"working on MDR" + commit id:"finishing MDR" + branch v1.0-MDR + checkout v1.0-MDR + commit id:"brush up release" tag:"v1.0.2-MDR" + checkout v1-rc + commit id:"bugfix without MDR" + checkout main + commit id:"work on v1.1" + `; + + const logWarnSpy = vi.spyOn(log, 'warn').mockImplementation(() => undefined); + + await parser.parse(str); + + expect(logWarnSpy).toHaveBeenCalledWith('Commit ID working on MDR already exists'); + + logWarnSpy.mockRestore(); + }); }); diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.ts b/packages/mermaid/src/diagrams/git/gitGraphAst.ts index 36595eb51..0dbc1ecb0 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphAst.ts +++ b/packages/mermaid/src/diagrams/git/gitGraphAst.ts @@ -125,6 +125,9 @@ export const commit = function (commitDB: CommitDB) { }; state.records.head = newCommit; log.info('main branch', config.mainBranchName); + if (state.records.commits.has(newCommit.id)) { + log.warn(`Commit ID ${newCommit.id} already exists`); + } state.records.commits.set(newCommit.id, newCommit); state.records.branches.set(state.records.currBranch, newCommit.id); log.debug('in pushCommit ' + newCommit.id); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts index 66b44b4f9..c02898954 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts @@ -1,12 +1,14 @@ // @ts-ignore: JISON doesn't support types import parser from './parser/mindmap.jison'; -import db from './mindmapDb.js'; +import { MindmapDB } from './mindmapDb.js'; import renderer from './mindmapRenderer.js'; import styles from './styles.js'; import type { DiagramDefinition } from '../../diagram-api/types.js'; export const diagram: DiagramDefinition = { - db, + get db() { + return new MindmapDB(); + }, renderer, parser, styles, diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts index d4f2d316e..b912e1b8c 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts @@ -1,12 +1,12 @@ // @ts-expect-error No types available for JISON import { parser as mindmap } from './parser/mindmap.jison'; -import mindmapDB from './mindmapDb.js'; +import { MindmapDB } from './mindmapDb.js'; // Todo fix utils functions for tests import { setLogLevel } from '../../diagram-api/diagramAPI.js'; describe('when parsing a mindmap ', function () { beforeEach(function () { - mindmap.yy = mindmapDB; + mindmap.yy = new MindmapDB(); mindmap.yy.clear(); setLogLevel('trace'); }); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts index c1842ff35..c6d5dbad6 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts @@ -1,6 +1,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'; -import db from './mindmapDb.js'; +import { MindmapDB } from './mindmapDb.js'; import type { MindmapLayoutNode, MindmapLayoutEdge } from './mindmapDb.js'; +import { Edge } from '../../rendering-util/types.js'; // Mock the getConfig function vi.mock('../../diagram-api/diagramAPI.js', () => ({ @@ -15,7 +16,10 @@ vi.mock('../../diagram-api/diagramAPI.js', () => ({ })); describe('MindmapDb getData function', () => { + let db: MindmapDB; + beforeEach(() => { + db = new MindmapDB(); // Clear the database before each test db.clear(); }); @@ -44,13 +48,13 @@ describe('MindmapDb getData function', () => { expect(result.rootNode).toBeDefined(); // Check root node - const rootNode = result.nodes.find((n: any) => n.id === '0') as MindmapLayoutNode; + const rootNode = (result.nodes as MindmapLayoutNode[]).find((n) => n.id === '0'); expect(rootNode).toBeDefined(); expect(rootNode?.label).toBe('Root Node'); expect(rootNode?.level).toBe(0); // Check child nodes - const child1 = result.nodes.find((n: any) => n.id === '1') as MindmapLayoutNode; + const child1 = (result.nodes as MindmapLayoutNode[]).find((n) => n.id === '1'); expect(child1).toBeDefined(); expect(child1?.label).toBe('Child 1'); expect(child1?.level).toBe(1); @@ -131,7 +135,7 @@ describe('MindmapDb getData function', () => { const result = db.getData(); - const edgeIds = result.edges.map((e: any) => e.id); + const edgeIds = result.edges.map((e: Edge) => e.id); const uniqueIds = new Set(edgeIds); expect(edgeIds).toHaveLength(3); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index 8ef70d20c..812f763ef 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -4,6 +4,7 @@ import { sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; import type { MindmapNode } from './mindmapTypes.js'; import defaultConfig from '../../defaultConfig.js'; + import type { LayoutData, Node, Edge } from '../../rendering-util/types.js'; // Extend Node type for mindmap-specific properties @@ -20,69 +21,6 @@ export type MindmapLayoutEdge = Edge & { section?: number; }; -let nodes: MindmapNode[] = []; -let cnt = 0; -let elements: Record = {}; - -const clear = () => { - nodes = []; - cnt = 0; - elements = {}; -}; - -const getParent = function (level: number) { - for (let i = nodes.length - 1; i >= 0; i--) { - if (nodes[i].level < level) { - return nodes[i]; - } - } - // No parent found - return null; -}; - -const getMindmap = () => { - return nodes.length > 0 ? nodes[0] : null; -}; - -const addNode = (level: number, id: string, descr: string, type: number) => { - log.info('addNode', level, id, descr, type); - const conf = getConfig(); - let padding: number = conf.mindmap?.padding ?? defaultConfig.mindmap.padding; - switch (type) { - case nodeType.ROUNDED_RECT: - case nodeType.RECT: - case nodeType.HEXAGON: - padding *= 2; - } - - const node = { - id: cnt++, - nodeId: sanitizeText(id, conf), - level, - descr: sanitizeText(descr, conf), - type, - children: [], - width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth, - padding, - } satisfies MindmapNode; - - const parent = getParent(level); - if (parent) { - parent.children.push(node); - // Keep all nodes in the list - nodes.push(node); - } else { - if (nodes.length === 0) { - // First node, the root - nodes.push(node); - } else { - // Syntax error ... there can only bee one root - throw new Error( - 'There can be only one root. No parent could be found for ("' + node.descr + '")' - ); - } - } -}; const nodeType = { DEFAULT: 0, @@ -93,279 +31,349 @@ const nodeType = { CLOUD: 4, BANG: 5, HEXAGON: 6, -}; +} as const; -const getType = (startStr: string, endStr: string): number => { - log.debug('In get type', startStr, endStr); - switch (startStr) { - case '[': - return nodeType.RECT; - case '(': - return endStr === ')' ? nodeType.ROUNDED_RECT : nodeType.CLOUD; - case '((': - return nodeType.CIRCLE; - case ')': - return nodeType.CLOUD; - case '))': - return nodeType.BANG; - case '{{': - return nodeType.HEXAGON; - default: - return nodeType.DEFAULT; +export class MindmapDB { + private nodes: MindmapNode[] = []; + private count = 0; + private elements: Record = {}; + public readonly nodeType: typeof nodeType; + + constructor() { + this.getLogger = this.getLogger.bind(this); + this.nodeType = nodeType; + this.clear(); + this.getType = this.getType.bind(this); + this.getMindmap = this.getMindmap.bind(this); + this.getElementById = this.getElementById.bind(this); + this.getParent = this.getParent.bind(this); + this.getMindmap = this.getMindmap.bind(this); + this.addNode = this.addNode.bind(this); + this.decorateNode = this.decorateNode.bind(this); } -}; - -const setElementForId = (id: number, element: D3Element) => { - elements[id] = element; -}; - -const decorateNode = (decoration?: { class?: string; icon?: string }) => { - if (!decoration) { - return; - } - const config = getConfig(); - const node = nodes[nodes.length - 1]; - if (decoration.icon) { - node.icon = sanitizeText(decoration.icon, config); - } - if (decoration.class) { - node.class = sanitizeText(decoration.class, config); - } -}; - -const type2Str = (type: number) => { - switch (type) { - case nodeType.DEFAULT: - return 'no-border'; - case nodeType.RECT: - return 'rect'; - case nodeType.ROUNDED_RECT: - return 'rounded-rect'; - case nodeType.CIRCLE: - return 'circle'; - case nodeType.CLOUD: - return 'cloud'; - case nodeType.BANG: - return 'bang'; - case nodeType.HEXAGON: - return 'hexgon'; // cspell: disable-line - default: - return 'no-border'; - } -}; - -/** - * Assign section numbers to nodes based on their position relative to root - * @param node - The mindmap node to process - * @param sectionNumber - The section number to assign (undefined for root) - */ -const assignSections = (node: MindmapNode, sectionNumber?: number): void => { - // Assign section number to the current node - node.section = sectionNumber; - - // For root node's children, assign section numbers based on their index - // For other nodes, inherit parent's section number - if (node.children) { - node.children.forEach((child, index) => { - const childSectionNumber = node.level === 0 ? index : sectionNumber; - assignSections(child, childSectionNumber); - }); - } -}; - -/** - * Convert mindmap tree structure to flat array of nodes - * @param node - The mindmap node to process - * @param processedNodes - Array to collect processed nodes - */ -const flattenNodes = (node: MindmapNode, processedNodes: MindmapLayoutNode[]): void => { - // Build CSS classes for the node - let cssClasses = 'mindmap-node'; - - // Add section-specific classes - if (node.level === 0) { - // Root node gets special classes - cssClasses += ' section-root section--1'; - } else if (node.section !== undefined) { - // Child nodes get section class based on their section number - cssClasses += ` section-${node.section}`; + public clear() { + this.nodes = []; + this.count = 0; + this.elements = {}; } - // Add any custom classes from the node - if (node.class) { - cssClasses += ` ${node.class}`; + public getParent(level: number): MindmapNode | null { + for (let i = this.nodes.length - 1; i >= 0; i--) { + if (this.nodes[i].level < level) { + return this.nodes[i]; + } + } + return null; } - // Map mindmap node type to valid shape name - const getShapeFromType = (type: number) => { + public getMindmap(): MindmapNode | null { + return this.nodes.length > 0 ? this.nodes[0] : null; + } + + public addNode(level: number, id: string, descr: string, type: number): void { + log.info('addNode', level, id, descr, type); + + const conf = getConfig(); + let padding = conf.mindmap?.padding ?? defaultConfig.mindmap.padding; + switch (type) { - case nodeType.CIRCLE: - return 'circle'; - case nodeType.RECT: - return 'rect'; - case nodeType.ROUNDED_RECT: - return 'rounded'; - case nodeType.CLOUD: - return 'cloud'; - case nodeType.BANG: - return 'bang'; - case nodeType.HEXAGON: - return 'hexagon'; - case nodeType.DEFAULT: - case nodeType.NO_BORDER: + case this.nodeType.ROUNDED_RECT: + case this.nodeType.RECT: + case this.nodeType.HEXAGON: + padding *= 2; + break; + } + + const node: MindmapNode = { + id: this.count++, + nodeId: sanitizeText(id, conf), + level, + descr: sanitizeText(descr, conf), + type, + children: [], + width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth, + padding, + }; + + const parent = this.getParent(level); + if (parent) { + parent.children.push(node); + this.nodes.push(node); + } else { + if (this.nodes.length === 0) { + this.nodes.push(node); + } else { + throw new Error( + `There can be only one root. No parent could be found for ("${node.descr}")` + ); + } + } + } + + public getType(startStr: string, endStr: string) { + log.debug('In get type', startStr, endStr); + switch (startStr) { + case '[': + return this.nodeType.RECT; + case '(': + return endStr === ')' ? this.nodeType.ROUNDED_RECT : this.nodeType.CLOUD; + case '((': + return this.nodeType.CIRCLE; + case ')': + return this.nodeType.CLOUD; + case '))': + return this.nodeType.BANG; + case '{{': + return this.nodeType.HEXAGON; default: + return this.nodeType.DEFAULT; + } + } + + public setElementForId(id: number, element: D3Element): void { + this.elements[id] = element; + } + public getElementById(id: number) { + return this.elements[id]; + } + + public decorateNode(decoration?: { class?: string; icon?: string }): void { + if (!decoration) { + return; + } + + const config = getConfig(); + const node = this.nodes[this.nodes.length - 1]; + if (decoration.icon) { + node.icon = sanitizeText(decoration.icon, config); + } + if (decoration.class) { + node.class = sanitizeText(decoration.class, config); + } + } + + type2Str(type: number): string { + switch (type) { + case this.nodeType.DEFAULT: + return 'no-border'; + case this.nodeType.RECT: return 'rect'; + case this.nodeType.ROUNDED_RECT: + return 'rounded-rect'; + case this.nodeType.CIRCLE: + return 'circle'; + case this.nodeType.CLOUD: + return 'cloud'; + case this.nodeType.BANG: + return 'bang'; + case this.nodeType.HEXAGON: + return 'hexgon'; // cspell: disable-line + default: + return 'no-border'; + } + } + + /** + * Assign section numbers to nodes based on their position relative to root + * @param node - The mindmap node to process + * @param sectionNumber - The section number to assign (undefined for root) + */ + public assignSections (node: MindmapNode, sectionNumber?: number): void { + // Assign section number to the current node + node.section = sectionNumber; + + // For root node's children, assign section numbers based on their index + // For other nodes, inherit parent's section number + if (node.children) { + node.children.forEach((child, index) => { + const childSectionNumber = node.level === 0 ? index : sectionNumber; + this.assignSections(child, childSectionNumber); + }); } }; - const processedNode: MindmapLayoutNode = { - id: 'node_' + node.id.toString(), - domId: 'node_' + node.id.toString(), - label: node.descr, - isGroup: false, - shape: getShapeFromType(node.type), - width: node.width, - height: node.height ?? 0, - padding: node.padding, - cssClasses: cssClasses, - cssStyles: [], - look: 'default', - icon: node.icon, - x: node.x, - y: node.y, - // Mindmap-specific properties - level: node.level, - nodeId: node.nodeId, - type: node.type, - section: node.section, - }; + /** + * Convert mindmap tree structure to flat array of nodes + * @param node - The mindmap node to process + * @param processedNodes - Array to collect processed nodes + */ + public flattenNodes(node: MindmapNode, processedNodes: MindmapLayoutNode[]): void { + // Build CSS classes for the node + let cssClasses = 'mindmap-node'; - processedNodes.push(processedNode); + // Add section-specific classes + if (node.level === 0) { + // Root node gets special classes + cssClasses += ' section-root section--1'; + } else if (node.section !== undefined) { + // Child nodes get section class based on their section number + cssClasses += ` section-${node.section}`; + } - // Recursively process children - if (node.children) { - node.children.forEach((child) => flattenNodes(child, processedNodes)); - } -}; + // Add any custom classes from the node + if (node.class) { + cssClasses += ` ${node.class}`; + } -/** - * Generate edges from parent-child relationships in mindmap tree - * @param node - The mindmap node to process - * @param edges - Array to collect edges - */ -const generateEdges = (node: MindmapNode, edges: MindmapLayoutEdge[]): void => { - if (node.children) { - node.children.forEach((child) => { - // Build CSS classes for the edge - let edgeClasses = 'edge'; - - // Add section-specific classes based on the child's section - if (child.section !== undefined) { - edgeClasses += ` section-edge-${child.section}`; + // Map mindmap node type to valid shape name + const getShapeFromType = (type: number) => { + switch (type) { + case nodeType.CIRCLE: + return 'circle'; + case nodeType.RECT: + return 'rect'; + case nodeType.ROUNDED_RECT: + return 'rounded'; + case nodeType.CLOUD: + return 'cloud'; + case nodeType.BANG: + return 'bang'; + case nodeType.HEXAGON: + return 'hexagon'; + case nodeType.DEFAULT: + case nodeType.NO_BORDER: + default: + return 'rect'; } - - // Add depth class based on the parent's level + 1 (depth of the edge) - const edgeDepth = node.level + 1; - edgeClasses += ` edge-depth-${edgeDepth}`; - - const edge: MindmapLayoutEdge = { - id: `edge_${node.id}_${child.id}`, - start: 'node_' + node.id.toString(), - end: 'node_' + child.id.toString(), - type: 'normal', - curve: 'basis', - thickness: 'normal', - look: 'default', - classes: edgeClasses, - // Store mindmap-specific data - depth: node.level, - section: child.section, - }; - - edges.push(edge); - - // Recursively process child edges - generateEdges(child, edges); - }); - } -}; - -/** - * Get structured data for layout algorithms - * Following the pattern established by ER diagrams - * @returns Structured data containing nodes, edges, and config - */ -const getData = (): LayoutData => { - const mindmapRoot = getMindmap(); - const config = getConfig(); - - if (!mindmapRoot) { - return { - nodes: [], - edges: [], - config, }; - } - log.debug('getData: mindmapRoot', mindmapRoot, config); - // Assign section numbers to all nodes based on their position relative to root - assignSections(mindmapRoot); - - // Convert tree structure to flat arrays - const processedNodes: MindmapLayoutNode[] = []; - const processedEdges: MindmapLayoutEdge[] = []; - - flattenNodes(mindmapRoot, processedNodes); - generateEdges(mindmapRoot, processedEdges); - - log.debug(`getData: processed ${processedNodes.length} nodes and ${processedEdges.length} edges`); - - // Create shapes map for ELK compatibility - const shapes = new Map(); - processedNodes.forEach((node) => { - shapes.set(node.id, { - shape: node.shape, + const processedNode: MindmapLayoutNode = { + id: 'node_' + node.id.toString(), + domId: 'node_' + node.id.toString(), + label: node.descr, + isGroup: false, + shape: getShapeFromType(node.type), width: node.width, - height: node.height, + height: node.height ?? 0, padding: node.padding, - }); - }); + cssClasses: cssClasses, + cssStyles: [], + look: 'default', + icon: node.icon, + x: node.x, + y: node.y, + // Mindmap-specific properties + level: node.level, + nodeId: node.nodeId, + type: node.type, + section: node.section, + }; - return { - nodes: processedNodes, - edges: processedEdges, - config, - // Store the root node for mindmap-specific layout algorithms - rootNode: mindmapRoot, - // Properties required by dagre layout algorithm - markers: [], // Mindmaps don't use markers - direction: 'TB', // Top-to-bottom direction for mindmaps - nodeSpacing: 50, // Default spacing between nodes - rankSpacing: 50, // Default spacing between ranks - // Add shapes for ELK compatibility - shapes: Object.fromEntries(shapes), - // Additional properties that layout algorithms might expect - type: 'mindmap', - diagramId: 'mindmap-' + Date.now(), + processedNodes.push(processedNode); + + // Recursively process children + if (node.children) { + node.children.forEach((child) => this.flattenNodes(child, processedNodes)); + } }; -}; -// Expose logger to grammar -const getLogger = () => log; -const getElementById = (id: number) => elements[id]; + /** + * Generate edges from parent-child relationships in mindmap tree + * @param node - The mindmap node to process + * @param edges - Array to collect edges + */ + public generateEdges(node: MindmapNode, edges: MindmapLayoutEdge[]): void{ + if (node.children) { + node.children.forEach((child) => { + // Build CSS classes for the edge + let edgeClasses = 'edge'; -const db = { - clear, - addNode, - getMindmap, - nodeType, - getType, - setElementForId, - decorateNode, - type2Str, - getLogger, - getElementById, - getData, -} as const; + // Add section-specific classes based on the child's section + if (child.section !== undefined) { + edgeClasses += ` section-edge-${child.section}`; + } -export default db; + // Add depth class based on the parent's level + 1 (depth of the edge) + const edgeDepth = node.level + 1; + edgeClasses += ` edge-depth-${edgeDepth}`; + + const edge: MindmapLayoutEdge = { + id: `edge_${node.id}_${child.id}`, + start: 'node_' + node.id.toString(), + end: 'node_' + child.id.toString(), + type: 'normal', + curve: 'basis', + thickness: 'normal', + look: 'default', + classes: edgeClasses, + // Store mindmap-specific data + depth: node.level, + section: child.section, + }; + + edges.push(edge); + + // Recursively process child edges + this.generateEdges(child, edges); + }); + } + }; + + /** + * Get structured data for layout algorithms + * Following the pattern established by ER diagrams + * @returns Structured data containing nodes, edges, and config + */ +public getData (): LayoutData { + const mindmapRoot = this.getMindmap(); + const config = getConfig(); + + if (!mindmapRoot) { + return { + nodes: [], + edges: [], + config, + }; + } + log.debug('getData: mindmapRoot', mindmapRoot, config); + + // Assign section numbers to all nodes based on their position relative to root + this.assignSections(mindmapRoot); + + // Convert tree structure to flat arrays + const processedNodes: MindmapLayoutNode[] = []; + const processedEdges: MindmapLayoutEdge[] = []; + + this.flattenNodes(mindmapRoot, processedNodes); + this.generateEdges(mindmapRoot, processedEdges); + + log.debug( + `getData: processed ${processedNodes.length} nodes and ${processedEdges.length} edges` + ); + + // Create shapes map for ELK compatibility + const shapes = new Map(); + processedNodes.forEach((node) => { + shapes.set(node.id, { + shape: node.shape, + width: node.width, + height: node.height, + padding: node.padding, + }); + }); + + return { + nodes: processedNodes, + edges: processedEdges, + config, + // Store the root node for mindmap-specific layout algorithms + rootNode: mindmapRoot, + // Properties required by dagre layout algorithm + markers: [], // Mindmaps don't use markers + direction: 'TB', // Top-to-bottom direction for mindmaps + nodeSpacing: 50, // Default spacing between nodes + rankSpacing: 50, // Default spacing between ranks + // Add shapes for ELK compatibility + shapes: Object.fromEntries(shapes), + // Additional properties that layout algorithms might expect + type: 'mindmap', + diagramId: 'mindmap-' + Date.now(), + }; + }; + + // Expose logger to grammar + public getLogger() { + return log; + } + +} diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index d273fa49e..952315117 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -5,9 +5,10 @@ import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js'; import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js'; import type { LayoutData } from '../../rendering-util/types.js'; -import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js'; +import type { FilledMindMapNode } from './mindmapTypes.js'; import { drawNode } from './svgDraw.js'; import defaultConfig from '../../defaultConfig.js'; +import type { MindmapDB } from './mindmapDb.js'; async function _drawNodes( db: MindmapDB, diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts index e8350477a..be8effab1 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts @@ -1,5 +1,4 @@ import type { RequiredDeep } from 'type-fest'; -import type mindmapDb from './mindmapDb.js'; export interface MindmapNode { id: number; @@ -19,4 +18,3 @@ export interface MindmapNode { } export type FilledMindMapNode = RequiredDeep; -export type MindmapDB = typeof mindmapDb; diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index 209a6a0e1..8aee82e30 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -1,8 +1,9 @@ import { createText } from '../../rendering-util/createText.js'; -import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js'; +import type { FilledMindMapNode } from './mindmapTypes.js'; import type { Point, D3Element } from '../../types.js'; import { parseFontSize } from '../../utils.js'; import type { MermaidConfig } from '../../config.type.js'; +import type { MindmapDB } from './mindmapDb.js'; const MAX_SECTIONS = 12; diff --git a/packages/mermaid/src/diagrams/packet/detector.ts b/packages/mermaid/src/diagrams/packet/detector.ts index 5aca92e6c..ed3c61054 100644 --- a/packages/mermaid/src/diagrams/packet/detector.ts +++ b/packages/mermaid/src/diagrams/packet/detector.ts @@ -7,7 +7,7 @@ import type { const id = 'packet'; const detector: DiagramDetector = (txt) => { - return /^\s*packet-beta/.test(txt); + return /^\s*packet(-beta)?/.test(txt); }; const loader: DiagramLoader = async () => { diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index bdd09acec..b03ffe4d1 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -15,8 +15,14 @@ describe('packet diagrams', () => { expect(getPacket()).toMatchInlineSnapshot('[]'); }); + it('should handle a packet definition', async () => { + const str = `packet`; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot('[]'); + }); + it('should handle diagram with data and title', async () => { - const str = `packet-beta + const str = `packet title Packet diagram accTitle: Packet accTitle accDescr: Packet accDescription @@ -41,7 +47,7 @@ describe('packet diagrams', () => { }); it('should handle single bits', async () => { - const str = `packet-beta + const str = `packet 0-10: "test" 11: "single" `; @@ -67,7 +73,7 @@ describe('packet diagrams', () => { }); it('should handle bit counts', async () => { - const str = `packet-beta + const str = `packet +8: "byte" +16: "word" `; @@ -93,7 +99,7 @@ describe('packet diagrams', () => { }); it('should handle bit counts with bit or bits', async () => { - const str = `packet-beta + const str = `packet +8: "byte" +16: "word" `; @@ -119,7 +125,7 @@ describe('packet diagrams', () => { }); it('should split into multiple rows', async () => { - const str = `packet-beta + const str = `packet 0-10: "test" 11-90: "multiple" `; @@ -161,7 +167,7 @@ describe('packet diagrams', () => { }); it('should split into multiple rows when cut at exact length', async () => { - const str = `packet-beta + const str = `packet 0-16: "test" 17-63: "multiple" `; @@ -195,7 +201,7 @@ describe('packet diagrams', () => { }); it('should throw error if numbers are not continuous', async () => { - const str = `packet-beta + const str = `packet 0-16: "test" 18-20: "error" `; @@ -205,7 +211,7 @@ describe('packet diagrams', () => { }); it('should throw error if numbers are not continuous with bit counts', async () => { - const str = `packet-beta + const str = `packet +16: "test" 18-20: "error" `; @@ -215,7 +221,7 @@ describe('packet diagrams', () => { }); it('should throw error if numbers are not continuous for single packets', async () => { - const str = `packet-beta + const str = `packet 0-16: "test" 18: "error" `; @@ -225,7 +231,7 @@ describe('packet diagrams', () => { }); it('should throw error if numbers are not continuous for single packets with bit counts', async () => { - const str = `packet-beta + const str = `packet +16: "test" 18: "error" `; @@ -235,7 +241,7 @@ describe('packet diagrams', () => { }); it('should throw error if numbers are not continuous for single packets - 2', async () => { - const str = `packet-beta + const str = `packet 0-16: "test" 17: "good" 19: "error" @@ -246,7 +252,7 @@ describe('packet diagrams', () => { }); it('should throw error if end is less than start', async () => { - const str = `packet-beta + const str = `packet 0-16: "test" 25-20: "error" `; @@ -256,7 +262,7 @@ describe('packet diagrams', () => { }); it('should throw error if bit count is 0', async () => { - const str = `packet-beta + const str = `packet +0: "test" `; await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index c681c9491..04ccd8a84 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -524,7 +524,7 @@ export const drawBox = function (elem, box, conf) { box.name, g, box.x, - box.y + (box.textMaxHeight || 0) / 2, + box.y + conf.boxTextMargin + (box.textMaxHeight || 0) / 2, box.width, 0, { class: 'text' }, diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts index b3405bc1b..a0063a5f0 100644 --- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts +++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts @@ -28,8 +28,7 @@ interface TimelineTask { export const draw = function (text: string, id: string, version: string, diagObj: Diagram) { //1. Fetch the configuration const conf = getConfig(); - // @ts-expect-error - wrong config? - const LEFT_MARGIN = conf.leftMargin ?? 50; + const LEFT_MARGIN = conf.timeline?.leftMargin ?? 50; log.debug('timeline', diagObj.db); @@ -126,6 +125,10 @@ export const draw = function (text: string, id: string, version: string, diagObj }; maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf); } + // Add spacing between events (10px per event except the last one) + if (task.events.length > 0) { + maxEventLineLengthTemp += (task.events.length - 1) * 10; + } maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp); } @@ -285,16 +288,9 @@ export const drawTasks = function ( lineWrapper .append('line') .attr('x1', masterX + 190 / 2) - .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins - .attr('x2', masterX + 190 / 2) // Subtract stroke width so arrow point is retained - .attr( - 'y2', - masterY + - maxTaskHeight + - (isWithoutSections ? maxTaskHeight : maxSectionHeight) + - maxEventLineLength + - 120 - ) + .attr('y1', masterY + maxTaskHeight) // Start from bottom of task box + .attr('x2', masterX + 190 / 2) // Same x coordinate for vertical line + .attr('y2', masterY + maxTaskHeight + 100 + maxEventLineLength + 100) // End at consistent depth with ample padding for visible dashed lines and arrowheads .attr('stroke-width', 2) .attr('stroke', 'black') .attr('marker-end', 'url(#arrowhead)') diff --git a/packages/mermaid/src/diagrams/treemap/db.ts b/packages/mermaid/src/diagrams/treemap/db.ts new file mode 100644 index 000000000..23326bc85 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/db.ts @@ -0,0 +1,95 @@ +import type { DiagramDB } from '../../diagram-api/types.js'; +import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; +import type { TreemapDiagramConfig, TreemapNode } from './types.js'; +import DEFAULT_CONFIG from '../../defaultConfig.js'; +import { getConfig as commonGetConfig } from '../../config.js'; +import { cleanAndMerge } from '../../utils.js'; +import { isLabelStyle } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +import { + clear as commonClear, + getAccDescription, + getAccTitle, + getDiagramTitle, + setAccDescription, + setAccTitle, + setDiagramTitle, +} from '../common/commonDb.js'; +export class TreeMapDB implements DiagramDB { + private nodes: TreemapNode[] = []; + private levels: Map = new Map(); + private outerNodes: TreemapNode[] = []; + private classes: Map = new Map(); + private root?: TreemapNode; + + public getNodes() { + return this.nodes; + } + + public getConfig() { + const defaultConfig = DEFAULT_CONFIG as unknown as { treemap: Required }; + const userConfig = commonGetConfig() as unknown as { treemap?: Partial }; + return cleanAndMerge({ + ...defaultConfig.treemap, + ...(userConfig.treemap ?? {}), + }) as Required; + } + + public addNode(node: TreemapNode, level: number) { + this.nodes.push(node); + this.levels.set(node, level); + if (level === 0) { + this.outerNodes.push(node); + this.root ??= node; + } + } + + public getRoot() { + return { name: '', children: this.outerNodes }; + } + + public addClass(id: string, _style: string) { + const styleClass = this.classes.get(id) ?? { id, styles: [], textStyles: [] }; + const styles = _style.replace(/\\,/g, '§§§').replace(/,/g, ';').replace(/§§§/g, ',').split(';'); + if (styles) { + styles.forEach((s) => { + if (isLabelStyle(s)) { + if (styleClass?.textStyles) { + styleClass.textStyles.push(s); + } else { + styleClass.textStyles = [s]; + } + } + if (styleClass?.styles) { + styleClass.styles.push(s); + } else { + styleClass.styles = [s]; + } + }); + } + this.classes.set(id, styleClass); + } + + public getClasses() { + return this.classes; + } + + public getStylesForClass(classSelector: string): string[] { + return this.classes.get(classSelector)?.styles ?? []; + } + + public clear() { + commonClear(); + this.nodes = []; + this.levels = new Map(); + this.outerNodes = []; + this.classes = new Map(); + this.root = undefined; + } + + public setAccTitle = setAccTitle; + public getAccTitle = getAccTitle; + public setDiagramTitle = setDiagramTitle; + public getDiagramTitle = getDiagramTitle; + public getAccDescription = getAccDescription; + public setAccDescription = setAccDescription; +} diff --git a/packages/mermaid/src/diagrams/treemap/detector.ts b/packages/mermaid/src/diagrams/treemap/detector.ts new file mode 100644 index 000000000..3b050f660 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/detector.ts @@ -0,0 +1,22 @@ +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; + +const id = 'treemap'; + +const detector: DiagramDetector = (txt) => { + return /^\s*treemap/.test(txt); +}; + +const loader: DiagramLoader = async () => { + const { diagram } = await import('./diagram.js'); + return { id, diagram }; +}; + +export const treemap: ExternalDiagramDefinition = { + id, + detector, + loader, +}; diff --git a/packages/mermaid/src/diagrams/treemap/diagram.ts b/packages/mermaid/src/diagrams/treemap/diagram.ts new file mode 100644 index 000000000..2f8ff92f3 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/diagram.ts @@ -0,0 +1,14 @@ +import type { DiagramDefinition } from '../../diagram-api/types.js'; +import { TreeMapDB } from './db.js'; +import { parser } from './parser.js'; +import { renderer } from './renderer.js'; +import styles from './styles.js'; + +export const diagram: DiagramDefinition = { + parser, + get db() { + return new TreeMapDB(); + }, + renderer, + styles, +}; diff --git a/packages/mermaid/src/diagrams/treemap/parser.ts b/packages/mermaid/src/diagrams/treemap/parser.ts new file mode 100644 index 000000000..4d71ff470 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/parser.ts @@ -0,0 +1,108 @@ +import { parse } from '@mermaid-js/parser'; +import type { ParserDefinition } from '../../diagram-api/types.js'; +import { log } from '../../logger.js'; +import { populateCommonDb } from '../common/populateCommonDb.js'; +import type { TreemapNode, TreemapAst, TreemapDB } from './types.js'; +import { buildHierarchy } from './utils.js'; +import { TreeMapDB } from './db.js'; + +/** + * Populates the database with data from the Treemap AST + * @param ast - The Treemap AST + */ +const populate = (ast: TreemapAst, db: TreemapDB) => { + // We need to bypass the type checking for populateCommonDb + // eslint-disable-next-line @typescript-eslint/no-explicit-any + populateCommonDb(ast as any, db); + + const items: { + level: number; + name: string; + type: string; + value?: number; + classSelector?: string; + cssCompiledStyles?: string; + }[] = []; + + // Extract classes and styles from the treemap + for (const row of ast.TreemapRows ?? []) { + if (row.$type === 'ClassDefStatement') { + db.addClass(row.className ?? '', row.styleText ?? ''); + } + } + + // Extract data from each row in the treemap + for (const row of ast.TreemapRows ?? []) { + const item = row.item; + + if (!item) { + continue; + } + + const level = row.indent ? parseInt(row.indent) : 0; + const name = getItemName(item); + + // Get styles as a string if they exist + const styles = item.classSelector ? db.getStylesForClass(item.classSelector) : []; + const cssCompiledStyles = styles.length > 0 ? styles.join(';') : undefined; + + const itemData = { + level, + name, + type: item.$type, + value: item.value, + classSelector: item.classSelector, + cssCompiledStyles, + }; + + items.push(itemData); + } + + // Convert flat structure to hierarchical + const hierarchyNodes = buildHierarchy(items); + + // Add all nodes to the database + const addNodesRecursively = (nodes: TreemapNode[], level: number) => { + for (const node of nodes) { + db.addNode(node, level); + if (node.children && node.children.length > 0) { + addNodesRecursively(node.children, level + 1); + } + } + }; + + addNodesRecursively(hierarchyNodes, 0); +}; + +/** + * Gets the name of a treemap item + * @param item - The treemap item + * @returns The name of the item + */ +const getItemName = (item: { name?: string | number }): string => { + return item.name ? String(item.name) : ''; +}; + +export const parser: ParserDefinition = { + // @ts-expect-error - TreeMapDB is not assignable to DiagramDB + parser: { yy: undefined }, + parse: async (text: string): Promise => { + try { + // Use a generic parse that accepts any diagram type + + const parseFunc = parse as (diagramType: string, text: string) => Promise; + const ast = await parseFunc('treemap', text); + log.debug('Treemap AST:', ast); + const db = parser.parser?.yy; + if (!(db instanceof TreeMapDB)) { + throw new Error( + 'parser.parser?.yy was not a TreemapDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.' + ); + } + populate(ast, db); + } catch (error) { + log.error('Error parsing treemap:', error); + throw error; + } + }, +}; diff --git a/packages/mermaid/src/diagrams/treemap/renderer.ts b/packages/mermaid/src/diagrams/treemap/renderer.ts new file mode 100644 index 000000000..6c5f8efd2 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/renderer.ts @@ -0,0 +1,526 @@ +import type { Diagram } from '../../Diagram.js'; +import type { + DiagramRenderer, + DiagramStyleClassDef, + DrawDefinition, +} from '../../diagram-api/types.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { TreemapDB, TreemapNode } from './types.js'; +import { scaleOrdinal, treemap, hierarchy, format, select } from 'd3'; +import { styles2String } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +import { getConfig } from '../../config.js'; +import { log } from '../../logger.js'; +import type { Node } from '../../rendering-util/types.js'; + +const DEFAULT_INNER_PADDING = 10; // Default for inner padding between cells/sections +const SECTION_INNER_PADDING = 10; // Default for inner padding between cells/sections +const SECTION_HEADER_HEIGHT = 25; + +/** + * Draws the treemap diagram + */ +const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { + const treemapDb = diagram.db as TreemapDB; + const config = treemapDb.getConfig(); + const treemapInnerPadding = config.padding ?? DEFAULT_INNER_PADDING; + const title = treemapDb.getDiagramTitle(); + const root = treemapDb.getRoot(); + const { themeVariables } = getConfig(); + if (!root) { + return; + } + + // Define dimensions + const titleHeight = title ? 30 : 0; + + const svg = selectSvgElement(id); + // Use config dimensions or defaults + const width = config.nodeWidth ? config.nodeWidth * SECTION_INNER_PADDING : 960; + const height = config.nodeHeight ? config.nodeHeight * SECTION_INNER_PADDING : 500; + + const svgWidth = width; + const svgHeight = height + titleHeight; + + // Set the SVG size + svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`); + configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth); + + // Format for displaying values + let valueFormat; + try { + // Handle special format patterns + const formatStr = config.valueFormat || ','; + + // Handle special cases that aren't directly supported by D3 format + if (formatStr === '$0,0') { + // Currency with thousands separator + valueFormat = (value: number) => '$' + format(',')(value); + } else if (formatStr.startsWith('$') && formatStr.includes(',')) { + // Other dollar formats with commas + const precision = /\.\d+/.exec(formatStr); + const precisionStr = precision ? precision[0] : ''; + valueFormat = (value: number) => '$' + format(',' + precisionStr)(value); + } else if (formatStr.startsWith('$')) { + // Simple dollar sign prefix + const restOfFormat = formatStr.substring(1); + valueFormat = (value: number) => '$' + format(restOfFormat || '')(value); + } else { + // Standard D3 format + valueFormat = format(formatStr); + } + } catch (error) { + log.error('Error creating format function:', error); + // Fallback to default format + valueFormat = format(','); + } + + // Create color scale + const colorScale = scaleOrdinal().range([ + 'transparent', + themeVariables.cScale0, + themeVariables.cScale1, + themeVariables.cScale2, + themeVariables.cScale3, + themeVariables.cScale4, + themeVariables.cScale5, + themeVariables.cScale6, + themeVariables.cScale7, + themeVariables.cScale8, + themeVariables.cScale9, + themeVariables.cScale10, + themeVariables.cScale11, + ]); + const colorScalePeer = scaleOrdinal().range([ + 'transparent', + themeVariables.cScalePeer0, + themeVariables.cScalePeer1, + themeVariables.cScalePeer2, + themeVariables.cScalePeer3, + themeVariables.cScalePeer4, + themeVariables.cScalePeer5, + themeVariables.cScalePeer6, + themeVariables.cScalePeer7, + themeVariables.cScalePeer8, + themeVariables.cScalePeer9, + themeVariables.cScalePeer10, + themeVariables.cScalePeer11, + ]); + const colorScaleLabel = scaleOrdinal().range([ + themeVariables.cScaleLabel0, + themeVariables.cScaleLabel1, + themeVariables.cScaleLabel2, + themeVariables.cScaleLabel3, + themeVariables.cScaleLabel4, + themeVariables.cScaleLabel5, + themeVariables.cScaleLabel6, + themeVariables.cScaleLabel7, + themeVariables.cScaleLabel8, + themeVariables.cScaleLabel9, + themeVariables.cScaleLabel10, + themeVariables.cScaleLabel11, + ]); + + // Draw the title if it exists + if (title) { + svg + .append('text') + .attr('x', svgWidth / 2) + .attr('y', titleHeight / 2) + .attr('class', 'treemapTitle') + .attr('text-anchor', 'middle') + .attr('dominant-baseline', 'middle') + .text(title); + } + + // Create a main container for the treemap, translated below the title + const g = svg + .append('g') + .attr('transform', `translate(0, ${titleHeight})`) + .attr('class', 'treemapContainer'); + + // Create the hierarchical structure + const hierarchyRoot = hierarchy(root) + .sum((d) => d.value ?? 0) + .sort((a, b) => (b.value ?? 0) - (a.value ?? 0)); + + // Create treemap layout + const treemapLayout = treemap() + .size([width, height]) + .paddingTop((d) => + d.children && d.children.length > 0 ? SECTION_HEADER_HEIGHT + SECTION_INNER_PADDING : 0 + ) + .paddingInner(treemapInnerPadding) + .paddingLeft((d) => (d.children && d.children.length > 0 ? SECTION_INNER_PADDING : 0)) + .paddingRight((d) => (d.children && d.children.length > 0 ? SECTION_INNER_PADDING : 0)) + .paddingBottom((d) => (d.children && d.children.length > 0 ? SECTION_INNER_PADDING : 0)) + .round(true); + + // Apply the treemap layout to the hierarchy + const treemapData = treemapLayout(hierarchyRoot); + + // Draw section nodes (branches - nodes with children) + const branchNodes = treemapData.descendants().filter((d) => d.children && d.children.length > 0); + const sections = g + .selectAll('.treemapSection') + .data(branchNodes) + .enter() + .append('g') + .attr('class', 'treemapSection') + .attr('transform', (d) => `translate(${d.x0},${d.y0})`); + + // Add section header background + sections + .append('rect') + .attr('width', (d) => d.x1 - d.x0) + .attr('height', SECTION_HEADER_HEIGHT) + .attr('class', 'treemapSectionHeader') + .attr('fill', 'none') + .attr('fill-opacity', 0.6) + .attr('stroke-width', 0.6) + .attr('style', (d) => { + // Hide the label for the root section + if (d.depth === 0) { + return 'display: none;'; + } + return ''; + }); + + // Add clip paths for section headers to prevent text overflow + sections + .append('clipPath') + .attr('id', (_d, i) => `clip-section-${id}-${i}`) + .append('rect') + .attr('width', (d) => Math.max(0, d.x1 - d.x0 - 12)) // 6px padding on each side + .attr('height', SECTION_HEADER_HEIGHT); + + sections + .append('rect') + .attr('width', (d) => d.x1 - d.x0) + .attr('height', (d) => d.y1 - d.y0) + .attr('class', (_d, i) => { + return `treemapSection section${i}`; + }) + .attr('fill', (d) => colorScale(d.data.name)) + .attr('fill-opacity', 0.6) + .attr('stroke', (d) => colorScalePeer(d.data.name)) + .attr('stroke-width', 2.0) + .attr('stroke-opacity', 0.4) + .attr('style', (d) => { + // Hide the label for the root section + if (d.depth === 0) { + return 'display: none;'; + } + const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node); + return styles.nodeStyles + ';' + styles.borderStyles.join(';'); + }); + // Add section labels + sections + .append('text') + .attr('class', 'treemapSectionLabel') + .attr('x', 6) // Keep original left padding + .attr('y', SECTION_HEADER_HEIGHT / 2) + .attr('dominant-baseline', 'middle') + .text((d) => (d.depth === 0 ? '' : d.data.name)) // Skip label for root section + .attr('font-weight', 'bold') + .attr('style', (d) => { + // Hide the label for the root section + if (d.depth === 0) { + return 'display: none;'; + } + const labelStyles = + 'dominant-baseline: middle; font-size: 12px; fill:' + + colorScaleLabel(d.data.name) + + '; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'; + const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node); + return labelStyles + styles.labelStyles.replace('color:', 'fill:'); + }) + .each(function (d) { + // Skip processing for root section + if (d.depth === 0) { + return; + } + const self = select(this); + const originalText = d.data.name; + self.text(originalText); + const totalHeaderWidth = d.x1 - d.x0; + const labelXPosition = 6; + let spaceForTextContent; + if (config.showValues !== false && d.value) { + const valueEndsAtXRelative = totalHeaderWidth - 10; + const estimatedValueTextActualWidth = 30; + const gapBetweenLabelAndValue = 10; + const labelMustEndBeforeX = + valueEndsAtXRelative - estimatedValueTextActualWidth - gapBetweenLabelAndValue; + spaceForTextContent = labelMustEndBeforeX - labelXPosition; + } else { + const labelOwnRightPadding = 6; + spaceForTextContent = totalHeaderWidth - labelXPosition - labelOwnRightPadding; + } + const minimumWidthToDisplay = 15; + const actualAvailableWidth = Math.max(minimumWidthToDisplay, spaceForTextContent); + const textNode = self.node()!; + const currentTextContentLength = textNode.getComputedTextLength(); + if (currentTextContentLength > actualAvailableWidth) { + const ellipsis = '...'; + let currentTruncatedText = originalText; + while (currentTruncatedText.length > 0) { + currentTruncatedText = originalText.substring(0, currentTruncatedText.length - 1); + if (currentTruncatedText.length === 0) { + self.text(ellipsis); + if (textNode.getComputedTextLength() > actualAvailableWidth) { + self.text(''); + } + break; + } + self.text(currentTruncatedText + ellipsis); + if (textNode.getComputedTextLength() <= actualAvailableWidth) { + break; + } + } + } + }); + + // Add section values if enabled + if (config.showValues !== false) { + sections + .append('text') + .attr('class', 'treemapSectionValue') + .attr('x', (d) => d.x1 - d.x0 - 10) + .attr('y', SECTION_HEADER_HEIGHT / 2) + .attr('text-anchor', 'end') + .attr('dominant-baseline', 'middle') + .text((d) => (d.value ? valueFormat(d.value) : '')) + .attr('font-style', 'italic') + .attr('style', (d) => { + // Hide the value for the root section + if (d.depth === 0) { + return 'display: none;'; + } + const labelStyles = + 'text-anchor: end; dominant-baseline: middle; font-size: 10px; fill:' + + colorScaleLabel(d.data.name) + + '; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'; + const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node); + return labelStyles + styles.labelStyles.replace('color:', 'fill:'); + }); + } + + // Draw the leaf nodes + const leafNodes = treemapData.leaves(); + const cell = g + .selectAll('.treemapLeafGroup') + .data(leafNodes) + .enter() + .append('g') + .attr('class', (d, i) => { + return `treemapNode treemapLeafGroup leaf${i}${d.data.classSelector ? ` ${d.data.classSelector}` : ''}x`; + }) + .attr('transform', (d) => `translate(${d.x0},${d.y0})`); + + // Add rectangle for each leaf node + cell + .append('rect') + .attr('width', (d) => d.x1 - d.x0) + .attr('height', (d) => d.y1 - d.y0) + .attr('class', 'treemapLeaf') + .attr('fill', (d) => { + // Leaves inherit color from their immediate parent section's name. + // If a leaf is the root itself (no parent), it uses its own name. + return d.parent ? colorScale(d.parent.data.name) : colorScale(d.data.name); + }) + .attr('style', (d) => { + const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node); + return styles.nodeStyles; + }) + .attr('fill-opacity', 0.3) + .attr('stroke', (d) => { + // Leaves inherit color from their immediate parent section's name. + // If a leaf is the root itself (no parent), it uses its own name. + return d.parent ? colorScale(d.parent.data.name) : colorScale(d.data.name); + }) + .attr('stroke-width', 3.0); + + // Add clip paths to prevent text from extending outside nodes + cell + .append('clipPath') + .attr('id', (_d, i) => `clip-${id}-${i}`) + .append('rect') + .attr('width', (d) => Math.max(0, d.x1 - d.x0 - 4)) + .attr('height', (d) => Math.max(0, d.y1 - d.y0 - 4)); + + // Add node labels with clipping + const leafLabels = cell + .append('text') + .attr('class', 'treemapLabel') + .attr('x', (d) => (d.x1 - d.x0) / 2) + .attr('y', (d) => (d.y1 - d.y0) / 2) + // .style('fill', (d) => colorScaleLabel(d.data.name)) + .attr('style', (d) => { + const labelStyles = + 'text-anchor: middle; dominant-baseline: middle; font-size: 38px;fill:' + + colorScaleLabel(d.data.name) + + ';'; + const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node); + return labelStyles + styles.labelStyles.replace('color:', 'fill:'); + }) + .attr('clip-path', (_d, i) => `url(#clip-${id}-${i})`) + .text((d) => d.data.name); + + leafLabels.each(function (d) { + const self = select(this); + const nodeWidth = d.x1 - d.x0; + const nodeHeight = d.y1 - d.y0; + const textNode = self.node()!; + + const padding = 4; + const availableWidth = nodeWidth - 2 * padding; + const availableHeight = nodeHeight - 2 * padding; + + if (availableWidth < 10 || availableHeight < 10) { + self.style('display', 'none'); + return; + } + + let currentLabelFontSize = parseInt(self.style('font-size'), 10); + const minLabelFontSize = 8; + const originalValueRelFontSize = 28; // Original font size of value, for max cap + const valueScaleFactor = 0.6; // Value font size as a factor of label font size + const minValueFontSize = 6; + const spacingBetweenLabelAndValue = 2; + + // 1. Adjust label font size to fit width + while ( + textNode.getComputedTextLength() > availableWidth && + currentLabelFontSize > minLabelFontSize + ) { + currentLabelFontSize--; + self.style('font-size', `${currentLabelFontSize}px`); + } + + // 2. Adjust both label and prospective value font size to fit combined height + let prospectiveValueFontSize = Math.max( + minValueFontSize, + Math.min(originalValueRelFontSize, Math.round(currentLabelFontSize * valueScaleFactor)) + ); + let combinedHeight = + currentLabelFontSize + spacingBetweenLabelAndValue + prospectiveValueFontSize; + + while (combinedHeight > availableHeight && currentLabelFontSize > minLabelFontSize) { + currentLabelFontSize--; + prospectiveValueFontSize = Math.max( + minValueFontSize, + Math.min(originalValueRelFontSize, Math.round(currentLabelFontSize * valueScaleFactor)) + ); + if ( + prospectiveValueFontSize < minValueFontSize && + currentLabelFontSize === minLabelFontSize + ) { + break; + } // Avoid shrinking label if value is already at min + self.style('font-size', `${currentLabelFontSize}px`); + combinedHeight = + currentLabelFontSize + spacingBetweenLabelAndValue + prospectiveValueFontSize; + if (prospectiveValueFontSize <= minValueFontSize && combinedHeight > availableHeight) { + // If value is at min and still doesn't fit, label might need to shrink more alone + // This might lead to label being too small for its own text, checked next + } + } + + // Update label font size based on height adjustment + self.style('font-size', `${currentLabelFontSize}px`); + + // 3. Final visibility check for the label + if ( + textNode.getComputedTextLength() > availableWidth || + currentLabelFontSize < minLabelFontSize || + availableHeight < currentLabelFontSize + ) { + self.style('display', 'none'); + // If label is hidden, value will be hidden by its own .each() loop + } + }); + + // Add node values with clipping + if (config.showValues !== false) { + const leafValues = cell + .append('text') + .attr('class', 'treemapValue') + .attr('x', (d) => (d.x1 - d.x0) / 2) + .attr('y', function (d) { + // Y position calculated dynamically in leafValues.each based on final label metrics + return (d.y1 - d.y0) / 2; // Placeholder, will be overwritten + }) + .attr('style', (d) => { + const labelStyles = + 'text-anchor: middle; dominant-baseline: hanging; font-size: 28px;fill:' + + colorScaleLabel(d.data.name) + + ';'; + const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node); + return labelStyles + styles.labelStyles.replace('color:', 'fill:'); + }) + + .attr('clip-path', (_d, i) => `url(#clip-${id}-${i})`) + .text((d) => (d.value ? valueFormat(d.value) : '')); + + leafValues.each(function (d) { + const valueTextElement = select(this); + const parentCellNode = this.parentNode as SVGGElement | null; + + if (!parentCellNode) { + valueTextElement.style('display', 'none'); + return; + } + + const labelElement = select(parentCellNode).select('.treemapLabel'); + + if (labelElement.empty() || labelElement.style('display') === 'none') { + valueTextElement.style('display', 'none'); + return; + } + + const finalLabelFontSize = parseFloat(labelElement.style('font-size')); + const originalValueFontSize = 28; // From initial style setting + const valueScaleFactor = 0.6; + const minValueFontSize = 6; + const spacingBetweenLabelAndValue = 2; + + const actualValueFontSize = Math.max( + minValueFontSize, + Math.min(originalValueFontSize, Math.round(finalLabelFontSize * valueScaleFactor)) + ); + valueTextElement.style('font-size', `${actualValueFontSize}px`); + + const labelCenterY = (d.y1 - d.y0) / 2; + const valueTopActualY = labelCenterY + finalLabelFontSize / 2 + spacingBetweenLabelAndValue; + valueTextElement.attr('y', valueTopActualY); + + const nodeWidth = d.x1 - d.x0; + const nodeTotalHeight = d.y1 - d.y0; + const cellBottomPadding = 4; + const maxValueBottomY = nodeTotalHeight - cellBottomPadding; + const availableWidthForValue = nodeWidth - 2 * 4; // padding for value text + + if ( + valueTextElement.node()!.getComputedTextLength() > availableWidthForValue || + valueTopActualY + actualValueFontSize > maxValueBottomY || + actualValueFontSize < minValueFontSize + ) { + valueTextElement.style('display', 'none'); + } else { + valueTextElement.style('display', null); + } + }); + } + const diagramPadding = config.diagramPadding ?? 8; + setupViewPortForSVG(svg, diagramPadding, 'flowchart', config?.useMaxWidth || false); +}; + +const getClasses = function ( + _text: string, + diagramObj: Pick +): Map { + return (diagramObj.db as TreemapDB).getClasses(); +}; +export const renderer: DiagramRenderer = { draw, getClasses }; diff --git a/packages/mermaid/src/diagrams/treemap/styles.ts b/packages/mermaid/src/diagrams/treemap/styles.ts new file mode 100644 index 000000000..6021838c9 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/styles.ts @@ -0,0 +1,51 @@ +import type { DiagramStylesProvider } from '../../diagram-api/types.js'; +import { cleanAndMerge } from '../../utils.js'; +import type { TreemapStyleOptions } from './types.js'; + +const defaultTreemapStyleOptions: TreemapStyleOptions = { + sectionStrokeColor: 'black', + sectionStrokeWidth: '1', + sectionFillColor: '#efefef', + leafStrokeColor: 'black', + leafStrokeWidth: '1', + leafFillColor: '#efefef', + labelColor: 'black', + labelFontSize: '12px', + valueFontSize: '10px', + valueColor: 'black', + titleColor: 'black', + titleFontSize: '14px', +}; + +export const getStyles: DiagramStylesProvider = ({ + treemap, +}: { treemap?: TreemapStyleOptions } = {}) => { + const options = cleanAndMerge(defaultTreemapStyleOptions, treemap); + + return ` + .treemapNode.section { + stroke: ${options.sectionStrokeColor}; + stroke-width: ${options.sectionStrokeWidth}; + fill: ${options.sectionFillColor}; + } + .treemapNode.leaf { + stroke: ${options.leafStrokeColor}; + stroke-width: ${options.leafStrokeWidth}; + fill: ${options.leafFillColor}; + } + .treemapLabel { + fill: ${options.labelColor}; + font-size: ${options.labelFontSize}; + } + .treemapValue { + fill: ${options.valueColor}; + font-size: ${options.valueFontSize}; + } + .treemapTitle { + fill: ${options.titleColor}; + font-size: ${options.titleFontSize}; + } + `; +}; + +export default getStyles; diff --git a/packages/mermaid/src/diagrams/treemap/types.ts b/packages/mermaid/src/diagrams/treemap/types.ts new file mode 100644 index 000000000..8ab973666 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/types.ts @@ -0,0 +1,80 @@ +import type { DiagramDBBase, DiagramStyleClassDef } from '../../diagram-api/types.js'; +import type { BaseDiagramConfig } from '../../config.type.js'; + +export interface TreemapNode { + name: string; + children?: TreemapNode[]; + value?: number; + parent?: TreemapNode; + classSelector?: string; + cssCompiledStyles?: string[]; +} + +export interface TreemapDB extends DiagramDBBase { + getNodes: () => TreemapNode[]; + addNode: (node: TreemapNode, level: number) => void; + getRoot: () => TreemapNode | undefined; + getClasses: () => Map; + addClass: (className: string, style: string) => void; + getStylesForClass: (classSelector: string) => string[]; +} + +export interface TreemapStyleOptions { + sectionStrokeColor?: string; + sectionStrokeWidth?: string; + sectionFillColor?: string; + leafStrokeColor?: string; + leafStrokeWidth?: string; + leafFillColor?: string; + labelColor?: string; + labelFontSize?: string; + valueFontSize?: string; + valueColor?: string; + titleColor?: string; + titleFontSize?: string; +} + +export interface TreemapData { + nodes: TreemapNode[]; + levels: Map; + root?: TreemapNode; + outerNodes: TreemapNode[]; + classes: Map; +} + +export interface TreemapItem { + $type: string; + name: string; + value?: number; + classSelector?: string; +} + +export interface TreemapRow { + $type: string; + indent?: string; + item?: TreemapItem; + className?: string; + styleText?: string; +} + +export interface TreemapAst { + TreemapRows?: TreemapRow[]; + title?: string; + description?: string; + accDescription?: string; + accTitle?: string; + diagramTitle?: string; +} + +// Define the TreemapDiagramConfig interface +export interface TreemapDiagramConfig extends BaseDiagramConfig { + padding?: number; + diagramPadding?: number; + showValues?: boolean; + nodeWidth?: number; + nodeHeight?: number; + borderWidth?: number; + valueFontSize?: number; + labelFontSize?: number; + valueFormat?: string; +} diff --git a/packages/mermaid/src/diagrams/treemap/utils.test.ts b/packages/mermaid/src/diagrams/treemap/utils.test.ts new file mode 100644 index 000000000..bfbd74c59 --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/utils.test.ts @@ -0,0 +1,100 @@ +import { describe, it, expect } from 'vitest'; +import { buildHierarchy } from './utils.js'; +import type { TreemapNode } from './types.js'; + +describe('treemap utilities', () => { + describe('buildHierarchy', () => { + it('should convert a flat array into a hierarchical structure', () => { + // Input flat structure + const flatItems = [ + { level: 0, name: 'Root', type: 'Section' }, + { level: 4, name: 'Branch 1', type: 'Section' }, + { level: 8, name: 'Leaf 1.1', type: 'Leaf', value: 10 }, + { level: 8, name: 'Leaf 1.2', type: 'Leaf', value: 15 }, + { level: 4, name: 'Branch 2', type: 'Section' }, + { level: 8, name: 'Leaf 2.1', type: 'Leaf', value: 20 }, + { level: 8, name: 'Leaf 2.2', type: 'Leaf', value: 25 }, + { level: 8, name: 'Leaf 2.3', type: 'Leaf', value: 30 }, + ]; + + // Expected hierarchical structure + const expectedHierarchy: TreemapNode[] = [ + { + name: 'Root', + children: [ + { + name: 'Branch 1', + children: [ + { name: 'Leaf 1.1', value: 10 }, + { name: 'Leaf 1.2', value: 15 }, + ], + }, + { + name: 'Branch 2', + children: [ + { name: 'Leaf 2.1', value: 20 }, + { name: 'Leaf 2.2', value: 25 }, + { name: 'Leaf 2.3', value: 30 }, + ], + }, + ], + }, + ]; + + const result = buildHierarchy(flatItems); + expect(result).toEqual(expectedHierarchy); + }); + + it('should handle empty input', () => { + expect(buildHierarchy([])).toEqual([]); + }); + + it('should handle only root nodes', () => { + const flatItems = [ + { level: 0, name: 'Root 1', type: 'Section' }, + { level: 0, name: 'Root 2', type: 'Section' }, + ]; + + const expected = [ + { name: 'Root 1', children: [] }, + { name: 'Root 2', children: [] }, + ]; + + expect(buildHierarchy(flatItems)).toEqual(expected); + }); + + it('should handle complex nesting levels', () => { + const flatItems = [ + { level: 0, name: 'Root', type: 'Section' }, + { level: 2, name: 'Level 1', type: 'Section' }, + { level: 4, name: 'Level 2', type: 'Section' }, + { level: 6, name: 'Leaf 1', type: 'Leaf', value: 10 }, + { level: 4, name: 'Level 2 again', type: 'Section' }, + { level: 6, name: 'Leaf 2', type: 'Leaf', value: 20 }, + ]; + + const expected = [ + { + name: 'Root', + children: [ + { + name: 'Level 1', + children: [ + { + name: 'Level 2', + children: [{ name: 'Leaf 1', value: 10 }], + }, + { + name: 'Level 2 again', + children: [{ name: 'Leaf 2', value: 20 }], + }, + ], + }, + ], + }, + ]; + + expect(buildHierarchy(flatItems)).toEqual(expected); + }); + }); +}); diff --git a/packages/mermaid/src/diagrams/treemap/utils.ts b/packages/mermaid/src/diagrams/treemap/utils.ts new file mode 100644 index 000000000..e7e7fcc5c --- /dev/null +++ b/packages/mermaid/src/diagrams/treemap/utils.ts @@ -0,0 +1,64 @@ +import type { TreemapNode } from './types.js'; + +/** + * Converts a flat array of treemap items into a hierarchical structure + * @param items - Array of flat treemap items with level, name, type, and optional value + * @returns A hierarchical tree structure + */ +export function buildHierarchy( + items: { + level: number; + name: string; + type: string; + value?: number; + classSelector?: string; + cssCompiledStyles?: string; + }[] +): TreemapNode[] { + if (!items.length) { + return []; + } + + const root: TreemapNode[] = []; + const stack: { node: TreemapNode; level: number }[] = []; + + items.forEach((item) => { + const node: TreemapNode = { + name: item.name, + children: item.type === 'Leaf' ? undefined : [], + }; + node.classSelector = item?.classSelector; + if (item?.cssCompiledStyles) { + node.cssCompiledStyles = [item.cssCompiledStyles]; + } + + if (item.type === 'Leaf' && item.value !== undefined) { + node.value = item.value; + } + + // Find the right parent for this node + while (stack.length > 0 && stack[stack.length - 1].level >= item.level) { + stack.pop(); + } + + if (stack.length === 0) { + // This is a root node + root.push(node); + } else { + // Add as child to the parent + const parent = stack[stack.length - 1].node; + if (parent.children) { + parent.children.push(node); + } else { + parent.children = [node]; + } + } + + // Only add to stack if it can have children + if (item.type !== 'Leaf') { + stack.push({ node, level: item.level }); + } + }); + + return root; +} diff --git a/packages/mermaid/src/docs/.vitepress/canonical-config.ts b/packages/mermaid/src/docs/.vitepress/canonical-config.ts new file mode 100644 index 000000000..7c2b5aaeb --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/canonical-config.ts @@ -0,0 +1,149 @@ +import type { CanonicalUrlConfig } from './canonical-urls.js'; + +/** + * Canonical URL configuration for Mermaid documentation + * + * This file contains the configuration for generating canonical URLs + * for the Mermaid documentation site. + */ +export const canonicalConfig: CanonicalUrlConfig = { + // Base URL for the Mermaid documentation site + baseUrl: 'https://docs.mermaidchart.com', + + // Disable automatic generation - only use specificCanonicalUrls + autoGenerate: false, + + // Patterns for pages to exclude from automatic canonical URL generation + excludePatterns: [ + // Exclude the main index page (handled by VitePress home layout) + 'index.md', + + // Exclude any draft or temporary files + 'draft-*.md', + '**/draft-*.md', + 'temp-*.md', + '**/temp-*.md', + '*.draft.md', + '**/*.draft.md', + + // Exclude any test files + '*.test.md', + '**/*.test.md', + '*.spec.md', + '**/*.spec.md', + + // You can add more patterns here as needed + // Examples: + // '**/internal/**', // Exclude internal documentation + // '**/archive/**', // Exclude archived content + ], + + // URL transformation rules + transformations: { + // Remove index.md from URLs (e.g., /intro/index.md -> /intro/) + //removeIndex: true, + + // Remove .md extension from URLs (e.g., /syntax/flowchart.md -> /syntax/flowchart) + removeMarkdownExtension: true, + + // Custom path transformations + customTransforms: [ + // Example: Redirect old paths to new paths + // { pattern: /^old-syntax\//, replacement: 'syntax/' }, + // Example: Handle special cases + // { pattern: /^config\/setup\/README$/, replacement: 'config/setup/' }, + // Add your custom transformations here + ], + }, +}; + +/** + * Pages that should have specific canonical URLs + * + * Since autoGenerate is set to false, ONLY pages listed here will get canonical URLs. + * + * Usage: Add entries to this object where the key is the relative path + * of the markdown file and the value is the desired canonical URL. + * + * Examples: + * - 'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html' + * - 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html' + * - 'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html' + */ +export const specificCanonicalUrls: Record = { + // Add your specific canonical URLs here + // Example: + // 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html', + + // Intro section + 'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html', + 'intro/getting-started.md': + 'https://docs.mermaidchart.com/mermaid-oss/intro/getting-started.html', + 'intro/syntax-reference.md': + 'https://docs.mermaidchart.com/mermaid-oss/intro/syntax-reference.html', + + // Syntax section + 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html', + 'syntax/sequenceDiagram.md': + 'https://docs.mermaidchart.com/mermaid-oss/syntax/sequenceDiagram.html', + 'syntax/classDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/classDiagram.html', + 'syntax/stateDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/stateDiagram.html', + 'syntax/entityRelationshipDiagram.md': + 'https://docs.mermaidchart.com/mermaid-oss/syntax/entityRelationshipDiagram.html', + 'syntax/userJourney.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/userJourney.html', + 'syntax/gantt.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gantt.html', + 'syntax/pie.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/pie.html', + 'syntax/quadrantChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/quadrantChart.html', + 'syntax/requirementDiagram.md': + 'https://docs.mermaidchart.com/mermaid-oss/syntax/requirementDiagram.html', + 'syntax/mindmap.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/mindmap.html', + 'syntax/timeline.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/timeline.html', + 'syntax/gitgraph.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gitgraph.html', + 'syntax/c4.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/c4.html', + 'syntax/sankey.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/sankey.html', + 'syntax/xyChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/xyChart.html', + 'syntax/block.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/block.html', + 'syntax/packet.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/packet.html', + 'syntax/kanban.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/kanban.html', + 'syntax/architecture.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/architecture.html', + 'syntax/radar.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/radar.html', + 'syntax/examples.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/examples.html', + + // Config section + 'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html', + 'config/usage.md': 'https://docs.mermaidchart.com/mermaid-oss/config/usage.html', + 'config/icons.md': 'https://docs.mermaidchart.com/mermaid-oss/config/icons.html', + 'config/directives.md': 'https://docs.mermaidchart.com/mermaid-oss/config/directives.html', + 'config/theming.md': 'https://docs.mermaidchart.com/mermaid-oss/config/theming.html', + 'config/math.md': 'https://docs.mermaidchart.com/mermaid-oss/config/math.html', + 'config/accessibility.md': 'https://docs.mermaidchart.com/mermaid-oss/config/accessibility.html', + 'config/mermaidCLI.md': 'https://docs.mermaidchart.com/mermaid-oss/config/mermaidCLI.html', + 'config/faq.md': 'https://docs.mermaidchart.com/mermaid-oss/config/faq.html', + + // Ecosystem section + 'ecosystem/mermaid-chart.md': + 'https://docs.mermaidchart.com/mermaid-oss/ecosystem/mermaid-chart.html', + 'ecosystem/tutorials.md': 'https://docs.mermaidchart.com/mermaid-oss/ecosystem/tutorials.html', + 'ecosystem/integrations-community.md': + 'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-community.html', + 'ecosystem/integrations-create.md': + 'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-create.html', + + // Community section + 'community/intro.md': 'https://docs.mermaidchart.com/mermaid-oss/community/intro.html', + 'community/contributing.md': + 'https://docs.mermaidchart.com/mermaid-oss/community/contributing.html', + 'community/new-diagram.md': + 'https://docs.mermaidchart.com/mermaid-oss/community/new-diagram.html', + 'community/questions-and-suggestions.md': + 'https://docs.mermaidchart.com/mermaid-oss/community/questions-and-suggestions.html', + 'community/security.md': 'https://docs.mermaidchart.com/mermaid-oss/community/security.html', +}; + +/** + * Helper function to get canonical URL for a specific page + * This can be used in frontmatter or for manual overrides + */ +export function getCanonicalUrl(relativePath: string): string | undefined { + return specificCanonicalUrls[relativePath]; +} diff --git a/packages/mermaid/src/docs/.vitepress/canonical-urls.ts b/packages/mermaid/src/docs/.vitepress/canonical-urls.ts new file mode 100644 index 000000000..6c04e1eb1 --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/canonical-urls.ts @@ -0,0 +1,198 @@ +import type { PageData } from 'vitepress'; +import { canonicalConfig, specificCanonicalUrls } from './canonical-config.js'; + +/** + * Configuration for canonical URL generation + */ +export interface CanonicalUrlConfig { + /** Base URL for the site (e.g., 'https://mermaid.js.org') */ + baseUrl: string; + /** Whether to automatically generate canonical URLs for pages without explicit ones */ + autoGenerate: boolean; + /** Pages to exclude from automatic canonical URL generation (glob patterns supported) */ + excludePatterns?: string[]; + /** Custom URL transformations */ + transformations?: { + /** Remove index.md from URLs */ + removeIndex?: boolean; + /** Remove .md extension from URLs */ + removeMarkdownExtension?: boolean; + /** Custom path transformations */ + customTransforms?: { + pattern: RegExp; + replacement: string; + }[]; + }; +} + +/** + * Default configuration for canonical URLs + */ +const defaultConfig: CanonicalUrlConfig = { + baseUrl: 'https://mermaid.js.org', + autoGenerate: true, + excludePatterns: [ + // Exclude the home page as it's handled separately + 'index.md', + // Exclude any temporary or draft files + '**/draft-*', + '**/temp-*', + ], + transformations: { + removeIndex: true, + removeMarkdownExtension: true, + customTransforms: [ + // Transform any special cases here + // Example: { pattern: /^old-path\//, replacement: 'new-path/' } + ], + }, +}; + +/** + * Check if a path matches any of the exclude patterns + */ +function shouldExcludePath(relativePath: string, excludePatterns: string[] = []): boolean { + return excludePatterns.some((pattern) => { + // Convert glob pattern to regex + const regexPattern = pattern + .replace(/\*\*/g, '.*') + .replace(/\*/g, '[^/]*') + .replace(/\?/g, '.') + .replace(/\./g, '\\.'); + const regex = new RegExp(`^${regexPattern}$`); + return regex.test(relativePath); + }); +} + +/** + * Transform a relative path to a canonical URL path + */ +function transformPath(relativePath: string, config: CanonicalUrlConfig): string { + let transformedPath = relativePath; + + // Apply built-in transformations + if (config.transformations?.removeMarkdownExtension) { + transformedPath = transformedPath.replace(/\.md$/, ''); + } + + if (config.transformations?.removeIndex) { + transformedPath = transformedPath.replace(/\/index$/, '/'); + if (transformedPath === 'index') { + transformedPath = ''; + } + } + + // Apply custom transformations + if (config.transformations?.customTransforms) { + for (const transform of config.transformations.customTransforms) { + transformedPath = transformedPath.replace(transform.pattern, transform.replacement); + } + } + + // Ensure path starts with / + if (transformedPath && !transformedPath.startsWith('/')) { + transformedPath = '/' + transformedPath; + } + + // Handle root path + if (!transformedPath) { + transformedPath = '/'; + } + + return transformedPath; +} + +/** + * Generate a canonical URL for a page + */ +function generateCanonicalUrl(relativePath: string, config: CanonicalUrlConfig): string { + const transformedPath = transformPath(relativePath, config); + return config.baseUrl + transformedPath; +} + +/** + * VitePress transformPageData hook to add canonical URLs + */ +export function addCanonicalUrls(pageData: PageData): void { + const config = canonicalConfig; + + // Check for specific canonical URLs first + const specificUrl = specificCanonicalUrls[pageData.relativePath]; + if (specificUrl) { + addCanonicalToHead(pageData, specificUrl); + return; + } + + // Skip if canonical URL is already explicitly set in frontmatter + if (pageData.frontmatter.canonical) { + // If it's already a full URL, use as-is + if (pageData.frontmatter.canonical.startsWith('http')) { + addCanonicalToHead(pageData, pageData.frontmatter.canonical); + return; + } + // If it's a relative path, convert to absolute URL + const canonicalUrl = config.baseUrl + pageData.frontmatter.canonical; + addCanonicalToHead(pageData, canonicalUrl); + return; + } + + // Skip if canonicalPath is set in frontmatter + if (pageData.frontmatter.canonicalPath) { + const canonicalUrl = config.baseUrl + pageData.frontmatter.canonicalPath; + addCanonicalToHead(pageData, canonicalUrl); + return; + } + + // Skip if auto-generation is disabled + if (!config.autoGenerate) { + return; + } + + // Skip if path should be excluded + if (shouldExcludePath(pageData.relativePath, config.excludePatterns)) { + return; + } + + // Generate canonical URL + const canonicalUrl = generateCanonicalUrl(pageData.relativePath, config); + addCanonicalToHead(pageData, canonicalUrl); +} + +/** + * Add canonical URL to page head + */ +function addCanonicalToHead(pageData: PageData, canonicalUrl: string): void { + // Initialize head array if it doesn't exist + pageData.frontmatter.head = pageData.frontmatter.head || []; + + // Check if canonical link already exists + const hasCanonical = pageData.frontmatter.head.some( + (item: any) => Array.isArray(item) && item[0] === 'link' && item[1]?.rel === 'canonical' + ); + + // Add canonical link if it doesn't exist + if (!hasCanonical) { + pageData.frontmatter.head.push(['link', { rel: 'canonical', href: canonicalUrl }]); + } +} + +/** + * Utility function to create a custom configuration + * This can be used to override the default configuration + */ +export function createCanonicalUrlConfig( + customConfig: Partial +): CanonicalUrlConfig { + return { + ...defaultConfig, + ...customConfig, + transformations: { + ...defaultConfig.transformations, + ...customConfig.transformations, + customTransforms: [ + ...(defaultConfig.transformations?.customTransforms || []), + ...(customConfig.transformations?.customTransforms || []), + ], + }, + }; +} diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue new file mode 100644 index 000000000..e41a7096d --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue @@ -0,0 +1,138 @@ + + + diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue index 0914d808e..c5b464bb6 100644 --- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue +++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue @@ -1,134 +1,65 @@