` or `
` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `` or `
` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
**Examples can be found in** [Other examples](../syntax/examples.md)
diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md
index 1676708f5..e6b7736c3 100644
--- a/docs/syntax/c4.md
+++ b/docs/syntax/c4.md
@@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+ Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
@@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+ Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index a6109149a..2f2c3da88 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -425,8 +425,6 @@ And `Link` can be one of:
A namespace groups classes.
-Code:
-
```mermaid-example
classDiagram
namespace BaseShapes {
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 1bdce6aa6..d9ddf0cbe 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -467,7 +467,7 @@ flowchart TB
A & B--> C & D
```
-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
diff --git a/package.json b/package.json
index 098e91c30..d2ca53ce0 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"version": "10.2.4",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
- "packageManager": "pnpm@8.10.2",
+ "packageManager": "pnpm@8.10.4",
"keywords": [
"diagram",
"markdown",
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index 25712153c..97106a169 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
//Set relationship style and line type
classes: 'relation',
pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid',
- id: 'id' + cnt,
+ id: `id_${edge.id1}_${edge.id2}_${cnt}`,
// Set link type for rendering
arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal',
//Set edge extra labels
diff --git a/packages/mermaid/src/diagrams/class/classTypes.spec.ts b/packages/mermaid/src/diagrams/class/classTypes.spec.ts
index 2b360d447..5a5ffa4db 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.spec.ts
@@ -681,3 +681,82 @@ describe('given text representing a method, ', function () {
});
});
});
+
+describe('given text representing an attribute', () => {
+ describe('when the attribute has no modifiers', () => {
+ it('should parse the display text correctly', () => {
+ const str = 'name String';
+
+ const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+ expect(displayDetails.displayText).toBe('name String');
+ expect(displayDetails.cssStyle).toBe('');
+ });
+ });
+
+ describe('when the attribute has public "+" modifier', () => {
+ it('should parse the display text correctly', () => {
+ const str = '+name String';
+
+ const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+ expect(displayDetails.displayText).toBe('+name String');
+ expect(displayDetails.cssStyle).toBe('');
+ });
+ });
+
+ describe('when the attribute has protected "#" modifier', () => {
+ it('should parse the display text correctly', () => {
+ const str = '#name String';
+
+ const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+ expect(displayDetails.displayText).toBe('#name String');
+ expect(displayDetails.cssStyle).toBe('');
+ });
+ });
+
+ describe('when the attribute has private "-" modifier', () => {
+ it('should parse the display text correctly', () => {
+ const str = '-name String';
+
+ const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+ expect(displayDetails.displayText).toBe('-name String');
+ expect(displayDetails.cssStyle).toBe('');
+ });
+ });
+
+ describe('when the attribute has internal "~" modifier', () => {
+ it('should parse the display text correctly', () => {
+ const str = '~name String';
+
+ const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+ expect(displayDetails.displayText).toBe('~name String');
+ expect(displayDetails.cssStyle).toBe('');
+ });
+ });
+
+ describe('when the attribute has static "$" modifier', () => {
+ it('should parse the display text correctly and apply static css style', () => {
+ const str = 'name String$';
+
+ const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+ expect(displayDetails.displayText).toBe('name String');
+ expect(displayDetails.cssStyle).toBe(staticCssStyle);
+ });
+ });
+
+ describe('when the attribute has abstract "*" modifier', () => {
+ it('should parse the display text correctly and apply abstract css style', () => {
+ const str = 'name String*';
+
+ const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+ expect(displayDetails.displayText).toBe('name String');
+ expect(displayDetails.cssStyle).toBe(abstractCssStyle);
+ });
+ });
+});
diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts
index e288eefde..f112dd4dd 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -106,7 +106,7 @@ export class ClassMember {
this.visibility = firstChar as Visibility;
}
- if (lastChar.match(/[*?]/)) {
+ if (lastChar.match(/[$*]/)) {
potentialClassifier = lastChar;
}
diff --git a/packages/mermaid/src/diagrams/common/common.spec.ts b/packages/mermaid/src/diagrams/common/common.spec.ts
index 4dac5b33c..9af244406 100644
--- a/packages/mermaid/src/diagrams/common/common.spec.ts
+++ b/packages/mermaid/src/diagrams/common/common.spec.ts
@@ -38,6 +38,20 @@ describe('when securityLevel is antiscript, all script must be removed', () => {
compareRemoveScript(`![]()
`, `![]()
`);
});
+ it('should detect unsecured target attribute, if value is _blank then generate a secured link', () => {
+ compareRemoveScript(
+ `note about mermaid`,
+ `note about mermaid`
+ );
+ });
+
+ it('should detect unsecured target attribute from links', () => {
+ compareRemoveScript(
+ `note about mermaid`,
+ `note about mermaid`
+ );
+ });
+
it('should detect iframes', () => {
compareRemoveScript(
`
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index e0ca2929d..caf43bc68 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -25,7 +25,27 @@ export const getRows = (s?: string): string[] => {
* @returns The safer text
*/
export const removeScript = (txt: string): string => {
- return DOMPurify.sanitize(txt);
+ const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
+
+ DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
+ if (node.tagName === 'A' && node.hasAttribute('target')) {
+ node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
+ }
+ });
+
+ const sanitizedText = DOMPurify.sanitize(txt);
+
+ DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
+ if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+ node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
+ node.removeAttribute(TEMPORARY_ATTRIBUTE);
+ if (node.getAttribute('target') === '_blank') {
+ node.setAttribute('rel', 'noopener');
+ }
+ }
+ });
+
+ return sanitizedText;
};
const sanitizeMore = (text: string, config: MermaidConfig) => {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 9a9394e54..9a693aabf 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -201,6 +201,13 @@ export const updateLinkInterpolate = function (positions, interp) {
*/
export const updateLink = function (positions, style) {
positions.forEach(function (pos) {
+ if (pos >= edges.length) {
+ throw new Error(
+ `The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${
+ edges.length - 1
+ }. (Help: Ensure that the index is within the range of existing edges.)`
+ );
+ }
if (pos === 'default') {
edges.defaultStyle = style;
} else {
@@ -425,7 +432,7 @@ const setupToolTips = function (element) {
tooltipElem
.text(el.attr('title'))
.style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
- .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
+ .style('top', window.scrollY + rect.bottom + 'px');
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '
'));
el.classed('hover', true);
})
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index 1ab754308..5b0f740bd 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -286,6 +286,30 @@ describe('[Style] when parsing', () => {
expect(edges[0].type).toBe('arrow_point');
});
+ it('should handle style definitions within number of edges', function () {
+ expect(() =>
+ flow.parser
+ .parse(
+ `graph TD
+ A-->B
+ linkStyle 1 stroke-width:1px;`
+ )
+ .toThrow(
+ 'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)'
+ )
+ );
+ });
+
+ it('should handle style definitions within number of edges', function () {
+ const res = flow.parser.parse(`graph TD
+ A-->B
+ linkStyle 0 stroke-width:1px;`);
+
+ const edges = flow.parser.yy.getEdges();
+
+ expect(edges[0].style[0]).toBe('stroke-width:1px');
+ });
+
it('should handle multi-numbered style definitions with more then 1 digit in a row', function () {
const res = flow.parser.parse(
'graph TD\n' +
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 2b88cfe7e..66e2277de 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -338,26 +338,34 @@ const drawCommits = (svg, commits, modifyGraph) => {
};
/**
- * Detect if there are other commits between commit1's x-position and commit2's x-position on the
- * same branch as commit2.
+ * Detect if there are commits
+ * between commitA's x-position
+ * and commitB's x-position on the
+ * same branch as commitA, where
+ * commitA isn't main
*
- * @param {any} commit1
- * @param {any} commit2
+ * @param {any} commitA
+ * @param {any} commitB
+ * @param branchToGetCurve
+ * @param p1
+ * @param p2
* @param allCommits
- * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
+ * @returns {boolean}
+ * If there are commits between
+ * commitA's x-position
+ * and commitB's x-position
+ * on the source branch, where
+ * source branch is not main
+ * return true
*/
-const hasOverlappingCommits = (commit1, commit2, allCommits) => {
- // Find commits on the same branch as commit2
- const keys = Object.keys(allCommits);
- const overlappingComits = keys.filter((key) => {
- return (
- allCommits[key].branch === commit2.branch &&
- allCommits[key].seq > commit1.seq &&
- allCommits[key].seq < commit2.seq
- );
+const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
+ const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
+ const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
+ const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
+ const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
+ return Object.values(allCommits).some((commitX) => {
+ return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
});
-
- return overlappingComits.length > 0;
};
/**
@@ -388,49 +396,61 @@ const findLane = (y1, y2, depth = 0) => {
* Draw the lines between the commits. They were arrows initially.
*
* @param {any} svg
- * @param {any} commit1
- * @param {any} commit2
+ * @param {any} commitA
+ * @param {any} commitB
* @param {any} allCommits
*/
-const drawArrow = (svg, commit1, commit2, allCommits) => {
- const p1 = commitPos[commit1.id];
- const p2 = commitPos[commit2.id];
- const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
- // log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
+const drawArrow = (svg, commitA, commitB, allCommits) => {
+ const p1 = commitPos[commitA.id]; // arrowStart
+ const p2 = commitPos[commitB.id]; // arrowEnd
+ const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
+ // log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
+
+ // Lower-right quadrant logic; top-left is 0,0
let arc = '';
let arc2 = '';
let radius = 0;
let offset = 0;
- let colorClassNum = branchPos[commit2.branch].index;
+ let colorClassNum = branchPos[commitB.branch].index;
let lineDef;
- if (overlappingCommits) {
+ if (arrowNeedsRerouting) {
arc = 'A 10 10, 0, 0, 0,';
arc2 = 'A 10 10, 0, 0, 1,';
radius = 10;
offset = 10;
- // Figure out the color of the arrow,arrows going down take the color from the destination branch
- colorClassNum = branchPos[commit2.branch].index;
const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
if (dir === 'TB') {
if (p1.x < p2.x) {
+ // Source commit is on branch position left of destination commit
+ // so render arrow rightward with colour of destination branch
+ colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
p1.y + offset
} L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
} else {
+ // Source commit is on branch position right of destination commit
+ // so render arrow leftward with colour of source branch
+ colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
p1.y + offset
} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
}
} else {
if (p1.y < p2.y) {
+ // Source commit is on branch positioned above destination commit
+ // so render arrow downward with colour of destination branch
+ colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
p1.x + offset
} ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
} else {
+ // Source commit is on branch positioned below destination commit
+ // so render arrow upward with colour of source branch
+ colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
p1.x + offset
} ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
@@ -445,7 +465,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
offset = 20;
// Figure out the color of the arrow,arrows going down take the color from the destination branch
- colorClassNum = branchPos[commit2.branch].index;
+ colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
p1.y + offset
@@ -458,14 +478,14 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
offset = 20;
// Arrows going up take the color from the source branch
- colorClassNum = branchPos[commit1.branch].index;
+ colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
p2.y
} L ${p2.x} ${p2.y}`;
}
if (p1.x === p2.x) {
- colorClassNum = branchPos[commit1.branch].index;
+ colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
p2.y + radius
} L ${p2.x} ${p2.y}`;
@@ -475,10 +495,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
arc = 'A 20 20, 0, 0, 0,';
radius = 20;
offset = 20;
-
- // Figure out the color of the arrow,arrows going down take the color from the destination branch
- colorClassNum = branchPos[commit2.branch].index;
-
+ // Arrows going up take the color from the target branch
+ colorClassNum = branchPos[commitB.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x
} ${p2.y}`;
@@ -487,16 +505,15 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
arc = 'A 20 20, 0, 0, 0,';
radius = 20;
offset = 20;
-
// Arrows going up take the color from the source branch
- colorClassNum = branchPos[commit1.branch].index;
+ colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
p2.x
} ${p2.y}`;
}
if (p1.y === p2.y) {
- colorClassNum = branchPos[commit1.branch].index;
+ colorClassNum = branchPos[commitA.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x
} ${p2.y}`;
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index b8962395e..7c38a8016 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO
bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
}
+ log.debug('createdActors', createdActors);
+ log.debug('destroyedActors', destroyedActors);
+
+ drawActors(diagram, actors, actorKeys, false);
+
// Draw the messages/signals
let sequenceIndex = 1;
let sequenceIndexStep = 1;
@@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO
}
});
- log.debug('createdActors', createdActors);
- log.debug('destroyedActors', destroyedActors);
-
- drawActors(diagram, actors, actorKeys, false);
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
+
if (conf.mirrorActors) {
drawActors(diagram, actors, actorKeys, true);
}
+
backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
fixLifeLineHeights(diagram, actors, actorKeys, conf);
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index f81147c10..31e6dc2a8 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
const center = actor.x + actor.width / 2;
const centerY = actorY + 5;
- const boxpluslineGroup = elem.append('g').lower();
+ const boxpluslineGroup = elem.append('g');
var g = boxpluslineGroup;
if (!isFooter) {
diff --git a/packages/mermaid/src/docs/community/questions-and-suggestions.md b/packages/mermaid/src/docs/community/questions-and-suggestions.md
index 6d6f80fb6..386e3753a 100644
--- a/packages/mermaid/src/docs/community/questions-and-suggestions.md
+++ b/packages/mermaid/src/docs/community/questions-and-suggestions.md
@@ -4,9 +4,8 @@
## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
-- Search in Discussions
-- Search in open Issues
-- Search in closed Issues
+- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
+- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.
diff --git a/packages/mermaid/src/docs/config/configuration.md b/packages/mermaid/src/docs/config/configuration.md
index dcbdcf875..1eb7836a6 100644
--- a/packages/mermaid/src/docs/config/configuration.md
+++ b/packages/mermaid/src/docs/config/configuration.md
@@ -4,8 +4,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
- The default configuration
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
-- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
**The render config** is configuration that is used when rendering by applying these configurations.
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 8842fe8f6..f6ffd908f 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -40,6 +40,12 @@ Below are a list of community plugins and integrations created with Mermaid.
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
- [LiveBook](https://livebook.dev) ✅
- [Atlassian Products](https://www.atlassian.com)
+ - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+ - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+ - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+ - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+ - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+ - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
- [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index bd45ffaf1..535ee3a3d 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -97,7 +97,7 @@ To Deploy Mermaid:
```
-**Doing so commands the mermaid parser to look for the `` or `
` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `` or `
` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
**Examples can be found in** [Other examples](../syntax/examples.md)
diff --git a/packages/mermaid/src/docs/syntax/c4.md b/packages/mermaid/src/docs/syntax/c4.md
index be13323ea..b6ee5fb79 100644
--- a/packages/mermaid/src/docs/syntax/c4.md
+++ b/packages/mermaid/src/docs/syntax/c4.md
@@ -257,7 +257,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
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(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+ Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 4b0cd49de..f02ae67be 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -281,8 +281,6 @@ And `Link` can be one of:
A namespace groups classes.
-Code:
-
```mermaid-example
classDiagram
namespace BaseShapes {
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 3620c159e..23306acdd 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -293,7 +293,7 @@ flowchart TB
A & B--> C & D
```
-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
