marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-25 02:09:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

MC-2560 Reviving dotted lines for flowcharts

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-01-24 15:49:11 +01:00
parent 49bdd11011
commit ba0b945821
3 changed files with 50 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
cypress/platform/knsv2.html
View File

@@ -105,20 +105,17 @@
</head> </head>
<body> <body>
<pre id="diagram4" class="mermaid2">
flowchart LR
AB["apa@apa@"] --> B(("`apa@apa`"))
</pre>
<pre id="diagram4" class="mermaid2">
flowchart
D(("for D"))
</pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart LR
A e1@-.-> B
C e2@--> D
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==> B A e1@==> B
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -129,12 +126,12 @@ config:
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==> B A e1@==> B
e1@{ animate: false} e1@{ animate: false}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: neo theme: neo
@@ -147,12 +144,12 @@ config:
<!-- Next set of tests --> <!-- Next set of tests -->
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
slow e2@--> B slow e2@--> B
e2@{ animation: slow} e2@{ animation: slow}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -163,13 +160,13 @@ config:
e1@{ animation: fast} e1@{ animation: fast}
</pre> </pre>
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==> B A e1@==> B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite; classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate class e1 animate
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -199,12 +196,12 @@ config:
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==o B A e1@==o B
e1@{ animate: false} e1@{ animate: false}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: neo theme: neo
@@ -217,12 +214,12 @@ config:
<!-- Next set of tests --> <!-- Next set of tests -->
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
slow e2@--o B slow e2@--o B
e2@{ animation: slow} e2@{ animation: slow}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -233,13 +230,13 @@ config:
e1@{ animation: fast} e1@{ animation: fast}
</pre> </pre>
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==o B A e1@==o B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite; classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate class e1 animate
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -253,12 +250,12 @@ config:
<!-- Cross --> <!-- Cross -->
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==x B A e1@==x B
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -269,12 +266,12 @@ config:
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==x B A e1@==x B
e1@{ animate: false} e1@{ animate: false}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: neo theme: neo
@@ -287,12 +284,12 @@ config:
<!-- Next set of tests --> <!-- Next set of tests -->
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
slow e2@--x B slow e2@--x B
e2@{ animation: slow} e2@{ animation: slow}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -303,13 +300,13 @@ config:
e1@{ animation: fast} e1@{ animation: fast}
</pre> </pre>
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==x B A e1@==x B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite; classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate class e1 animate
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -320,288 +317,7 @@ config:
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite; classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate class e1 animate
</pre> </pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
class e1 animate
</pre>
<h2>infinite</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<h2>Mermaid - edge-animation-slow</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
e1@{ animation: fast}
</pre>
<h2>Mermaid - edge-animation-fast</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
class e1 edge-animation-fast
</pre>
<pre id="diagram4" class="mermaid2">
info </pre
>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
a
subgraph s0["APA"]
subgraph s8["APA"]
subgraph s1["APA"]
D{"X"}
E[Q]
end
subgraph s3["BAPA"]
F[Q]
I
end
D --> I
D --> I
D --> I
I{"X"}
end
end
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
a
D{"Use the editor"}
D -- Mermaid js --> I{"fa:fa-code Text"}
D-->I
D-->I
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
subgraph s1["Untitled subgraph"]
n1["Evaluate"]
n2["Option 1"]
n3["Option 2"]
n4["fa:fa-car Option 3"]
end
subgraph s2["Untitled subgraph"]
n5["Evaluate"]
n6["Option 1"]
n7["Option 2"]
n8["fa:fa-car Option 3"]
end
A["Start"] -- Some text --> B("Continue")
B --> C{"Evaluate"}
C -- One --> D["Option 1"]
C -- Two --> E["Option 2"]
C -- Three --> F["fa:fa-car Option 3"]
n1 -- One --> n2
n1 -- Two --> n3
n1 -- Three --> n4
n5 -- One --> n6
n5 -- Two --> n7
n5 -- Three --> n8
n1@{ shape: diam}
n2@{ shape: rect}
n3@{ shape: rect}
n4@{ shape: rect}
n5@{ shape: diam}
n6@{ shape: rect}
n7@{ shape: rect}
n8@{ shape: rect}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
subgraph s1["Untitled subgraph"]
n1["Evaluate"]
n2["Option 1"]
end
n1 -- One --> n2
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
</pre
>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
A{A} --> B & C
subgraph "subbe"
A
end
</pre
>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR
n2@{ shape: rect}
n3@{ shape: rect}
n4@{ shape: rect}
A["Start"] -- Some text --> B("Continue")
B --> C{"Evaluate"}
C -- One --> D["Option 1"]
C -- Two --> E["Option 2"]
C -- Three --> F["fa:fa-car Option 3"]
%% C@{ shape: hexagon}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
kanban:
ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
---
kanban
Backlog
task1[📝 Define project requirements]@{ ticket: a101 }
To Do
task2[🔍 Research technologies]@{ ticket: a102 }
Review
task4[🔍 Code review for login feature]@{ ticket: a104 }
Done
task5[✅ Deploy initial version]@{ ticket: a105 }
In Progress
task3[💻 Develop login feature]@{ ticket: 103 }
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
kanban
id2[In progress]
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
# sectionWidth: 300
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
id7[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
</pre>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs'; import layouts from './mermaid-layout-elk.esm.mjs';

24
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@@ -429,6 +429,24 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
// return newLineData; // return newLineData;
// }; // };
const generateDashArray = (len, oValueS, oValueE) => {
const middleLength = len - oValueS - oValueE;
const dashLength = 2; // Length of each dash
const gapLength = 2; // Length of each gap
const dashGapPairLength = dashLength + gapLength;
// Calculate number of complete dash-gap pairs that can fit
const numberOfPairs = Math.floor(middleLength / dashGapPairLength);
// Generate the middle pattern array
const middlePattern = Array(numberOfPairs).fill(`${dashLength} ${gapLength}`).join(' ');
// Combine all parts
const dashArray = `0 ${oValueS} ${middlePattern} ${oValueE}`;
return dashArray;
};
export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) { export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
const { handDrawnSeed } = getConfig(); const { handDrawnSeed } = getConfig();
let points = edge.points; let points = edge.points;
@@ -598,8 +616,12 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
const len = svgPath.node().getTotalLength(); const len = svgPath.node().getTotalLength();
const oValueS = markerOffsets2[edge.arrowTypeStart] || 0; const oValueS = markerOffsets2[edge.arrowTypeStart] || 0;
const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0; const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0;
if (edge.look === 'neo' && !animatedEdge) { if (edge.look === 'neo' && !animatedEdge) {
const dashArray = `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`; const dashArray =
edge.pattern === 'dotted'
? generateDashArray(len, oValueS, oValueE)
: `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
// No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start. // No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start.
const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`; const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`;

2
packages/mermaid/src/utils/lineWithOffset.ts
View File

@@ -22,7 +22,7 @@ export const markerOffsets2 = {
composition: 18, composition: 18,
dependency: 6, dependency: 6,
lollipop: 13.5, lollipop: 13.5,
arrow_point: 8, arrow_point: 9,
arrow_cross: 12.5, arrow_cross: 12.5,
arrow_circle: 12.5, arrow_circle: 12.5,
} as const; } as const;