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 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.
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
...
@@ -32,7 +32,7 @@ We make all changes via pull requests. As we have many pull requests from develo
- 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)
- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits)
To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
@@ -55,6 +55,8 @@ The documentation is written in **Markdown**. For more information about Markdow
The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
After editing files in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory, be sure to run `pnpm install` and `pnpm run --filter mermaid docs:build` locally to build the `/docs` directory.
You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box.
Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly.
````
```note
Note content
```
```tip
Tip content
```
```warning
Warning content
```
```danger
Danger content
```
````
**_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.**
**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.**
If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
If you want to preview the whole documentation site on your machine:
```sh
$ npm i docsify-cli -g
cd packages/mermaid
pnpm i
pnpm docs:dev
```
If you are more familiar with Yarn, you can use the following command:
You can now build and serve the documentation site:
```sh
$ yarn global add docsify-cli
pnpm docs:serve
```
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.
@@ -152,7 +167,7 @@ The source files for documentation are in `/packages/mermaid/src/docs` and are w
#### 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`.
If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`.
When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
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:
- Make it possible to select which diagrams to include on your site
- Open up for lazy loading
- Make it possible to add diagrams from outside of the Mermaid repository
- Separate the release flow between different diagrams and the Mermaid core
As such be aware of some changes..
# We use pnpm now
# The source code has moved
It is now located in the src folder for each respective package located as subfolders in packages.
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
@@ -27,7 +39,7 @@ English | [简体中文](./README.zh-CN.md)
**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
@@ -43,14 +55,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
<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.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
[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/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.
@@ -354,7 +364,11 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio
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!_
[](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
b(`The dog in **the** hog(2)... 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. `)
</pre
>
<preid="diagram"class="mermaid2">
flowchart-elk LR
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
</pre>
<preid="diagram"class="mermaid2">
flowchart-elk LR
b("The dog in the hog... a very<br/>long text about it<br/>Word!")
</pre>
>
<preid="diagram"class="mermaid2">
mindmap
root
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
</pre>
id1[`**Start2**
second line 😎 with long text that is wrapping to the next line`]
id2[`Child **with bold** text`]
id3[`Children of which some
is using *italic type of* text`]
id4[Child]
id5[`Child
Row
and another
`]
</pre>
<preid="diagram"class="mermaid">
mindmap
id1["`**Start** with
a second line 😎`"]
id2["`The dog in **the** hog... a *very long text* about it
mermaid.mermaidAPI.render('graphDiv',`graph LR\n a --> b`,(html)=>{
document.getElementById('graph').innerHTML=html;
});
const{svg}=awaitmermaid.mermaidAPI.render('graphDiv',`graph LR\n a --> b`);
document.getElementById('graph').innerHTML=svg;
</script>
</body>
</html>
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.
