* develop: (783 commits)
chore(deps): update all minor dependencies
chore: Run codecov based on E2E test status
change REAMDME.md coverage from coveralls into codecov
Add codecov.yaml
Upload E2E
set normal mode for vitest coverage
Fix path name
Add codecov to unit tests
Add codecov to E2E
chore: Add coverage scripts
chore: add excludes
chore: update deps
Merge coverages
Add coverage paths
Rebuild
chore: update pnpm
Add coverage for E2E tests
rename plugin variable into info in infoDetector.ts
remove cypress/platform/index.html
update pnpm-lock.yaml
...
* develop: (43 commits)
rename plugin variable into info in infoDetector.ts
remove cypress/platform/index.html
update pnpm-lock.yaml
indent info.html files
update pnpm-lock.yaml
remove empty options in cypress info.spec.ts
format and add theme to cypress info.html
convert the cypress info.spec.js into ts
add messing timeline and info demoes links
change infoDb db export
remove default export in info files
resolve db import in info.spec.ts
remove assigned variables to their variables and export db without default
use object destructuring for getConfig in infoRenderer
move default_info_db into infoDbOF
remove id and diagram assigning in info loader
assign returned variables to their variables
remove handled `ts-ignore` in info diagram
handle optional `.styles`
add info fields interface
...
* develop: (815 commits)
Move filetype Recommendations to the top
Update docs
Update integrations.md per review
Disable coveralls
Update coveralls
Ignore bundlephobia
Update docs
strawman extension and mime type docs
Update docs
Rename info to note
Rename "info" to "note"
Update all patch dependencies
Fix Directives Documentation
Run docs:build
Update tutorial link
Run build
Fix link to Tutorials from n00b-overview page
Correct timeline spelling
UPdated version to 10.2.3
Remove old changelog
...
Updated lintignore and move dockerfile to .dev
Fix
Updated contributing
Fixing GA
Fix contributing.md
Fixing issues after review
No need to change .eslintignore
there is no need for matching, capturing results, and validating nullablity
just using `.test` would be enough and significantly faster
for more info, see https://stackoverflow.com/10940138/16476610
* develop: (22 commits)
Update docs
Added CKEditor and GitHub Writer to available integrations.
chore(deps): update all patch dependencies
build(deps): fix broken pnpm-lock.yaml file
Mermaid version 10.2.0
Mermaid Version 10.2.0-rc.4
Label background fix
Test commit
Fix for regression error in sequenceDiagrams
Fix visibility issue for fields
fix parsing issue with class diagrams
fix: Use unicode arrows in quadrant chart axis
fix: Use unicode arrows in quadrant chart axis
fix lint command
Bump version
Back to JS with jsdoc types
Add unsupported text
Reduce changes in test
Fix deps
Fix lockfile
...
Looks like a bad merge conflict resolution broke this file,
and for some reason, the `packages/mermaid/src/vitepress` bit got
removed when releasing v10.2.0-rc.4.
Fixes: bd1343648e
Fixes: 9c12c42a26
* develop: (66 commits)
Update docs
Update docs
Improve the wording of security level values
Added quadrantChart to the side bar
Added e2e test cases with some fixes
Added documentation for the quadrantChart
Restructured the build function and addressed more review comment
Fixed some parser issue and added test cases for the parser
Fixed review comment
Update docs
Converted files to typescript and added proper types
Fix blog linting
Debug fetch-contributors
Fix lockfile
Revert "Replace esno & ts-node with tsx"
[draft] Added support for quadrant chart
Fix lockfile
Fix build
Update pnpm-lock
Replace esno & ts-node with tsx
...
Merge conflicts:
- pnpm-lock.yaml
* develop: (66 commits)
Update docs
Update docs
Improve the wording of security level values
Added quadrantChart to the side bar
Added e2e test cases with some fixes
Added documentation for the quadrantChart
Restructured the build function and addressed more review comment
Fixed some parser issue and added test cases for the parser
Fixed review comment
Update docs
Converted files to typescript and added proper types
Fix blog linting
Debug fetch-contributors
Fix lockfile
Revert "Replace esno & ts-node with tsx"
[draft] Added support for quadrant chart
Fix lockfile
Fix build
Update pnpm-lock
Replace esno & ts-node with tsx
...
- The current wording can be misinterpreted because, for some people
'tags' might not be associated with HTML tags.
- Improve the wording to make it clear that HTML tags are intended.
This adds the projects `mermaid-isomorphic`, `rehype-mermaidjs`, and
`gatsby-remark-mermaid` to the integrations page.
This also removes `remark-mermaid`. This project is outdated and
unmaintained.
The classDiagramGrammer.spec.ts unit test had some bad filepath
manipulation that fails on UNIX platforms.
Instead, we can use the recommended method from the Node.JS
documentation, see https://nodejs.org/api/esm.html#importmetaurl.
Fixes: 221640aa25
* develop: (237 commits)
submit built docs
update Font Awesome Version
Clarify FontAwesome support
Update version
Fix classParser
Check for conflict when linting jison
Update class grammar test
fix Class diagram grammar
Skip sourcemap
Bump version
Update deps
Fix unit tests
Update vite
Fix applitools cypress
Update packages/mermaid/package.json
chore(deps): update dependency typescript to v5
fix typedoc
fix(deps): update all minor dependencies
chore(deps): update pnpm to v8
chore(deps): update fregante/setup-git-user action to v2
...
* develop: (33 commits)
Update version
Fix classParser
Check for conflict when linting jison
Update class grammar test
fix Class diagram grammar
Skip sourcemap
Bump version
Update deps
Fix unit tests
Update vite
Fix applitools cypress
Update packages/mermaid/package.json
chore(deps): update dependency typescript to v5
fix typedoc
fix(deps): update all minor dependencies
chore(deps): update pnpm to v8
chore(deps): update fregante/setup-git-user action to v2
fix(deps): update all minor dependencies
chore(deps): update dependency start-server-and-test to v2
chore(deps): update dependency rimraf to v5
...
* 'renovate/all-minor' of https://github.com/mermaid-js/mermaid:
fix(deps): update all minor dependencies
chore(deps): update pnpm to v8
chore(deps): update fregante/setup-git-user action to v2
Test that `src/diagrams/*/styles.ts` module returns a valid
CSS stylesheet that can be parsed via [stylis][1] and then
becomes a valid CSS that [csstree-validator][2] validates.
We test this for every diagram and for every theme, because
many of the invalid CSS bugs are caused by missing theme vars.
There are some CSS errors that I couldn't easily fix, so I've written
the tests to ignore the following CSS errors:
- 'Unknown property `rx`' (Valid in SVG2 draft and in some browsers)
- 'Unknown property `ry`' (Valid in SVG2 draft and in some browsers)
- 'Unknown property `dy`'
- This doesn't seem to be valid CSS in any SVG version, but maybe
some browsers support it 🤷 I feel like we should probably change
this though.
[1]: https://github.com/thysultan/stylis
[2]: https://github.com/csstree/validator
The `scaleLabelColor` variable in `theme-forest` and `theme-neutral`
was set to `"calculated"`, as it defaults to `this.labelTextColor`
**before** `this.labelTextColor` was set.
Moving the `this.labelTextColor` assignments before `scaleLabelColor`
is calculated fixes this.
Fixes mindmap and timeline invalid CSS in theme forest and neutral.
Define `excludeBkgColor` for `theme-dark` to fix invalid CSS
for gantt diagrams.
All the other themes defined this to '#eeeeee', but I thought that
was a bit too bright in a dark theme, so instead I set it to
`darken(this.sectionBkgColor, 10);`.
`border2` is a theme variable used by the CSS for flowcharts and
user-journey.
I've defined this to default to `tertiaryBorderColor` in theme-base,
as other themes tend to set `border2` to the same value as
`clusterBorder`, which in theme-base is `tertiaryBorderColor`.
Define `arrowheadColor` as `invert(this.background)` in
`theme-base.js`, as it's currently `undefined`, which causes CSS
issues when using `theme-base`.
I've picked `invert(this.background)` so that it matches
the default value of `lineColor`.
Currently, `requirementBorderSize` defaults to `primaryBorderColor`,
which is a color, not a valid SVG `stroke-width`.
Instead, I've made it default to `1`.
Fix an invalid value for the CSS `fill-opacity` value.
Percentage values for `fill-opacity` are only supported in the SVG 2.0
draft, so according to [MDN][1]:
> it is not widely supported yet, […] as a consequence, it is best
> practices [sic] to set opacity with a value in the range `[0-1]`.
[1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity
The current `personBorder`/`personBkg` theme variables for C4 diagrams
are set to the string `'calculated'`.
However, despite being `'calculated'`, they never seem to change to
anything else, and so become invalid CSS variables.
I've instead changed these to just default to base theme vars,
as that's what they do in [`these-base.js`][1].
[1]: 727bf30824/packages/mermaid/src/themes/theme-base.js (L106-L107)
In #3938, it appears that the marker sizes for pointEnd was
unintentionally changed. This reverts the change in marker size.
It is also possible that the intention was to change the viewBox size
for both start and end, but I doubt this since it makes the arrows
significantly smaller than other markers.
* develop: (81 commits)
revert pnpm changes
doc update
auto generated from pnpm run
auto generated from pnpm run
linting
added example of Bar chart
Update docs
Adding rendering tests and unit tests
Syntax for markdown strings is a single backtick.
updated labels in the chart
Update docs
updated example data smaller
Bar chart
fix: Remove comment line completely
fix: trimStart to text
test: add space before init
fix uncaughexception in tests
fix(#4256): Keep error diagram on screen
fix(#4137): Cleanup comments before parsing
Update docs
...
Remove the `use-inline-specifiers-lockfile-format=true` pnpm option
from our `.npmrc` file.
This was added in
[PNPM version v7.7.0](https://github.com/pnpm/pnpm/releases/tag/v7.7.0)
and should make our `pnpm-lock.yaml` file much nicer,
but unfortunately, renovate doesn't seem to support it (unsure why?).
This means that whenever we do a `pnpm install` locally, the lock-file
gets changed, and whenever renovate makes a PR, it changes the
lock-file back. This causes a lot of unnecassary merge conflicts.
The `node16` module resolution requires imports to use the `.js` file
extension in type definitions.
`@rollup/plugin-typescript` is needed to make this work with the Vite
setup used by Mermaid.
The module option for Mermaid internally is set to `nodenext`. This is
needed to support `.json` imports. Note that setting `module` to
`node16` or `nodenext` implies a matching `moduleResolution` value.
The gantt diagram that were supposed to test whether
`todayMarker off` works wasn't working properly, because
`todayMarker on` wasn't working (i.e. the test never failed).
I've fixed this issue, and added a test that checks whether
`todayMarker on` works.
Fixes: https://github.com/mermaid-js/mermaid/issues/4198
* develop:
fix(deps): update all non-major dependencies
chore(deps): update all non-major dependencies
Update Diagram.ts
Update Diagram.ts
feat: added internal label
feat: improve documentation
make clearer
fix: invalid url and generate docs
Update integrations.md to include Mermaid Flow
feat: expose the diagram api
fixup! fixup! Move pie outerStrokeWidth to theme variables, update docs
fixup! Move pie outerStrokeWidth to theme variables, update docs
Move pie outerStrokeWidth to theme variables, update docs
fixup! fixup! feat(pie): adding outer border, text position options
fixup! feat(pie): adding outer border, text position options
Update packages/mermaid/src/diagrams/pie/pieRenderer.js
feat(pie): adding outer border, text position options
* master:
v10.0.2
fix: dayjs import extension
Setting version to 10.0.1
#4168 Adding the correct offset for the edges
Updated import of cytoscape for consistent behavior
Use cytoscape esm
Revert "chore: Defer elk loading"
Revert "Split cytoscape"
fix: Class with members and styles
Add a quick test that ensures `ganttDb` correctly adds `1d` (1 day),
even on days with 25 hours.
This test only runs if the test PC has the TZ='America/Los_Angeles'
set (California has daylight savings).
I've added a test to the GitHub Actions `test.yml` action too for this.
It should only add about 5 seconds to each test, so it isn't too bad.
Replace Mermaid's dependency on `moment` with `dayjs`.
[Moment is now in maintenance mode][1], and they don't recommend
using it.
[Dayjs][2] has almost exactly the same API as moment, and is still
curently being maintained. Unlike moment, dayjs objects are immutable,
which makes our life much easier, but we need to do
`a = a.add(1, "day")` instead of just `a.add(1, "day")`.
We can't use `dayjs.duration`, because unlike `moment.duration`,
[dayjs durations always degrade to ms][3].
This causes issues with daylight savings, since it assumes that each
day is 24 hours, when some days have 23/25 hours with daylight savings.
(it also assumes that each month is 30 days).
However, `dayjs.add(1, "d");` correctly adds 1 days, even when that
day is only 23 hours long, so we can use that instead.
[1]: https://momentjs.com/docs/#/-project-status/
[2]: https://day.js.org/
[3]: https://day.js.org/docs/en/durations/durations
Co-authored-by: Alois Klink <alois@aloisklink.com>
* develop: (23 commits)
Fix test
refactor(deps): replace `moment` with `dayjs`
test(gantt): test daylight savings in ganttdb
Update .lycheeignore
chore: dagre-d3-es@7.0.9
chore: Add tsdoc for registerLazyLoadedDiagrams
feat: Ensure proper detection for flowcharts
fix: Class label not visible if class is already defined
Update import
fix TS errors
fix TS errors
feat: Match timeline section width to tasks
chore: TimelineRenderer in TS
Fix types
fix: Detector order
Lint
Cleanup nodes.js
docs: Update classdiagram docs
classLabel tests
Formatting
...
Replace Mermaid's dependency on `moment` with `dayjs`.
[Moment is now in maintenance mode][1], and they don't recommend
using it.
[Dayjs][2] has almost exactly the same API as moment, and is still
curently being maintained. Unlike moment, dayjs objects are immutable,
which makes our life much easier, but we need to do
`a = a.add(1, "day")` instead of just `a.add(1, "day")`.
We can't use `dayjs.duration`, because unlike `moment.duration`,
[dayjs durations always degrade to ms][3].
This causes issues with daylight savings, since it assumes that each
day is 24 hours, when some days have 23/25 hours with daylight savings.
(it also assumes that each month is 30 days).
However, `dayjs.add(1, "d");` correctly adds 1 days, even when that
day is only 23 hours long, so we can use that instead.
[1]: https://momentjs.com/docs/#/-project-status/
[2]: https://day.js.org/
[3]: https://day.js.org/docs/en/durations/durations
Add a quick test that ensures `ganttDb` correctly adds `1d` (1 day),
even on days with 25 hours.
This test only runs if the test PC has the TZ='America/Los_Angeles'
set (California has daylight savings).
I've added a test to the GitHub Actions `test.yml` action too for this.
It should only add about 5 seconds to each test, so it isn't too bad.
* develop: (85 commits)
fix Lint
Update CHANGELOG.md
Update CHANGELOG.md
fix: fix exports
Fix readme link
Regenerate mermaid docs
Add deepdwn to cspell
Add Deepdwn to native integrations list
docs: Fix changelog
docs: v10 breaking changes
Remove `null` from diagrams before render
fix docs diagram
Updated version
Minor cleanup to trigger build.
Fix spellings
Wrap option working in test case
Fix typos
Minor cleanup
Removed the deprecated use of mindmap in Demo
Minor cleanup
...
Both render and parse are async now.
Return type of render contains svg and bindFunctions.
Parse will not throw error if parseOptions.silent is passed.
* develop:
Add highlight tag info in contributing.md
chore(deps): update dependency cypress to v12
docs: fix links
Fix types
chore(deps): update dependency vite to v4
Cache eslint in `pnpm run lint:fix`.
This was added to the `pnpm run lint` script in
b7f9495 (build: add eslint --cache file, 2022-08-27), but we
didn't add it to `pnpm run lint:fix` due to worries about cache
invalidation.
However, we switched to using `--cache-strategy content` in
b3e509b7 (build(lint): cache eslint with strategy content, 2023-02-05),
which should avoid any caching issues.
Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
* develop: (45 commits)
Showcase section to the docs - keepings docs up to date (#4055)
bugfix: add missing d3 curves to flowchart and docs
fix(deps): update dependency dagre-d3-es to v7.0.8
build(pre-commit): cache eslint in pre-commit
build(lint): cache eslint with strategy content
Update cypress/integration/rendering/sequencediagram.spec.js
feat(er): allow leading underscore for attributes name
ci(lint): show nice error on lint failure
chore: add moment to dependencies
Update docs
Update mindmap.md
chore: remove moment-mini
docs(readme-ch): fix twitter link
build(lint): cache prettier on `pnpm run lint`
fix: moment-mini default exporter
docs(readme): update broken twitter badge
test(er): improve tests on multiple key constraints
Fixes Typo, remove console.log
doc(er): add documentation on multiple key constraints
feat(er): allow multiple constraints on attributes
...
Run eslint with `--cache` to speed up pre-commit scripts.
This was added to the `pnpm run lint` script in
b7f9495a (build: add eslint --cache file, 2022-08-27)
and doesn't seem to be causing any issues.
I haven't enabled `--cache` for `prettier` since as of prettier 2.8.0,
their cache invalidation doesn't yet work with prettier plugins.
Cache eslint using `--cache-strategy content` instead of the default
`--cache-strategy metadata`.
By default, `eslint` uses the file metadata (e.g. modification time)
to detect when the cache should be invalidated.
However, this is not efficient with `git`, since git constantly changes
the modification time,
e.g. running `git switch main && git switch original-branch` would not
change the file contents, but would change the file mtimes and force
eslint to re-lint everything.
Using the file contents is slower (~3% for me), but more resilient.
See
https://eslint.org/docs/latest/use/command-line-interface#--cache-strategy
[Prettier 2.7.0](https://prettier.io/blog/2022/06/14/2.7.0.html) added
a `--cache` CLI option to greatly speed up subsequent prettier runs.
By default, the cache is stored in
`./node_modules/.cache/prettier/.prettier-cache` and uses an `md5`
checksum of the contents as the cache-key.
On my PC, running `pnpm run lint` used to take 13.9 seconds, but now
it only takes 6 seconds.
Potential issues
----------------
Although updating Node.JS/Prettier will invalidate the cache,
updating or changing prettier plugins won't invalidate the cache.
Since we do use `prettier-plugin-jsdoc` in Mermaid, this might cause
a minor issue, but CI should catch it.
YAML front-matter is currently only used for Vitepress.
Because of that, to avoid confusion, we can remove this YAML
front-matter when converting the Markdown in packages/mermaid/src/docs
to go into the `docs/` folder for GitHub browsing.
Add the auto-generated header after any YAML front-matter blocks.
YAML front-matter is normally only valid in Markdown when it's at the
beginning of the Markdown file. GitHub/Vitepress may otherwise render
it incorrectly.
Change the `transformBlocks` function, which transforms a markdown str,
and instead making it into a
`transformMarkdownAst` function, which transforms a Markdown AST.
This means we can use the remark/unifiedjs plugin infrastructure, see
https://unifiedjs.com/learn/guide/create-a-plugin/
Vitepress uses YAML frontmatter to configure Vitepress specific
settings, see https://vitepress.vuejs.org/config/frontmatter-configs
We just need to use `remark-frontmatter` to add support for it.
GitHub also renders the YAML front-matter nicely in a table
automatically, but maybe we should instead strip it, if it's only
used by Vitepress?
* sidv/properlyWaitTests:
feat: Wait for rendering to finish before taking image snapshots
Update docs
chore(deps): update all non-major dependencies
Fix: Too many `primaryBorderColor`
vitest is throwing an error, since these types are used in
packages/mermaid/src/utils.ts, but are not being mocked.
I've added all the curve types I needed to make Vitest happy.
At some point, we may need to improve these mocks, since in d3,
they have the type CurveFactory, not string.
Fixes a semantic merge conflict due to the PRs:
- https://github.com/mermaid-js/mermaid/pull/3954
Changed `docs.mts` to use a remark object created by `remark()`
- https://github.com/mermaid-js/mermaid/pull/3946
Added test code that mocked the frozen remark object
(e.g. `remark` not `remark()`).
To fix this issue, we can mock `remark()` so that it always returns
the same remark object, which can then be used the `docs.mts` script,
as well as spied on in the `docs.spec.ts` test file.
Reported-by: Sidharth Vinod <sidharthv96@gmail.com>
The [lycheeverse/lychee-action][1] GitHub action keeps timing
out when trying to check any of the links from twitter.com
My guess is maybe Twitter has anti-bot measures active
against GitHub's CI servers.
[1]: https://github.com/lycheeverse/lychee-action
Included an example for adding a line break to notes. It seems like an issue irking a lot of (new) users
Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Chidozie Nnachor <Chidozie.Nnachor@keylane.com>
Support using GFM in markdown documentation.
GitHub has some custom features in their Markdown documentation.
For example, they support using tables, footnotes, and task lists.
Vitepress supports tables too.
However, remark sometimes throws an error when parsing tables,
so we should use `remark-gfm` to handle them.
Pre-calculate the entity-relationship diagram namespace UUID.
This UUID is always constant, so we can pre-calculate it to save a
bit of processing power on the client.
Co-authored-by: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
* master: (23 commits)
Update vitepress
fix: Add icon css
fix Top level await
v9.3.0
bump dagre-es 7.0.6
Bump mermaid version
Update dagre-es
Bump mermaid version
fix: Incorrect removal of existing elements
fix: add .js to external imports.
fix: add .js to external imports.
Bump mermaid version
fix: add .js to external imports.
Bump mermaid version
fix: Throw correct errors when parsing diagrams with errors
Update url snapshot test for external diagrams
Update url snapshot test for external diagrams
Updated package number
Updated package number
Updated package number to 9.3.0-rc1
...
The entity relation diagram uses uuid v4, which is randomly generated.
uuid v5 uses a SHA-1 hash, which makes the uuid deterministic.
The input strings are unique for each diagram, so this should be
okay.
* 'develop' of https://github.com/mermaid-js/mermaid: (40 commits)
lint
fix typescript error
fix(docs): build the docs
fix(docs): remove duplicate section
chore(deps): update all non-major dependencies
Update docs/misc/integrations.md
Add links to github atom add-ons
remove links from atom.io; add note Atom has been archived
set svg role to 'graphics-document document'
common function for a11y; add to renderAsync; + renderAsync spec
fix cspell
fix cspell
fix lint
refactor theming doc
remove typeof
use camelCase
make test title clearer
update /docs
add test for multi-line accDescr
use MockedD3, spies in util insertTitle spec (remove MockD3)
...
* origin/develop:
chore: Update cspell
Update docs
fix: docs build command
chore: Rebuild docs if linting fails
chore: Format Mermaid.vue
Made mermaidConfig a local variable so that it cannot be shared cross rendering.
Fixed an issue that diagrams disappear from docs pages when switching themes or reloading pages
Fixed the issue that theme-switch does not work on docs.
Get base sha from PR
Run doc lint only if files changed
Run doc lint only if files changed
Run doc lint only if files changed
split lint docs action
split lint docs action
fix: File location
fix(docs): Test auto commit
fix(docs): Test auto commit
fix(docs): Test auto commit
chore: Update docs path
chore: Auto build docs if only src/docs is changed
* origin/develop: (564 commits)
chore: Format Mermaid.vue
Made mermaidConfig a local variable so that it cannot be shared cross rendering.
Fix for issue #3882 moving the label when the path has been modified
Small fix for issue #3881
Fixed an issue that diagrams disappear from docs pages when switching themes or reloading pages
Fixed the issue that theme-switch does not work on docs.
chore: Fix mindmap link
chore: Switch back from unpkg to jsdelivr
delete functions not used in diagrams/c4 code (dead code)
Minor change
feat: Add @include support to docs
feat: Add @include example to docs
feat: Add @include support to docs
cleanup
fix lines
fix Async rendering
Revert "sync"
chore(deps): update pnpm to v7.17.1
chore(deps): remove dependency on `graphlib`
test(e2e): make gitgraph snapshots consistent
...
Adds a custom error message for any mermaid diagram that starts with
a `---`. Normally, these are expected to be part of a YAML front-matter
block, but indentation issues or a missing closing `---` may cause
these to be not parsed correctly.
`graphlib` has recently been replaced with the ESM version of
graphlib bundled with
[`dagre-d3-es`](https://www.npmjs.com/package/dagre-d3-es), in commit
f687abb1 (chore: Use `graphlib` from `dagre-d3-es`, 2022-11-20)
This means we can safely remove it from our dependencies list.
Fixes: f687abb165
Add a commit id to 'should render a simple gitgraph with a title',
as otherwise the gitgraph renderer picks a random commit ID, and so
image snapshots will be different.
Mermaid diagrams that have YAML front-matter can now be indented in
HTML code, see commit:
5cfa9196 (fix: support parsing indented mmd YAML from HTML, 2022-11-27)
Some diagrams previously had a mix of tabs/spaces for indentation.
In order for `dedent` to work, these diagrams had to be converted to
using a consistent indentation.
In order to parse the YAML front-matter in a Mermaid diagram, the
YAML seperators **MUST NOT** be indented, e.g.:
````markdown
```mermaid
---
title: This is fine.
---
```
```mermaid
---
title: This is not fine, because the `---` are indented.
---
```
````
However, this makes it very difficult to write nice Mermaid diagrams in
HTML code-blocks.
This commit uses [`ts-dedent`](https://www.npmjs.com/package/ts-dedent)
to automatically remove the indentation from Mermaid diagrams when
parsed from HTML. Mermaid diagrams from mermaidAPI.render() are **NOT**
dedented, as that API is called from JavaScript code, and therefore
users can easily `dedent` their own diagrams.
* develop: (79 commits)
chore: docs:build
chore: docs:build
tiny fix and change: "The/y cannot" -> "Cannot..."
remove 'horz' from cSpell.json
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove 'horz' from cSpell.json
Revert "Added pie"
chore: Fix cSpell in pieRenderer
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove console stmt
#3831 Re-enabling themes for er diagrams
#3835 Adding path to list of elements to be styled
#3882 fix for issues with mindmaps with only a single node
chore(deps): update pnpm to v7.17.0
docs: Remove warning in readme
chore(deps): update lycheeverse/lychee-action action to v1.5.4
...
* develop: (21 commits)
chore: docs:build
chore: docs:build
tiny fix and change: "The/y cannot" -> "Cannot..."
remove 'horz' from cSpell.json
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove 'horz' from cSpell.json
Revert "Added pie"
chore: Fix cSpell in pieRenderer
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove console stmt
#3831 Re-enabling themes for er diagrams
#3835 Adding path to list of elements to be styled
#3882 fix for issues with mindmaps with only a single node
Integrations added - Visual Studio Code [Polyglot Interactive Notebooks]
Fix typos
#3778 Adding a hexgon shape
...
* develop:
chore(deps): update pnpm to v7.17.0
docs: Remove warning in readme
chore(deps): update lycheeverse/lychee-action action to v1.5.4
chore: Add size shield in readme
Fix example for Git diagrams
Fix TS errors
Add interface for DiagramDb and other minor changes
Disallow leading whitespace before delimiter
Add title support using YAML frontmatter
code previously manually inserted idSelector before the generated CSS.
This could produce incorrect CSS.
Adding & in front of rules will ensure that it behaves properly.
Stylis seems permissive about the lack of nesting selector, but fails
if there is no selector at all. (e.g. "{...props...}")
We should probably do this for each diagram's style.ts files as well
* sidv/viz:
Fix Lodash import
fix: Viz build
feat: Add package visualization
Ignore stats.html
feat: Add bundle visualization
style(docs): use `github-dark` hightlight theme
refactor(docs): use default vitepress highlighter
fix: Move redirection to router
chore: Add docs to redirect.ts
feat: Redirect old documentation links.
comments in states are skipped now
Remove extra arrow and adjust cross position
* develop: (233 commits)
style(docs): use `github-dark` hightlight theme
refactor(docs): use default vitepress highlighter
fix: Move redirection to router
ci(renovate): disable pinning dependencies
Revert "chore(deps): pin dependencies"
change shiki getHighlighter import
create separate spec for stateRenderer-v2
diagramStates should not be global; pass it into functions; minor comment fixes
diagramClasses no longer needs to be cached; mermaidAPI no longer calls it repeatedly
(minor) import expectTypeOf in spec
(minor) fix JSdoc tag
+ spec stateRenderer-v2.js getClasses() to verify it returns a {}
(minor) fix JSdoc types in comments
(minor) add comments, remove duplicated line
chore: Add master to link checker
chore: Add docs to redirect.ts
stateDB classes must be a {} not []
feat: Redirect old documentation links.
add stateDiagram-v2 to list of graphs with classDefs
fix(docs): ClassDiagram table
...
Replace the dagre and dagre-d3 libraries with dagre-d3-es.
Both dagre and dagre-d3 are deprecated and unmaintained,
and haven't been updated for more than 3 years.
Since dagre-d3 still requires an old version of d3, this causes
a bunch of security warnings,
e.g. https://github.com/advisories/GHSA-36jr-mh4h-2g58
The [dagre-d3-es](https://github.com/tbo47/dagre-es) package is a fork
that contains support for `"d3": "^7.6.1"`. Also, it's ESM, so we will
hopefully get smaller bundle sizes too. The only issue is that this
fork isn't very well used (only has 3000 weekly downloads),
compared to `dagre-d3`'s 250,000 weekly downloads.
(although to be fair, a large proportion of dagre-d3's downloads
probably come from mermaid)
Since it's is a less popular package,
**I've pinned `dagre-d3-es` to `"7.0.2"` instead of `"^7.0.2"`**.
This does mean if there is a bug in `dagre-d3-es`, we will have to
manually bump it ourselves, but it also means we won't accidentally
be sending a buggy version of `dagre-d3-es` out to users in cases
something changes (it might be worth disabling renovate for this
if we're feeling paranoid!)
Sometimes, the mindmap e2e tests take a snapshot when the mindmap
SVG has been created, but hasn't yet been fully rendered.
This adds a quick check for a mindmap section root, so that the
snapshot is only taken after the mindmap diagram has started
rendering.
I was also running into JSDoc ESLint warnings, so I moved the file
into a TypeScript file to fix those warnings.
Currently, we have mindmap tests in the
cypress/integration/rendering/mermaid.spec.js which is a bit
odd. They should probably all be in the mindmap.spec.js file.
Use the `github-dark` highlight theme for fence blocks in vitepress,
instead of the default `material-palenight` theme.
This increases the contrast ratio of `#comments` from 2.75:1 to 4.43:1,
which is a lot more visible.
It still doesn't reach WCAG 2.0 level AA contrast standards,
which requires 4.5:1 as a minimum constrast ratio, but 4.43:1 is
pretty close, and we don't need to manually modify the theme's colours.
Use the default vitepress highlighter instead of making our own
highlighter using shiki.
The benefits are:
- We don't need to directly depend on shiki
- `mermaid-example` code-blocks will use the same highlighting
as other languages (e.g. `html`/`js`).
- We can control the theme from the global `vitepress` config.
- Darkmode/lightmode themes are supported
- Escaping is already handled by the default highlight function
We shouldn't pin dependencies unless we have to.
This is for two reasons:
- If a dependency has a security issue, users should be able to
easily update the dependency, before `mermaid` makes a new release
- If using `mermaid.core.js` in an app, using a dependency range
means that users can bundle less dependencies.
E.g. they won't need to bundle `lodash@4.17.y` just becasue mermaid
needs `lodash@4.17.x`.
For development/CI, our dependencies are pinned by pnpm-lock.yaml
file anyway.
* develop:
chore(deps): update all non-major dependencies
fix(deps): update all non-major dependencies
fix: `sourceLinkTemplate` in typedoc
only call getClasses if the diagram renderer supports it
fix typo
merge fix: get classDefs only if diagram is in CLASSDEF_DIAGRAMS
use lodash isEmpty instead of method defined in utils
chore: Fix cspell
fix: Type of DiagramStyleClassDef, general cleanup
change spec descriptions to active voice (= shorter b/c 'should' isn't needed)
functions and specs: removeExistingElements
functions and specs: createUserstyles; minor changes
functions and specs: createCssStyles, appendDivSvgG,cleanUpSvgCode, putIntoIFrame [for render]
add MockedD3.ts
const isSandboxed, isLooseSecurityLevel, fontFamily; a few more CONSTs
more meaningful var names; move related lines together; const idSelector
comment the main steps (prepare to break into functions that can be tested)
render: define const iFrameId, enclosingDivID and _selector to use in function
specs: encodeEntities, decodeEntities
render: constants
Lock down the GITHUB_TOKEN permissions.
lychee only needs `GITHUB_TOKEN` to read public
data without hitting rate-limits, so having read-only
access to contents should be fine.
Default mermaid back to being a CommonJS module.
Improrting Mermaid as CommonJS (e.g. using `require("mermaid")`)
is normally broken (since v8), due to it's dependency on d3,
which is now ESM only.
However, it looks like some software
(e.g. TypeScript, in the docusaurus project)
could still handle the CommonJS version of Mermaid.
This commit now means that older versions of Node/build-tools
should now default to using the CommonJS version of Mermaid.
Newer tools should still see that the `"module"` field points to ESM,
or use the `exports["."]["import"]` field to load ESM.
I noticed that the link to `Tutorials.md` was broken in this README.
While fixing this I found some other broken links in the same section
of the README, that I tried to fix as well.
(I suspect these files were moved at some point)
* develop:
chore(docs): Update live editor links
update user story link
feat(gantt): Add option 'tickInterval' for custom tick interval
Convert attr to classed
Convert attr to style
* origin/develop:
docs(git): Regenerate
docs(git): Add a quoted branch name example
fix(git): Support quoted branch names
Ensure example code and rendered output are synced
Fill inheritance arrow with background color
Exposes the registerDiagram() function publically as
`mermaid.mermaidAPI.registerDiagram` so that users can add their
own diagrams at bundle-time.
This is instead of using the lazyLoadedDiagrams config setting.
Remove the callback function parameter from registerDiagram.
Instead, we can just load the callback function from the `injectUtils`
diagram definition, if it exists.
Mostly, fixing these eslint-plugin-tsdoc style issues involved:
- Moving types from JSDoc to TypeScript types
- Making sure that all `@param paramName - description`
had both a `-` and a description.
Occasionally, for some functions, if the JSDoc was completely
empty, I just deleted it, since there was no point in keeping it.
* develop: (21 commits)
Theme update from release 9.2
testcode
Delete dependabot.yml
changed cspell config in eslint from warn to error
Update .eslintrc.json
fix cypress tests for erDiagram, add eslint-plugin-no-only-tests plugin because of this comment: https://github.com/mermaid-js/mermaid/pull/3647#issuecomment-1281163858
chore: Add CORS to vite dev
configured 3 more words in cspell.json
removed eslint-ignore statements
chore(deps): pin dependencies
chore(deps): update all non-major dependencies (#3671)
style(sequence): rename lineStarty to lineStartY
style: fix @cspell/eslint warnings
test(gantt): remove incorrect comment
added words to cspell ignore words list, removed mywords.txt
update: open graph image
fix: prettier
remove id attribute
feat(issue#3675): added open graph meta tags
updated eslint config and fixed cspell warnings
...
* 'develop' of https://github.com/emersonbottero/mermaid:
docs: fix layout problem
docs: added warning and notes
docs: added warning and notes
docs: added warning and notes
docs: small improvements
* upstream/develop: (81 commits)
style(docs): fix prettier issues (extra newline)
Corrected theme variables reference table layout
Fix typos in README.md
build: lint-staged docs in packages/mermaid/src/…
chore(docs): run `pnpm run docs:build`
build(docs): fix `pnpm run docs:{build,verify}`
docs: replace `yarn` with `pnpm` in dev guide
build: re-enable `prepare` script for husky setup
build: update pre-commit rules to use `pnpm`
Arrow tip aligned to edge of box
updated pnpm-lock file
ci(e2e): Skip pnpm cache if skipping cypress run
ci(e2e): remove `headless` arg from cypress run
build(dev): Fix dev server not showing mermaid.js
Fixed sample test
Adding example diagram as a template for a new diagram
Removed test folder
Returning the borders to the e2e tests
Fix for tests
Updated version
...
Please refer our [Security Policy](https://github.com/mermaid-js/.github/blob/main/SECURITY.md) and report to keep vulnerabilities confidential so we can release fixes first.
## Before you submit...
We like to help you, but in order to do that should you make a few things first:
- Use a clear and concise title
- Fill out the text fields with as much detail as possible.
- Never be shy to give us screenshots and/or code samples. It will help!
- type:textarea
attributes:
label:Description
description:Give a clear and concise description of what the bug is.
placeholder:When I do ... does ... happen.
validations:
required:true
- type:textarea
attributes:
label:Steps to reproduce
description:Give a step-by-step example on how to reproduce the bug.
placeholder:|-
1. Do this
2. Do that
3. ...
4. Bug!
validations:
required:true
- type:textarea
attributes:
label:Screenshots
description:If applicable, add screenshots to help explain your issue.
- type:textarea
attributes:
label:Code Sample
description:|-
If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
Any text pasted here will be rendered as a Code block.
render:text
- type:textarea
attributes:
label:Setup
description:|-
Please fill out the info below.
Note that you only need to fill out the relevant section
value:|-
- Mermaid version:
- Browser and Version: [Chrome, Edge, Firefox]
- type:textarea
attributes:
label:Suggested Solutions
description:>
If applicable, suggest solutions that could resolve the bug.
It would help maintainers/contributors to not waste time looking for the solution. Even pointing the line causing the bug would be great!
placeholder:|-
- Variable `parser` in file <filepath> is not initialised ...
Please read in detail about how to contribute documentation and code on the [Mermaid documentation site.](https://mermaid-js.github.io/mermaid/#/development)
---
Here are a few things to know to get you started on the right path.
# Mermaid contribution cheat-sheet
Below link will help you making a copy of the repository in your local system.
If you don't have direct access to push to mermaid repositories, make a fork first. Then clone. Or clone directly from mermaid-js:
```bash
```bash
git clone git@github.com:mermaid-js/mermaid.git
git clone git@github.com:mermaid-js/mermaid.git
cd mermaid
cd mermaid
```
Install required packages:
```bash
# npx is required for first install as volta support for pnpm is not added yet.
# npx is required for first install as volta support for pnpm is not added yet.
npx pnpm install
npx pnpm install
pnpm test
pnpm test
```
```
## Committing code
### Docker
We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this:
If you are using docker and docker-compose, you have self-documented `run`bash script, which is a convenient alias for docker-compose commands:
- Large changes reviewed by knsv or other developer asked to review by knsv
- Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (updates to the `src/docs` folder is also allowed via direct commits)
To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
One example:
`feature/945_state_diagrams`
Another:
`bug/123_nasty_bug_branch`
## Committing documentation
Less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
```bash
./run install # npx pnpm install
./run test# pnpm test
```
```
## Testing
```bash
# Run unit test
pnpm test
# Run unit test in watch mode
pnpm test:watch
# Run E2E test
pnpm e2e
# Debug E2E tests
pnpm dev
pnpm cypress:open # in another terminal
```
## Branch name format:
```text
[feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces]
Documentation is necessary for all non bugfix/refactoring changes.
Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
**_DO NOT CHANGE FILES IN `/docs`_**
**_DO NOT CHANGE FILES IN `/docs`_**
### The official documentation site
**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
```sh
$ npm i docsify-cli -g
```
If you are more familiar with Yarn, you can use the following command:
```sh
$ yarn global add docsify-cli
```
The above command will install `docsify-cli` globally.
If the installation is successful, the command `docsify` will be available in your `PATH`.
You can now run the following command to serve the documentation site:
```sh
$ docsify serve docs
```
Once the local HTTP server is listening, you can point your browser at http://localhost:3000.
## Branching
Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
Once development is done we branch a release branch from develop for testing.
Once the release happens we merge the release branch to master and kill the release branch.
This means... **branch off your pull request from develop**
## Content of a pull request
A new feature has been born. Great! But without the steps below it might just ... fade away ...
### **Add unit tests for the parsing part**
This is important so that, if someone else does a change to the grammar that does not know about this great feature, gets notified early on when that change breaks the parser. Another important aspect is that without proper parsing tests refactoring is pretty much impossible.
### **Add e2e tests**
This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
To start working with the e2e tests, run `pnpm run dev` to start the dev server, after that start cypress by running `pnpm exec cypress open` in the mermaid folder.
The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and renders that diagram in cypress.
When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.
This is what a rendering test looks like:
```javascript
it('should render forks and joins',()=>{
imgSnapshotTest(
`
stateDiagram
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
`,
{logLevel:0}
);
cy.get('svg');
});
```
### **Add documentation for it**
Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
#### Adding to or changing the documentation organization
If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`.
When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
## Last words
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So if you get stuck, ask for help and hints in the slack forum. If you want to show off something good, show it off there.
[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
- Make it possible to select which diagrams to include on your site
It is now located in the src folder for each respective package located as subfolders in packages.
English | [简体中文](./README.zh-CN.md)
<imgsrc="./img/header.png"alt=""/>
<imgsrc="./img/header.png"alt=""/>
@@ -27,7 +39,7 @@ English | [简体中文](./README.zh-CN.md)
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
<ahref="https://mermaid-js.github.io/mermaid/landing/"><imgsrc="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg"alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
<ahref="https://mermaid-js.github.io/mermaid/landing/"><imgsrc="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg"alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
## About
## About
@@ -43,14 +55,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
<br/>
<br/>
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./docs/Tutorials.md) has video tutorials.
[Tutorials](./docs/config/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
@@ -155,6 +165,13 @@ class Class10 {
int id
int id
size()
size()
}
}
namespace Namespace01 {
class Class11
class Class12 {
int id
size()
}
}
```
```
```mermaid
```mermaid
@@ -174,6 +191,13 @@ class Class10 {
int id
int id
size()
size()
}
}
namespace Namespace01 {
class Class11
class Class12 {
int id
size()
}
}
```
```
### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
```
```
@@ -324,7 +386,7 @@ Update version number in `package.json`.
npm publish
npm publish
```
```
The above command generates files into the `dist` folder and publishes them to npmjs.org.
The above command generates files into the `dist` folder and publishes them to <https://www.npmjs.com>.
## Related projects
## Related projects
@@ -340,7 +402,7 @@ Detailed information about how to contribute can be found in the [contribution g
## Security and safe diagrams
## Security and safe diagrams
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
@@ -348,13 +410,17 @@ _Unfortunately you can not have a cake and eat it at the same time which in this
## Reporting vulnerabilities
## Reporting vulnerabilities
To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
To report a vulnerability, please e-mail <security@mermaid.live> with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
## Appreciation
## Appreciation
A quick note from Knut Sveidqvist:
A quick note from Knut Sveidqvist:
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
>
> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
>
> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
>
>
> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
<ahref="https://mermaid-js.github.io/mermaid/landing/"><imgsrc="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg"alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
<ahref="https://mermaid-js.github.io/mermaid/landing/"><imgsrc="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg"alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
it('should render a simple C4Container diagram',()=>{
imgSnapshotTest(
`
C4Container
title Container diagram for Internet Banking System
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
Container_Boundary(c1, "Internet Banking") {
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
}
Rel(customer, spa, "Uses", "HTTPS")
Rel(email_system, customer, "Sends e-mails to")
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Component diagram',()=>{
imgSnapshotTest(
`
C4Component
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
}
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
`,
{}
);
cy.get('svg');
});
it('should render a simple C4Dynamic diagram',()=>{
imgSnapshotTest(
`
C4Dynamic
title Dynamic diagram for Internet Banking System - API Application
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container_Boundary(b, "API Application") {
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
it('New line in node and formatted edge label',()=>{
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{titleTopMargin:0}
);
});
it('Wrapping long text with a new line',()=>{
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
`,
{titleTopMargin:0}
);
});
it('Sub graphs and markdown strings',()=>{
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
it('New line in node and formatted edge label',()=>{
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("\`The dog in **the** hog.(1)
NL\`") --"\`1o **bold**\`"--> c
`,
{titleTopMargin:0}
);
});
it('Wrapping long text with a new line',()=>{
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
`,
{titleTopMargin:0}
);
});
it('Sub graphs and markdown strings',()=>{
imgSnapshotTest(
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
subgraph "One"
a("\`The **cat**
in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
end
subgraph "\`**Two**\`"
c("\`The **cat**
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
