mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 14:59:53 +02:00
Merge branch 'alanaV11' into pebr/neo-style
This commit is contained in:
@@ -76,6 +76,62 @@
|
||||
</head>
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart LR
|
||||
subgraph Apa["Apa"]
|
||||
A["Start"]
|
||||
B["This is B"]
|
||||
end
|
||||
A --> B & C["C"]
|
||||
Apa --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart LR
|
||||
subgraph Apa["Apa"]
|
||||
B["This is B"]
|
||||
A["Start"]
|
||||
end
|
||||
A --> B & C["C"]
|
||||
Apa --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart RL
|
||||
subgraph Apa["Apa"]
|
||||
subgraph Gorilla
|
||||
A["Start"]
|
||||
B["This is B"]
|
||||
end
|
||||
end
|
||||
A --> B & C["C"]
|
||||
Gorilla --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart LR
|
||||
subgraph Apa["Apa"]
|
||||
subgraph Gorilla
|
||||
A["Start"]
|
||||
B["This is B"]
|
||||
end
|
||||
end
|
||||
A --> B & C["C"]
|
||||
Apa --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
subgraph Apa["Apa"]
|
||||
subgraph Gorilla
|
||||
B["This is B"]
|
||||
A["Start"]
|
||||
end
|
||||
end
|
||||
Apa --> C
|
||||
A --> B & C["C"]
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
stateDiagram
|
||||
direction LR
|
||||
state Gorilla0 {
|
||||
@@ -88,7 +144,7 @@ direction LR
|
||||
A0 --> C0
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
subgraph Gorilla
|
||||
subgraph Apa
|
||||
@@ -106,6 +162,17 @@ stateDiagram
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
subgraph Apa["Apa"]
|
||||
A["Start"]
|
||||
B["This is B"]
|
||||
end
|
||||
A --> B & C["C"]
|
||||
Apa --> C
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"layout": "dagre", "mergeEdges": false} }%%
|
||||
flowchart LR
|
||||
A ==> B(This is B)
|
||||
@@ -134,7 +201,7 @@ flowchart
|
||||
if_state --> True : if n >= 0
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid3">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
|
||||
stateDiagram
|
||||
state if_state <<choice>>
|
||||
@@ -144,12 +211,12 @@ flowchart
|
||||
if_state --> True : if n >= 0
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
|
||||
stateDiagram
|
||||
direction TB
|
||||
State T1 {
|
||||
T11 --> T12
|
||||
T12--> T11
|
||||
}
|
||||
T1 --> T2
|
||||
T11 --> T2
|
||||
@@ -165,16 +232,17 @@ State T1 {
|
||||
}
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
||||
stateDiagram
|
||||
direction TB
|
||||
State T1 {
|
||||
T11
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"layouts": "elk2", "mergeEdges": true} }%%
|
||||
stateDiagram
|
||||
State S1 {
|
||||
direction TB
|
||||
S11
|
||||
}
|
||||
S1 --> S2
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
||||
stateDiagram
|
||||
State T1 {
|
||||
@@ -184,7 +252,7 @@ State T1 {
|
||||
}
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"layout": "elk", "mergeEdges": true} }%%
|
||||
stateDiagram
|
||||
[*] --> T1
|
||||
@@ -228,18 +296,18 @@ stateDiagram-v2
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import { layouts } from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
// import { layouts } from './mermaid-layout-elk.esm.mjs';
|
||||
// mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'base',
|
||||
// handdrawnSeed: 12,
|
||||
look: 'handdrawn',
|
||||
// look: 'handdrawn',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
layout: 'elk',
|
||||
layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
@@ -7,6 +7,12 @@ export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData)
|
||||
const { parentById } = treeData;
|
||||
const visited = new Set();
|
||||
let currentId = id1;
|
||||
|
||||
// Edge case with self edges
|
||||
if (id1 === id2) {
|
||||
return parentById[id1] || 'root';
|
||||
}
|
||||
|
||||
while (currentId) {
|
||||
visited.add(currentId);
|
||||
if (currentId === id2) {
|
||||
|
@@ -68,6 +68,15 @@ g.stateGroup line {
|
||||
fill: ${options.labelBackgroundColor};
|
||||
opacity: 0.5;
|
||||
}
|
||||
.edgeLabel {
|
||||
background-color: ${options.edgeLabelBackground};
|
||||
rect {
|
||||
opacity: 0.5;
|
||||
background-color: ${options.edgeLabelBackground};
|
||||
fill: ${options.edgeLabelBackground};
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
.edgeLabel .label text {
|
||||
fill: ${options.transitionLabelColor || options.tertiaryTextColor};
|
||||
}
|
||||
@@ -124,6 +133,7 @@ g.stateGroup line {
|
||||
|
||||
.cluster-label, .nodeLabel {
|
||||
color: ${options.stateLabelColor};
|
||||
line-height: 1.0;
|
||||
}
|
||||
|
||||
.statediagram-cluster rect.outer {
|
||||
|
@@ -162,7 +162,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
|
||||
node.x -= 8;
|
||||
|
||||
log.info(
|
||||
'A tainted cluster node XBX',
|
||||
'A pure cluster node XBX',
|
||||
v,
|
||||
node.id,
|
||||
node.width,
|
||||
@@ -188,7 +188,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
|
||||
|
||||
// A cluster in the non-recursive way
|
||||
log.info(
|
||||
'A pure cluster node with children XBX',
|
||||
'A tainted cluster node with children XBX',
|
||||
v,
|
||||
node.id,
|
||||
node.width,
|
||||
|
@@ -152,27 +152,58 @@ export const validate = (graph) => {
|
||||
return true;
|
||||
};
|
||||
|
||||
const findCommonEdges = (graph, id1, id2) => {
|
||||
const edges1 = graph.edges().filter((edge) => edge.v === id1 || edge.w === id1);
|
||||
const edges2 = graph.edges().filter((edge) => edge.v === id2 || edge.w === id2);
|
||||
const edges1Prim = edges1.map((edge) => {
|
||||
return { v: edge.v === id1 ? id2 : edge.v, w: edge.w === id1 ? id1 : edge.w };
|
||||
});
|
||||
const edges2Prim = edges2.map((edge) => {
|
||||
return { v: edge.v, w: edge.w };
|
||||
});
|
||||
const result = edges1Prim.filter((edgeIn1) => {
|
||||
return edges2Prim.filter((edge) => edgeIn1.v === edge.v && edgeIn1.w === edge.w).length > 0;
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds a child that is not a cluster. When faking an edge between a node and a cluster.
|
||||
*
|
||||
* @param id
|
||||
* @param {any} graph
|
||||
*/
|
||||
export const findNonClusterChild = (id, graph) => {
|
||||
log.trace('Searching', id);
|
||||
const children = graph.children(id).reverse();
|
||||
export const findNonClusterChild = (id, graph, clusterId) => {
|
||||
const children = graph.children(id);
|
||||
log.trace('Searching children of id ', id, children);
|
||||
if (children.length < 1) {
|
||||
log.trace('This is a valid node', id);
|
||||
return id;
|
||||
}
|
||||
let reserve;
|
||||
for (const child of children) {
|
||||
const _id = findNonClusterChild(child, graph);
|
||||
const _id = findNonClusterChild(child, graph, clusterId);
|
||||
|
||||
// Edge chase where the cluster has an edge to a node and the selected
|
||||
// child has a link to the same node
|
||||
const commonEdges = findCommonEdges(graph, clusterId, _id);
|
||||
|
||||
if (_id) {
|
||||
log.trace('Found replacement for', id, ' => ', _id);
|
||||
return _id;
|
||||
if (commonEdges.length > 0) {
|
||||
// console.log(
|
||||
// '\x1B[44;93;4m abc24 The replacement also has an edge',
|
||||
// clusterId,
|
||||
// ' => ',
|
||||
// _id,
|
||||
// graph.edges()
|
||||
// );
|
||||
reserve = _id;
|
||||
} else {
|
||||
return _id;
|
||||
}
|
||||
}
|
||||
}
|
||||
return reserve;
|
||||
};
|
||||
|
||||
const getAnchorId = (id) => {
|
||||
@@ -207,10 +238,10 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
||||
'Cluster identified',
|
||||
id,
|
||||
' Replacement id in edges: ',
|
||||
findNonClusterChild(id, graph)
|
||||
findNonClusterChild(id, graph, id)
|
||||
);
|
||||
descendants[id] = extractDescendants(id, graph);
|
||||
clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
|
||||
clusterDb[id] = { id: findNonClusterChild(id, graph, id), clusterData: graph.node(id) };
|
||||
}
|
||||
});
|
||||
|
||||
|
@@ -10,11 +10,6 @@ import createLabel from './createLabel.js';
|
||||
import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
|
||||
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||
|
||||
// Helper function to calculate the offset correction for the label
|
||||
const calcLabelOffsetCorrection = (diff) => {
|
||||
return diff * 0.75 - 6;
|
||||
};
|
||||
|
||||
const rect = (parent, node) => {
|
||||
log.info('Creating subgraph rect for ', node.id, node);
|
||||
const siteConfig = getConfig();
|
||||
@@ -196,6 +191,7 @@ const roundedWithTitle = (parent, node) => {
|
||||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
|
||||
if (evaluate(siteConfig.flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
@@ -203,6 +199,7 @@ const roundedWithTitle = (parent, node) => {
|
||||
dv.attr('width', bbox.width);
|
||||
dv.attr('height', bbox.height);
|
||||
}
|
||||
|
||||
const padding = 0 * node.padding;
|
||||
const halfPadding = padding / 2;
|
||||
|
||||
@@ -216,10 +213,11 @@ const roundedWithTitle = (parent, node) => {
|
||||
|
||||
const x = node.x - width / 2 - halfPadding;
|
||||
const y = node.y - node.height / 2 - halfPadding;
|
||||
const innerY = node.y - node.height / 2 - halfPadding + bbox.height - 1;
|
||||
const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;
|
||||
const height = node.height + padding;
|
||||
const innerHeight = node.height + padding - bbox.height - 3;
|
||||
const innerHeight = node.height + padding - bbox.height - 2;
|
||||
const look = siteConfig.look;
|
||||
|
||||
// add the rect
|
||||
let rect;
|
||||
if (node.look === 'handdrawn') {
|
||||
@@ -270,12 +268,9 @@ const roundedWithTitle = (parent, node) => {
|
||||
.attr('height', innerHeight);
|
||||
}
|
||||
|
||||
let diff = bbox.height - (innerY - y) / 2;
|
||||
let correction = calcLabelOffsetCorrection(diff, bbox.height);
|
||||
|
||||
label.attr(
|
||||
'transform',
|
||||
`translate(${node.x - bbox.width / 2}, ${(innerY - y) / 2 - correction})`
|
||||
`translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})`
|
||||
);
|
||||
|
||||
const rectBox = rect.node().getBBox();
|
||||
|
@@ -273,7 +273,6 @@ export const intersection = (node, outsidePoint, insidePoint) => {
|
||||
// log.warn();
|
||||
if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
|
||||
// Intersection is top or bottom of rect.
|
||||
// let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
|
||||
let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
|
||||
r = (R * q) / Q;
|
||||
const res = {
|
||||
@@ -281,10 +280,10 @@ export const intersection = (node, outsidePoint, insidePoint) => {
|
||||
y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
|
||||
};
|
||||
|
||||
if (r === 0) {
|
||||
res.x = outsidePoint.x;
|
||||
res.y = outsidePoint.y;
|
||||
}
|
||||
// if (r === 0) {
|
||||
// res.x = outsidePoint.x;
|
||||
// res.y = outsidePoint.y;
|
||||
// }
|
||||
if (R === 0) {
|
||||
res.x = outsidePoint.x;
|
||||
}
|
||||
@@ -292,7 +291,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
|
||||
res.y = outsidePoint.y;
|
||||
}
|
||||
|
||||
log.warn(`abc89 top/bot calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res);
|
||||
log.warn(`abc89 top/bot calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res, 'apa');
|
||||
|
||||
return res;
|
||||
} else {
|
||||
@@ -347,7 +346,7 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
|
||||
// Calc the intersection coord between the point anf the last point outside the rect
|
||||
const inter = intersection(boundaryNode, lastPointOutside, point);
|
||||
log.warn('abc88 inside', point, lastPointOutside, inter);
|
||||
log.warn('abc88 intersection', inter);
|
||||
log.warn('abc88 intersection', inter, boundaryNode);
|
||||
|
||||
// // Check case where the intersection is the same as the last point
|
||||
let pointPresent = false;
|
||||
|
@@ -34,7 +34,7 @@ class Theme {
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#e8e8e8';
|
||||
this.labelBackground = 'rgba(232,232,232,0.6)';
|
||||
this.textColor = '#333';
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 5;
|
||||
|
Reference in New Issue
Block a user