Skip to content

Commit

Permalink
Merge branch 'develop' into sidv/removeDirectiveGrammar
Browse files Browse the repository at this point in the history
* develop: (31 commits)
  chore: Update docs
  New Mermaid Live Editor for Confluence Cloud (mermaid-js#4814)
  Update link to Discourse theme component (mermaid-js#4811)
  Update flowchart.md (mermaid-js#4810)
  chore: Update docs
  "CSS" instead of "css" in flowchart.md (mermaid-js#4797)
  Update CONTRIBUTING.md
  Update CONTRIBUTING.md
  fix: typos (mermaid-js#4801)
  chore: Align with convention
  add additional test case
  chore(deps): update all patch dependencies
  chore(deps): update all minor dependencies
  added test case
  add sanitize text
  Update docs
  modifications to generic parser
  improvements to parseGenericTypes
  Update packages/mermaid/src/diagrams/class/svgDraw.js
  return comment
  ...
  • Loading branch information
sidharthv96 committed Sep 5, 2023
2 parents 066e096 + 3959e07 commit 5ed1555
Show file tree
Hide file tree
Showing 47 changed files with 1,372 additions and 789 deletions.
4 changes: 3 additions & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ Documentation is necessary for all non bugfix/refactoring changes.

Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)

**_DO NOT CHANGE FILES IN `/docs`_**
**_DO NOT CHANGE FILES IN `/docs` MANUALLY_**

The `/docs` folder will be rebuilt and committed as part of a pre-commit hook.

[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
3 changes: 3 additions & 0 deletions cSpell.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@
"docsy",
"doku",
"dompurify",
"dont",
"doublecircle",
"edgechromium",
"elems",
"elkjs",
"elle",
"faber",
Expand Down
25 changes: 17 additions & 8 deletions cypress/integration/rendering/classDiagram-v2.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -386,12 +386,11 @@ describe('Class diagram V2', () => {
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
});

it('18: should handle the direction statement with LR', () => {
it('17a: should handle the direction statement with BT', () => {
imgSnapshotTest(
`
classDiagram
direction LR
direction BT
class Student {
-idCard : IdCard
}
Expand All @@ -410,11 +409,11 @@ describe('Class diagram V2', () => {
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
});
it('17a: should handle the direction statement with BT', () => {
it('17b: should handle the direction statement with RL', () => {
imgSnapshotTest(
`
classDiagram
direction BT
direction RL
class Student {
-idCard : IdCard
}
Expand All @@ -433,11 +432,12 @@ describe('Class diagram V2', () => {
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
});
it('17b: should handle the direction statement with RL', () => {

it('18a: should handle the direction statement with LR', () => {
imgSnapshotTest(
`
classDiagram
direction RL
direction LR
class Student {
-idCard : IdCard
}
Expand All @@ -457,7 +457,7 @@ describe('Class diagram V2', () => {
);
});

it('18: should render a simple class diagram with notes', () => {
it('18b: should render a simple class diagram with notes', () => {
imgSnapshotTest(
`
classDiagram-v2
Expand Down Expand Up @@ -562,4 +562,13 @@ class C13["With Città foreign language"]
`
);
});
it('should render a simple class diagram with no members', () => {
imgSnapshotTest(
`
classDiagram-v2
class Class10
`,
{ logLevel: 1, flowchart: { htmlLabels: false } }
);
});
});
10 changes: 8 additions & 2 deletions demos/classchart.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,14 @@ <h1>Class diagram demos</h1>
+quack()
}
class Fish{
-int sizeInFeet
-Listint sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
+run(List~T~, List~OT~)
%% +run-composite(List~T, K~)
+run-nested(List~List~OT~~)
}

</pre>
Expand Down Expand Up @@ -80,6 +82,7 @@ <h1>Class diagram demos</h1>
Class01 : #size()
Class01 : -int chimp
Class01 : +int gorilla
Class01 : +abstractAttribute string*
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
Expand Down Expand Up @@ -122,6 +125,8 @@ <h1>Class diagram demos</h1>
classDiagram
direction LR
Animal ()-- Dog
Animal ()-- Cat
note for Cat "should have no members area"
Dog : bark()
Dog : species()
</pre>
Expand Down Expand Up @@ -151,6 +156,7 @@ <h1>Class diagram demos</h1>
~InternalProperty : string
~AnotherInternalProperty : List~List~string~~
}
class People List~List~Person~~
</pre>
<hr />

Expand Down
2 changes: 1 addition & 1 deletion docs/community/code.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Once the release happens we add a tag to the `release` branch and merge it with
2. Check out the `develop` branch
3. Create a new branch for your work. Please name the branch following our naming convention below.

We use the follow naming convention for branches:
We use the following naming convention for branches:

```txt
[feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces]
Expand Down
2 changes: 1 addition & 1 deletion docs/community/development.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ In GitHub, you first **fork** a repository when you are going to make changes an

Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.

[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentaion, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).
[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentation, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).

[Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo)

Expand Down
2 changes: 1 addition & 1 deletion docs/community/docker-development.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ In GitHub, you first **fork** a repository when you are going to make changes an

Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.

[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentaion, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).
[Fork mermaid](https://github.com/mermaid-js/mermaid/fork) to start contributing to the main project and its documentation, or [search for other repositories](https://github.com/orgs/mermaid-js/repositories).

[Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo)

Expand Down
12 changes: 6 additions & 6 deletions docs/community/newDiagram.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ For instance:

#### Store data found during parsing

There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.
There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call an object provided to the parser by the user of the parser. This object can be called during parsing for storing data.

```jison
statement
Expand All @@ -35,7 +35,7 @@ In the extract of the grammar above, it is defined that a call to the setTitle m
> **Note**
> Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
For more info look in the example diagram type:
For more info look at the example diagram type:

The `yy` object has the following function:

Expand All @@ -54,15 +54,15 @@ parser.yy = db;

### Step 2: Rendering

Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example.
Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather than the flowchart renderer as this is a more generic example.

Place the renderer in the diagram folder.

### Step 3: Detection of the new diagram type

The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
For example, if your new diagram uses a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.

Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
Expand Down Expand Up @@ -122,7 +122,7 @@ There are a few features that are common between the different types of diagrams
- Themes, there is a common way to modify the styling of diagrams in Mermaid.
- Comments should follow mermaid standards

Here some pointers on how to handle these different areas.
Here are some pointers on how to handle these different areas.

## Accessibility

Expand All @@ -140,7 +140,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/

### accessible title and description

The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
The syntax for accessible titles and descriptions is described in [the Accessibility documentation section.](../config/accessibility.md)

As a design goal, the jison syntax should be similar between the diagrams.

Expand Down
10 changes: 5 additions & 5 deletions docs/config/directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ The following code snippet changes `theme` to `forest`:

`%%{init: { "theme": "forest" } }%%`

Possible theme values are: `default`,`base`, `dark`, `forest` and `neutral`.
Possible theme values are: `default`, `base`, `dark`, `forest` and `neutral`.
Default Value is `default`.

Example:
Expand Down Expand Up @@ -291,7 +291,7 @@ Let us see an example:
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```
Expand All @@ -300,7 +300,7 @@ Bob->Alice: Cool
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```
Expand All @@ -317,7 +317,7 @@ By applying that snippet to the diagram above, `wrap` will be enabled:
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```
Expand All @@ -326,7 +326,7 @@ Bob->Alice: Cool
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did you mother like the book I suggested? And did you catch the new book about alien invasion?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```
8 changes: 4 additions & 4 deletions docs/config/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ pnpm add mermaid

**Hosting mermaid on a web page:**

> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
> Note: This topic is explored in greater depth in the [User Guide for Beginners](../intro/getting-started.md)
The easiest way to integrate mermaid on a web page requires two elements:

Expand Down Expand Up @@ -100,7 +100,7 @@ Mermaid can load multiple diagrams, in the same page.
## Enabling Click Event and Tags in Nodes

A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.

**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**

Expand All @@ -115,13 +115,13 @@ Values:
- **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
- **antiscript**: HTML tags in text are allowed (only script elements are removed) and click functionality is enabled.
- **loose**: HTML tags in text are allowed and click functionality is enabled.
- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevent any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
- **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevents any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.

> **Note**
> This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
> **sandbox** security level is still in the beta version.
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing. This allows clicks and tags are allowed.**

**To change `securityLevel`, you have to call `mermaid.initialize`:**

Expand Down
1 change: 1 addition & 0 deletions docs/ecosystem/integrations.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
- [LiveBook](https://livebook.dev) (**Native support**)
- [Atlassian Products](https://www.atlassian.com)
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
- [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
- [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
Expand Down
4 changes: 2 additions & 2 deletions docs/intro/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ When writing the .html file, we give two instructions inside the html code to th

a. The mermaid code for the diagram we want to create.

b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.

**a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**

Expand Down Expand Up @@ -221,4 +221,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,

**Comments from Knut Sveidqvist, creator of mermaid:**

- In early versions of mermaid, the `<script>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
- In early versions of mermaid, the `<script>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflect the previous way which still works.
4 changes: 2 additions & 2 deletions docs/syntax/flowchart.md
Original file line number Diff line number Diff line change
Expand Up @@ -1051,9 +1051,9 @@ flowchart LR
classDef foobar stroke:#00f
```

### Css classes
### CSS classes

It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
below:

**Example style**
Expand Down
6 changes: 3 additions & 3 deletions docs/syntax/mindmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,15 @@ mindmap

The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.

In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C.
In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.

mindmap
Root
A
B
C

In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
In summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.

```mermaid-example
mindmap
Expand Down Expand Up @@ -228,7 +228,7 @@ _These classes need to be supplied by the site administrator._

## Unclear indentation

The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`.
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.

mindmap
Root
Expand Down
Loading

0 comments on commit 5ed1555

Please sign in to comment.