-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
-
-
- 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
So all of this appears on the
same line."
+ O0 -- has type -->O2["Bug"]
+ click O0 function "Lots of great info about Joe
Lots of great info about Joe
burt
fred";
+
+
+classDiagram-v2
+ class Shape
+ link Shape "https://www.github.com" "This is a
tooltip
for a link"
+ class Shape2
+ click Shape2 href "https://www.github.com" "This is a tooltip for a link"
+
%%{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');
diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index 9f6ccde63..fee0e4721 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -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, '
'));
el.classed('hover', true);
})
.on('mouseout', function () {
@@ -378,6 +381,7 @@ export default {
setClickEvent,
setCssClass,
setLink,
+ getTooltip,
setTooltip,
lookUpDomId,
};
diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js
index d82365587..41b1b2161 100644
--- a/src/diagrams/class/classRenderer-v2.js
+++ b/src/diagrams/class/classRenderer-v2.js
@@ -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
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index c35816fec..0fe14a541 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -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, '
'));
el.classed('hover', true);
})
.on('mouseout', function () {