mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-02 23:26:44 +02:00
Merge branch 'neo-new-shapes' of github.com:Mermaid-Chart/alana-mermaid into neo-new-shapes
This commit is contained in:
@@ -36,7 +36,7 @@
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
background: #333;
|
||||
font-family: 'Arial';
|
||||
/* color: white; */
|
||||
/* font-size: 18px !important; */
|
||||
@@ -105,10 +105,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
A e1@-.-> B
|
||||
C e2@--> D
|
||||
A e1@-.-> B & C e2@--> D
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
@@ -152,12 +151,12 @@ config:
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
theme: forest
|
||||
look: classic
|
||||
look: neo
|
||||
theme: redux
|
||||
layout: elk
|
||||
---
|
||||
flowchart LR
|
||||
A e1@--> BB
|
||||
e1@{ animation: fast}
|
||||
</pre>
|
||||
<hr />
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
@@ -180,12 +179,12 @@ config:
|
||||
<!-- Circle -->
|
||||
<hr />
|
||||
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
A e1@==o B
|
||||
e1@{ animate: true}
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
theme: forest
|
||||
@@ -211,6 +210,93 @@ config:
|
||||
A e1@==o BB
|
||||
e1@{ animate: false}
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
theme: redux-dark
|
||||
layout: dagre
|
||||
---
|
||||
classDiagram
|
||||
direction TB
|
||||
class Animal {
|
||||
+int age
|
||||
+String gender
|
||||
+isMammal()
|
||||
+mate()
|
||||
}
|
||||
class Duck {
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
|
||||
class Zebra {
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
class UntitledClass {
|
||||
}
|
||||
class Animal_copy_1["Animal"] {
|
||||
+int age
|
||||
+String gender
|
||||
+isMammal()
|
||||
+mate()
|
||||
}
|
||||
|
||||
note for Animal "This is a sample note"
|
||||
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal_copy_1 "*" --|> "1" Animal
|
||||
Animal_copy_1 .. UntitledClass
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
theme: redux-dark
|
||||
layout: dagre
|
||||
---
|
||||
flowchart LR
|
||||
classDef redNode fill:#D50000,color:#000000;
|
||||
classDef pinkNode fill:#E1BEE7,color:#000000;
|
||||
classDef yellowNode fill:#FFF9C4,color:#000000;
|
||||
classDef blackNode fill:#000000,stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,color:#FFFFFF;
|
||||
classDef greenNode fill:#00F840,color:#000000;
|
||||
classDef reminderNode stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,fill:#000000,color:#FFFFFF;
|
||||
classDef blueSubgraph fill:#BBDEFB;
|
||||
|
||||
subgraph subgraph_zv2q8ucnp["Shape descriptions"]
|
||||
customer((Customer)):::redNode
|
||||
Support["Support"]:::pinkNode
|
||||
Technician{{Technician}}:::yellowNode
|
||||
Decision{"Decision"}:::blackNode
|
||||
end
|
||||
|
||||
A((Reported issue)):::redNode --> B["Ticket is created"]
|
||||
B --> C{"Working hours?"}:::blackNode
|
||||
C -- Yes --> E{{"Tickets are sent to day team for response"}}:::yellowNode
|
||||
C -- No --> F["Tickets are sent to on-call staff for response"]:::pinkNode
|
||||
E --> Worked{"Ticket being worked on?"}:::reminderNode
|
||||
F --> Worked
|
||||
Worked -- Yes --> G["Work on the tickets based on priority"]:::pinkNode
|
||||
Worked -- No --> Reminder["Reminder is sent"]
|
||||
Reminder --> Worked
|
||||
G --> H["Team fixes the issue"]:::pinkNode
|
||||
H --> I{"Is the issue resolved?"}:::reminderNode
|
||||
I -- Yes --> Done["Ticket is closed and follow-up email is sent"]:::greenNode
|
||||
I -- No --> H
|
||||
|
||||
class subgraph_zv2q8ucnp blueSubgraph
|
||||
|
||||
linkStyle 2 stroke:#00C853,fill:none
|
||||
linkStyle 3 stroke:#D50000,fill:none
|
||||
linkStyle 6 stroke:#00C853,fill:none
|
||||
linkStyle 7 stroke:#D50000,fill:none
|
||||
linkStyle 11 stroke:#00C853,fill:none
|
||||
linkStyle 12 stroke:#D50000,fill:none
|
||||
|
||||
</pre>
|
||||
|
||||
<!-- Next set of tests -->
|
||||
<hr />
|
||||
@@ -356,7 +442,7 @@ config:
|
||||
alert('It worked');
|
||||
}
|
||||
await mermaid.initialize({
|
||||
// theme: 'base',
|
||||
theme: 'redux-dark',
|
||||
// theme: 'default',
|
||||
// theme: 'forest',
|
||||
// handDrawnSeed: 12,
|
||||
@@ -364,7 +450,7 @@ config:
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
layout: 'sugiyama',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
||||
|
@@ -58,7 +58,6 @@ export const insertEdgeLabel = async (elem, edge) => {
|
||||
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
||||
|
||||
// Make element accessible by id for positioning
|
||||
log.debug('Inserting edge label abc88', edge.id, edge.label, edgeLabels.get(edge.id));
|
||||
edgeLabels.set(edge.id, edgeLabel);
|
||||
|
||||
// Update the abstract data of the edge with the new information about its width and height
|
||||
@@ -341,94 +340,6 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
|
||||
return points;
|
||||
};
|
||||
|
||||
// function extractCornerPoints(points) {
|
||||
// const cornerPoints = [];
|
||||
// const cornerPointPositions = [];
|
||||
// for (let i = 1; i < points.length - 1; i++) {
|
||||
// const prev = points[i - 1];
|
||||
// const curr = points[i];
|
||||
// const next = points[i + 1];
|
||||
// if (
|
||||
// prev.x === curr.x &&
|
||||
// curr.y === next.y &&
|
||||
// Math.abs(curr.x - next.x) > 5 &&
|
||||
// Math.abs(curr.y - prev.y) > 5
|
||||
// ) {
|
||||
// cornerPoints.push(curr);
|
||||
// cornerPointPositions.push(i);
|
||||
// } else if (
|
||||
// prev.y === curr.y &&
|
||||
// curr.x === next.x &&
|
||||
// Math.abs(curr.x - prev.x) > 5 &&
|
||||
// Math.abs(curr.y - next.y) > 5
|
||||
// ) {
|
||||
// cornerPoints.push(curr);
|
||||
// cornerPointPositions.push(i);
|
||||
// }
|
||||
// }
|
||||
// return { cornerPoints, cornerPointPositions };
|
||||
// }
|
||||
|
||||
// const findAdjacentPoint = function (pointA, pointB, distance) {
|
||||
// const xDiff = pointB.x - pointA.x;
|
||||
// const yDiff = pointB.y - pointA.y;
|
||||
// const length = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
|
||||
// const ratio = distance / length;
|
||||
// return { x: pointB.x - ratio * xDiff, y: pointB.y - ratio * yDiff };
|
||||
// };
|
||||
|
||||
// const fixCorners = function (lineData) {
|
||||
// const { cornerPointPositions } = extractCornerPoints(lineData);
|
||||
// const newLineData = [];
|
||||
// const r = 4;
|
||||
// for (let i = 0; i < lineData.length; i++) {
|
||||
// if (cornerPointPositions.includes(i)) {
|
||||
// const prevPoint = lineData[i - 1];
|
||||
// const nextPoint = lineData[i + 1];
|
||||
// const cornerPoint = lineData[i];
|
||||
|
||||
// const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, r);
|
||||
// const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, r);
|
||||
|
||||
// const xDiff = newNextPoint.x - newPrevPoint.x;
|
||||
// const yDiff = newNextPoint.y - newPrevPoint.y;
|
||||
// newLineData.push(newPrevPoint);
|
||||
|
||||
// const a = Math.sqrt(2) * 2;
|
||||
// let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
|
||||
// if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
|
||||
// log.debug(
|
||||
// 'Corner point fixing',
|
||||
// Math.abs(nextPoint.x - prevPoint.x),
|
||||
// Math.abs(nextPoint.y - prevPoint.y)
|
||||
// );
|
||||
|
||||
// if (cornerPoint.x === newPrevPoint.x) {
|
||||
// newCornerPoint = {
|
||||
// x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
|
||||
// y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
|
||||
// };
|
||||
// } else {
|
||||
// newCornerPoint = {
|
||||
// x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
|
||||
// y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
|
||||
// };
|
||||
// }
|
||||
// } else {
|
||||
// log.debug(
|
||||
// 'Corner point skipping fixing',
|
||||
// Math.abs(nextPoint.x - prevPoint.x),
|
||||
// Math.abs(nextPoint.y - prevPoint.y)
|
||||
// );
|
||||
// }
|
||||
// newLineData.push(newCornerPoint, newNextPoint);
|
||||
// } else {
|
||||
// newLineData.push(lineData[i]);
|
||||
// }
|
||||
// }
|
||||
// return newLineData;
|
||||
// };
|
||||
|
||||
const generateDashArray = (len, oValueS, oValueE) => {
|
||||
const middleLength = len - oValueS - oValueE;
|
||||
const dashLength = 2; // Length of each dash
|
||||
@@ -446,7 +357,6 @@ const generateDashArray = (len, oValueS, oValueE) => {
|
||||
|
||||
return dashArray;
|
||||
};
|
||||
|
||||
export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
|
||||
const { handDrawnSeed } = getConfig();
|
||||
let points = edge.points;
|
||||
@@ -495,16 +405,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
||||
}
|
||||
|
||||
let lineData = points.filter((p) => !Number.isNaN(p.y));
|
||||
// lineData = fixCorners(lineData);
|
||||
let lastPoint = lineData[lineData.length - 1];
|
||||
if (lineData.length > 1) {
|
||||
lastPoint = lineData[lineData.length - 1];
|
||||
const secondLastPoint = lineData[lineData.length - 2];
|
||||
const diffX = (lastPoint.x - secondLastPoint.x) / 2;
|
||||
const diffY = (lastPoint.y - secondLastPoint.y) / 2;
|
||||
const midPoint = { x: secondLastPoint.x + diffX, y: secondLastPoint.y + diffY };
|
||||
lineData.splice(-1, 0, midPoint);
|
||||
}
|
||||
//lineData = fixCorners(lineData);
|
||||
let curve = curveBasis;
|
||||
curve = curveLinear;
|
||||
switch (edge.curve) {
|
||||
@@ -527,8 +428,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
||||
|
||||
const { x, y } = getLineFunctionsWithOffset(edge);
|
||||
const lineFunction = line().x(x).y(y).curve(curve);
|
||||
// const pointsStr = btoa(JSON.stringify(lineData));
|
||||
// console.log('Line data', lineData);
|
||||
|
||||
let strokeClasses;
|
||||
switch (edge.thickness) {
|
||||
case 'normal':
|
||||
|
Reference in New Issue
Block a user