- erDiagram
- accTitle: My er Diagram
- accDescr: My er Diagram Description
- CUSTOMER }|..|{ DELIVERY-ADDRESS : has
- CUSTOMER ||--o{ ORDER : places
- CUSTOMER ||--o{ INVOICE : "liable for"
- DELIVERY-ADDRESS ||--o{ ORDER : receives
- INVOICE ||--|{ ORDER : covers
- ORDER ||--|{ ORDER-ITEM : includes
- PRODUCT-CATEGORY ||--|{ PRODUCT : contains
- PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+
+stateDiagram
+ state Active {
+ Idle
+ }
+ Inactive --> Idle: ACT
+ Active --> Active: LOG
graph TB
@@ -160,47 +155,17 @@
a1-->a2-->a3
end
- gantt
- accTitle: My gantt chart
- accDescr: My my gantt chart Description
- dateFormat YYYY-MM-DD
- axisFormat %d/%m
- title Adding GANTT diagram to mermaid
- excludes weekdays 2014-01-10
-
- section A section
- Completed task :done, des1, 2014-01-06,2014-01-08
- Active task :active, des2, 2014-01-09, 3d
- Future task : des3, after des2, 5d
- Future task2 : des4, after des3, 5d
-
- section Critical tasks
- Completed task in the critical line :crit, done, 2014-01-06,24h
- Implement parser and jison :crit, done, after des1, 2d
- Create tests for parser :crit, active, 3d
- Future task in critical line :crit, 5d
- Create tests for renderer :2d
- Add to mermaid :1d
-
- section Documentation
- Describe gantt syntax :active, a1, after des1, 3d
- Add gantt diagram to demo page :after a1 , 20h
- Add another diagram to demo page :doc1, after a1 , 48h
-
- section Clickable
- Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
- Calling a Callback (look at the console log) :cl2, after cl1, 3d
- Calling a Callback with args :cl3, after cl1, 3d
-
- click cl1 href "https://mermaid-js.github.io/mermaid/#/"
- click cl2 call clickByGantt()
- click cl3 call clickByGantt("test1", test2, test3)
-
- section Last section
- Describe gantt syntax :after doc1, 3d
- Add gantt diagram to demo page : 20h
- Add another diagram to demo page : 48h
+
+ sequenceDiagram
+ A ->> B: 1
+ rect rgb(204, 0, 102)
+ break yes
+ rect rgb(0, 204, 204)
+ C ->> C: 0
+ end
+ end
+ end
+ B ->> A: Return
classDiagram
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index 2728d1aa16..dbee50b12c 100644
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -192,19 +192,6 @@ export const positionEdgeLabel = (edge, paths) => {
}
};
-// const getRelationType = function(type) {
-// switch (type) {
-// case stateDb.relationType.AGGREGATION:
-// return 'aggregation';
-// case stateDb.relationType.EXTENSION:
-// return 'extension';
-// case stateDb.relationType.COMPOSITION:
-// return 'composition';
-// case stateDb.relationType.DEPENDENCY:
-// return 'dependency';
-// }
-// };
-
const outsideNode = (node, point) => {
// log.warn('Checking bounds ', node, point);
const x = node.x;
@@ -415,45 +402,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
if (edge.fromCluster) {
log.info('from cluster abc88', clusterDb[edge.fromCluster]);
points = cutPathAtIntersect(points.reverse(), clusterDb[edge.fromCluster].node).reverse();
- // log.warn('edge', edge);
- // log.warn('from cluster', clusterDb[edge.fromCluster], points);
- // const updatedPoints = [];
- // let lastPointOutside = edge.points[edge.points.length - 1];
- // let isInside = false;
- // for (let i = points.length - 1; i >= 0; i--) {
- // const point = points[i];
- // const node = clusterDb[edge.fromCluster].node;
- // log.warn('checking to', edge.fromCluster, point, node);
- // if (!outsideNode(node, point) && !isInside) {
- // log.warn('inside', edge.fromCluster, point, node);
-
- // // First point inside the rect
- // const inter = intersection(node, lastPointOutside, point);
- // log.warn('intersect', intersection(node, lastPointOutside, point));
- // let pointPresent = false;
- // points.forEach(p => {
- // pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
- // });
- // // if (!pointPresent) {
- // if (!points.find(e => e.x === inter.x && e.y === inter.y)) {
- // updatedPoints.unshift(inter);
- // log.warn('Adding point -updated = ', updatedPoints);
- // } else {
- // log.warn('no intersect', inter, points);
- // }
- // // points.push(insterection);
- // isInside = true;
- // } else {
- // // at the outside
- // // if (!isInside) updatedPoints.unshift(point);
- // updatedPoints.unshift(point);
- // log.warn('Outside point', point, updatedPoints);
- // }
- // lastPointOutside = point;
- // }
- // points = updatedPoints;
- // points = edge.points;
pointsHasChanged = true;
}
diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js
index 39bc7aa2d8..0479ee6400 100644
--- a/src/dagre-wrapper/mermaid-graphlib.js
+++ b/src/dagre-wrapper/mermaid-graphlib.js
@@ -277,7 +277,33 @@ export const adjustClustersAndEdges = (graph, depth) => {
' --- ',
clusterDb[e.w]
);
- if (clusterDb[e.v] || clusterDb[e.w]) {
+ if (clusterDb[e.v] && clusterDb[e.w] && clusterDb[e.v] === clusterDb[e.w]) {
+ log.warn('Fixing and trixing link to self - removing XXX', e.v, e.w, e.name);
+ log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);
+ v = getAnchorId(e.v);
+ w = getAnchorId(e.w);
+ graph.removeEdge(e.v, e.w, e.name);
+ const specialId = e.w + '---' + e.v;
+ graph.setNode(specialId, {
+ domId: specialId,
+ id: specialId,
+ labelStyle: '',
+ labelText: edge.label,
+ padding: 0,
+ shape: 'labelRect',
+ style: '',
+ });
+ const edge1 = JSON.parse(JSON.stringify(edge));
+ const edge2 = JSON.parse(JSON.stringify(edge));
+ edge1.label = '';
+ edge1.arrowTypeEnd = 'none';
+ edge2.label = '';
+ edge1.fromCluster = e.v;
+ edge2.toCluster = e.v;
+
+ graph.setEdge(v, specialId, edge1, e.name + '-cyclic-special');
+ graph.setEdge(specialId, w, edge2, e.name + '-cyclic-special');
+ } else if (clusterDb[e.v] || clusterDb[e.w]) {
log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);
v = getAnchorId(e.v);
w = getAnchorId(e.w);
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index 52c6e07777..d949ec88e0 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -347,6 +347,39 @@ const rect = (parent, node) => {
return shapeSvg;
};
+const labelRect = (parent, node) => {
+ const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'label', true);
+
+ log.trace('Classes = ', node.classes);
+ // add the rect
+ const rect = shapeSvg.insert('rect', ':first-child');
+
+ // Hide the rect we are only after the label
+ const totalWidth = 0;
+ const totalHeight = 0;
+ rect.attr('width', totalWidth).attr('height', totalHeight);
+ shapeSvg.attr('class', 'label edgeLabel');
+
+ if (node.props) {
+ const propKeys = new Set(Object.keys(node.props));
+ if (node.props.borders) {
+ applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);
+ propKeys.delete('borders');
+ }
+ propKeys.forEach((propKey) => {
+ log.warn(`Unknown node property ${propKey}`);
+ });
+ }
+
+ updateNodeBounds(node, rect);
+
+ node.intersect = function (point) {
+ return intersect.rect(node, point);
+ };
+
+ return shapeSvg;
+};
+
/**
* @param rect
* @param borders
@@ -976,6 +1009,7 @@ const class_box = (parent, node) => {
const shapes = {
question,
rect,
+ labelRect,
rectWithTitle,
choice,
circle,
diff --git a/src/utils.js b/src/utils.js
index e8a24bb6aa..b95bc9cd1a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -394,6 +394,9 @@ const traverseEdge = (points) => {
* @returns {Point} Return result of `transverseEdge`
*/
const calcLabelPosition = (points) => {
+ if (points.length === 1) {
+ return points[0];
+ }
return traverseEdge(points);
};