mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-24 10:46:50 +02:00
Compare commits
19 Commits
3306_Fix_G
...
revert-334
Author | SHA1 | Date | |
---|---|---|---|
![]() |
576445847c | ||
![]() |
9ef3164991 | ||
![]() |
b0b54f48f9 | ||
![]() |
35ba62bae2 | ||
![]() |
ea0e9aa7f4 | ||
![]() |
6e16369d85 | ||
![]() |
8caeeccea3 | ||
![]() |
102542b4e7 | ||
![]() |
05d664d8d1 | ||
![]() |
8fa57b0b14 | ||
![]() |
858f2eadd4 | ||
![]() |
bc2b4c57c9 | ||
![]() |
280c7e8da1 | ||
![]() |
a89b6fd054 | ||
![]() |
02fc68a3f6 | ||
![]() |
b65c67ec2c | ||
![]() |
1befbe08ff | ||
![]() |
808bcb8022 | ||
![]() |
af8a5cbbfa |
@@ -42,8 +42,8 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
|
||||
if (!options.fontSize) {
|
||||
options.fontSize = '16px';
|
||||
}
|
||||
// const useAppli = Cypress.env('useAppli');
|
||||
const useAppli = false;
|
||||
const useAppli = Cypress.env('useAppli');
|
||||
//const useAppli = false;
|
||||
const branch = Cypress.env('codeBranch');
|
||||
cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
|
||||
const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
|
||||
|
@@ -15,6 +15,8 @@
|
||||
/* font-size: 18px !important; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
.mermaid2,.mermaid3 {
|
||||
@@ -31,26 +33,30 @@
|
||||
|
||||
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Mee
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
pie
|
||||
accTitle: My Pie Chart Accessibility Title
|
||||
accDescr: My Pie Chart Accessibility Description
|
||||
flowchart LR
|
||||
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
|
||||
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
|
||||
classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
|
||||
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
"Potassium" : 50.05
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
O0("Joe")
|
||||
class O0 aPID;
|
||||
|
||||
O1("Person")
|
||||
class O1 crm;
|
||||
O0 -- has type -->O1["Person"]
|
||||
|
||||
O2("aat:300411314")
|
||||
class O2 type;
|
||||
click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
|
||||
O0 -- has type -->O2["Bug"]
|
||||
click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
|
||||
</div>
|
||||
<div class="mermaid" style="width: 50%;">
|
||||
classDiagram-v2
|
||||
class Shape
|
||||
link Shape "https://www.github.com" "This is a<br/>tooltip<br>for a link"
|
||||
class Shape2
|
||||
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
gitGraph
|
||||
@@ -217,7 +223,7 @@ class Class10 {
|
||||
size()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%;">
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
%%{init: {'config': {'wrap': true }}}%%
|
||||
sequenceDiagram
|
||||
participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
|
||||
@@ -297,47 +303,15 @@ flowchart TD
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'dark',
|
||||
// theme: 'forest',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
flowchart: {
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
useMaxWidth: false,
|
||||
// defaultRenderer: 'dagre-d3',
|
||||
},
|
||||
class: {
|
||||
// defaultRenderer: 'dagre-d3',
|
||||
htmlLabels: true,
|
||||
},
|
||||
sequence: {
|
||||
// mirrorActors: false,'
|
||||
wrap: false,
|
||||
},
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
// sequence: {
|
||||
// actorFontFamily: 'courier',
|
||||
// actorMargin: 50,
|
||||
// showSequenceNumbers: false,
|
||||
// // hideUnusedParticipants: true,
|
||||
// // forceMenus: true,
|
||||
// },
|
||||
// // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
|
||||
// fontFamily: '"times", sans-serif',
|
||||
// fontFamily: 'courier',
|
||||
state: {
|
||||
nodeSpacing: 50,
|
||||
rankSpacing: 50,
|
||||
defaultRenderer: 'dagre-d3',
|
||||
},
|
||||
maxTextSize: 900000,
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
logLevel: 0,
|
||||
fontSize: 18,
|
||||
curve: 'cardinal',
|
||||
// securityLevel: 'sandbox',
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
wrap: true,
|
||||
flowchart: {
|
||||
curve: 'basis',
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true,
|
||||
},
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
|
@@ -1471,6 +1471,21 @@ Returns **any** The currentConfig merged with the sanitized conf
|
||||
|
||||
Returns **any** The currentConfig
|
||||
|
||||
## sanitize
|
||||
|
||||
## sanitize
|
||||
|
||||
| Function | Description | Type | Values |
|
||||
| -------- | -------------------------------------- | ----------- | ------ |
|
||||
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
|
||||
|
||||
Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
|
||||
options in-place
|
||||
|
||||
### Parameters
|
||||
|
||||
- `options` **any** The potential setConfig parameter
|
||||
|
||||
## render
|
||||
|
||||
Function that renders an svg with a graph from a chart definition. Usage example below.
|
||||
@@ -1499,21 +1514,6 @@ $(function () {
|
||||
|
||||
Returns **any**
|
||||
|
||||
## sanitize
|
||||
|
||||
## sanitize
|
||||
|
||||
| Function | Description | Type | Values |
|
||||
| -------- | -------------------------------------- | ----------- | ------ |
|
||||
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
|
||||
|
||||
Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
|
||||
options in-place
|
||||
|
||||
### Parameters
|
||||
|
||||
- `options` **any** The potential setConfig parameter
|
||||
|
||||
## addDirective
|
||||
|
||||
Pushes in a directive to the configuration
|
||||
|
@@ -18,7 +18,7 @@
|
||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
||||
<link rel="stylesheet" href="theme.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
||||
<script src="//cdn.jsdelivr.net/npm/mermaid@9.1.3/dist/mermaid.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/mermaid@9.1.5/dist/mermaid.min.js"></script>
|
||||
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
||||
<script>
|
||||
// prettier-ignore
|
||||
|
10
package.json
10
package.json
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"version": "9.1.4",
|
||||
"version": "9.1.5",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "dist/mermaid.core.js",
|
||||
"main": "dist/mermaid.min.js",
|
||||
"module": "dist/mermaid.esm.min.mjs",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./dist/mermaid.core.js",
|
||||
"require": "./dist/mermaid.min.js",
|
||||
"import": "./dist/mermaid.esm.min.mjs"
|
||||
},
|
||||
"./*": "./*"
|
||||
@@ -65,7 +65,7 @@
|
||||
"dompurify": "2.3.10",
|
||||
"graphlib": "^2.1.8",
|
||||
"khroma": "^2.0.0",
|
||||
"moment-mini": "^2.24.0",
|
||||
"moment-mini": "2.24.0",
|
||||
"stylis": "^4.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -103,7 +103,7 @@
|
||||
"moment": "^2.23.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"prettier": "^2.3.2",
|
||||
"prettier-plugin-jsdoc": "^0.3.30",
|
||||
"prettier-plugin-jsdoc": "^0.4.1",
|
||||
"start-server-and-test": "^1.12.6",
|
||||
"terser-webpack-plugin": "^5.2.4",
|
||||
"webpack": "^5.53.0",
|
||||
|
@@ -206,7 +206,9 @@ const setTooltip = function (ids, tooltip) {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const getTooltip = function (id) {
|
||||
return classes[id].tooltip;
|
||||
};
|
||||
/**
|
||||
* Called by parser when a link is found. Adds the URL to the vertex data.
|
||||
*
|
||||
@@ -337,6 +339,7 @@ const setupToolTips = function (element) {
|
||||
.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');
|
||||
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>'));
|
||||
el.classed('hover', true);
|
||||
})
|
||||
.on('mouseout', function () {
|
||||
@@ -378,6 +381,7 @@ export default {
|
||||
setClickEvent,
|
||||
setCssClass,
|
||||
setLink,
|
||||
getTooltip,
|
||||
setTooltip,
|
||||
lookUpDomId,
|
||||
};
|
||||
|
@@ -14,7 +14,16 @@ describe('class diagram, ', function () {
|
||||
|
||||
parser.parse(str);
|
||||
});
|
||||
xit('should handle a leading newline axa', function () {
|
||||
const str = '\nclassDiagram\n' + 'class Car';
|
||||
|
||||
try {
|
||||
parser.parse(str);
|
||||
// Fail test if above expression doesn't throw anything.
|
||||
} catch (e) {
|
||||
expect(true).toBe(false);
|
||||
}
|
||||
});
|
||||
it('should handle relation definitions', function () {
|
||||
const str =
|
||||
'classDiagram\n' +
|
||||
|
@@ -29,8 +29,10 @@ let conf = {
|
||||
* >} classes
|
||||
* Object containing the vertices.
|
||||
* @param {SVGGElement} g The graph that is to be drawn.
|
||||
* @param _id
|
||||
* @param diagObj
|
||||
*/
|
||||
export const addClasses = function (classes, g) {
|
||||
export const addClasses = function (classes, g, _id, diagObj) {
|
||||
// const svg = select(`[id="${svgId}"]`);
|
||||
const keys = Object.keys(classes);
|
||||
log.info('keys:', keys);
|
||||
@@ -108,6 +110,7 @@ export const addClasses = function (classes, g) {
|
||||
style: styles.style,
|
||||
id: vertex.id,
|
||||
domId: vertex.domId,
|
||||
tooltip: diagObj.db.getTooltip(vertex.id) || '',
|
||||
haveCallback: vertex.haveCallback,
|
||||
link: vertex.link,
|
||||
width: vertex.type === 'group' ? 500 : undefined,
|
||||
@@ -319,7 +322,7 @@ export const draw = function (text, id, _version, diagObj) {
|
||||
const relations = diagObj.db.getRelations();
|
||||
|
||||
log.info(relations);
|
||||
addClasses(classes, g, id);
|
||||
addClasses(classes, g, id, diagObj);
|
||||
addRelations(relations, g);
|
||||
|
||||
// Add custom shapes
|
||||
|
@@ -409,6 +409,7 @@ const setupToolTips = function (element) {
|
||||
.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');
|
||||
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>'));
|
||||
el.classed('hover', true);
|
||||
})
|
||||
.on('mouseout', function () {
|
||||
|
34
yarn.lock
34
yarn.lock
@@ -3506,9 +3506,9 @@ camelcase@^6.2.0:
|
||||
integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
|
||||
|
||||
caniuse-lite@^1.0.30001359:
|
||||
version "1.0.30001376"
|
||||
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001376.tgz"
|
||||
integrity sha512-I27WhtOQ3X3v3it9gNs/oTpoE5KpwmqKR5oKPA8M0G7uMXh9Ty81Q904HpKUrM30ei7zfcL5jE7AXefgbOfMig==
|
||||
version "1.0.30001381"
|
||||
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001381.tgz"
|
||||
integrity sha512-fEnkDOKpvp6qc+olg7+NzE1SqyfiyKf4uci7fAU38M3zxs0YOyKOxW/nMZ2l9sJbt7KZHcDIxUnbI0Iime7V4w==
|
||||
|
||||
caseless@~0.12.0:
|
||||
version "0.12.0"
|
||||
@@ -5222,9 +5222,9 @@ eslint-plugin-html@^7.1.0:
|
||||
htmlparser2 "^8.0.1"
|
||||
|
||||
eslint-plugin-jest@^26.0.0:
|
||||
version "26.8.2"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-26.8.2.tgz#42a1248a5ade2bc589eb0f9c4e0608dd89b18cf3"
|
||||
integrity sha512-67oh0FKaku9y48OpLzL3uK9ckrgLb83Sp5gxxTbtOGDw9lq6D8jw/Psj/9CipkbK406I2M7mvx1q+pv/MdbvxA==
|
||||
version "26.8.7"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-26.8.7.tgz#f38f067d0a69483d64578eb43508ca7b29c8a4b7"
|
||||
integrity sha512-nJJVv3VY6ZZvJGDMC8h1jN/TIGT4We1JkNn1lvstPURicr/eZPVnlFULQ4W2qL9ByCuCr1hPmlBOc2aZ1ktw4Q==
|
||||
dependencies:
|
||||
"@typescript-eslint/utils" "^5.10.0"
|
||||
|
||||
@@ -8598,10 +8598,10 @@ module-deps-sortable@^5.0.3:
|
||||
through2 "^2.0.0"
|
||||
xtend "^4.0.0"
|
||||
|
||||
moment-mini@^2.24.0:
|
||||
version "2.29.4"
|
||||
resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
|
||||
integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==
|
||||
moment-mini@2.24.0:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
|
||||
integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
|
||||
|
||||
moment@^2.23.0:
|
||||
version "2.29.4"
|
||||
@@ -9340,10 +9340,10 @@ prettier-linter-helpers@^1.0.0:
|
||||
dependencies:
|
||||
fast-diff "^1.1.2"
|
||||
|
||||
prettier-plugin-jsdoc@^0.3.30:
|
||||
version "0.3.38"
|
||||
resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d"
|
||||
integrity sha512-h81ZV/nFk5gr3fzWMWzWoz/M/8FneAZxscT7DVSy+5jMIuWYnBFZfSswVKYZyTaZ5r6+6k4hpFTDWhRp85C1tg==
|
||||
prettier-plugin-jsdoc@^0.4.1:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.4.1.tgz#3ab15b8c50203b4ff3287e3df6a7034387aebede"
|
||||
integrity sha512-wWs43HdlGoOAqD/LZQ6SpXujRkZ7YzoFC5bCfClBdrlTesZBGBB1cTAUS6ofJnkfNQyiNXNnRAo6Rl56uBTxnQ==
|
||||
dependencies:
|
||||
binary-searching "^2.0.5"
|
||||
comment-parser "^1.3.1"
|
||||
@@ -10876,9 +10876,9 @@ terminal-link@^2.0.0:
|
||||
supports-hyperlinks "^2.0.0"
|
||||
|
||||
terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.2.4:
|
||||
version "5.3.4"
|
||||
resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.4.tgz#f4d31e265883d20fda3ca9c0fc6a53f173ae62e3"
|
||||
integrity sha512-SmnkUhBxLDcBfTIeaq+ZqJXLVEyXxSaNcCeSezECdKjfkMrTTnPvapBILylYwyEvHFZAn2cJ8dtiXel5XnfOfQ==
|
||||
version "5.3.5"
|
||||
resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.5.tgz#f7d82286031f915a4f8fb81af4bd35d2e3c011bc"
|
||||
integrity sha512-AOEDLDxD2zylUGf/wxHxklEkOe2/r+seuyOWujejFrIxHf11brA1/dWQNIgXa1c6/Wkxgu7zvv0JhOWfc2ELEA==
|
||||
dependencies:
|
||||
"@jridgewell/trace-mapping" "^0.3.14"
|
||||
jest-worker "^27.4.5"
|
||||
|
Reference in New Issue
Block a user