Skip to content

Commit

Permalink
Merge pull request #6136 from mermaid-js/5813-edge-bugfix
Browse files Browse the repository at this point in the history 
Adding animations to flowchart edges also fixing bug with invisible edges
  • Loading branch information
@ashishjain0512
ashishjain0512 authored Jan 7, 2025
2 parents df636c6 + ec0d9c3 commit bc2cc61
Show file tree
Hide file tree
Showing 18 changed files with 485 additions and 85 deletions.
5 changes: 5 additions & 0 deletions .changeset/many-brooms-promise.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'mermaid': minor
---

Adding support for animation of flowchart edges
79 changes: 58 additions & 21 deletions cypress/platform/knsv2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,29 +84,66 @@
/* tspan {
font-size: 6px !important;
} */
/* .flowchart-link {
stroke-dasharray: 4, 4 !important;
animation: flow 1s linear infinite;
animation: dashdraw 4.93282s linear infinite;
stroke-width: 2px !important;
} */

@keyframes dashdraw {
from {
stroke-dashoffset: 0;
}
}

/*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: 4.932820s linear infinite;*/
/* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
</style>
</head>

<body>
<pre id="diagram4" class="mermaid2">
flowchart LR
A --> B
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart LR
subgraph S2
subgraph s1["APA"]
D{"Use the editor"}
end


D -- Mermaid js --> I{"fa:fa-code Text"}
D --> I
D --> I

end
A e1@==> B
e1@{ animate: true}
</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="mermaid">
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
Expand All @@ -131,7 +168,7 @@
end
end
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -144,7 +181,7 @@
D-->I
D-->I
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand Down Expand Up @@ -183,7 +220,7 @@
n8@{ shape: rect}

</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -199,7 +236,7 @@


</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -208,7 +245,7 @@
A{A} --> B & C
</pre
>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand All @@ -220,7 +257,7 @@
end
</pre
>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
Expand Down
6 changes: 3 additions & 3 deletions docs/config/setup/interfaces/mermaid.LayoutData.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

#### Defined in

[packages/mermaid/src/rendering-util/types.ts:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L144)
[packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)

---

Expand All @@ -30,7 +30,7 @@

#### Defined in

[packages/mermaid/src/rendering-util/types.ts:143](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L143)
[packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

---

Expand All @@ -40,4 +40,4 @@

#### Defined in

[packages/mermaid/src/rendering-util/types.ts:142](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L142)
[packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
2 changes: 1 addition & 1 deletion docs/config/setup/interfaces/mermaid.ParseOptions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ The `parseError` function will not be called.

#### Defined in

[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
[packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
4 changes: 2 additions & 2 deletions docs/config/setup/interfaces/mermaid.ParseResult.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ The config passed as YAML frontmatter or directives

#### Defined in

[packages/mermaid/src/types.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L70)
[packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)

---

Expand All @@ -30,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

#### Defined in

[packages/mermaid/src/types.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L66)
[packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
6 changes: 3 additions & 3 deletions docs/config/setup/interfaces/mermaid.RenderResult.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
#### Defined in
[packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
[packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
---
Expand All @@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in
[packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
[packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
---
Expand All @@ -63,4 +63,4 @@ The svg code for the rendered graph.
#### Defined in
[packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
[packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
85 changes: 85 additions & 0 deletions docs/syntax/flowchart.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1183,6 +1183,91 @@ flowchart TB
B --> D
```

### Attaching an ID to Edges

Mermaid now supports assigning IDs to edges, similar to how IDs and metadata can be attached to nodes. This feature lays the groundwork for more advanced styling, classes, and animation capabilities on edges.

**Syntax:**

To give an edge an ID, prepend the edge syntax with the ID followed by an `@` character. For example:

```mermaid-example
flowchart LR
A e1@–> B
```

```mermaid
flowchart LR
A e1@–> B
```

In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.

### Turning an Animation On

Once you have assigned an ID to an edge, you can turn on animations for that edge by defining the edge’s properties:

```mermaid-example
flowchart LR
A e1@==> B
e1@{ animate: true }
```

```mermaid
flowchart LR
A e1@==> B
e1@{ animate: true }
```

This tells Mermaid that the edge `e1` should be animated.

### Selecting Type of Animation

In the initial version, two animation speeds are supported: `fast` and `slow`. Selecting a specific animation type is a shorthand for enabling animation and setting the animation speed in one go.

**Examples:**

```mermaid-example
flowchart LR
A e1@–> B
e1@{ animation: fast }
```

```mermaid
flowchart LR
A e1@–> B
e1@{ animation: fast }
```

This is equivalent to `{ animate: true, animation: fast }`.

### Using classDef Statements for Animations

You can also animate edges by assigning a class to them and then defining animation properties in a `classDef` statement. For example:

```mermaid-example
flowchart LR
A e1@–> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
```

```mermaid
flowchart LR
A e1@–> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
```

In this snippet:

- `e1@-->` creates an edge with ID `e1`.
- `classDef animate` defines a class named `animate` with styling and animation properties.
- `class e1 animate` applies the `animate` class to the edge `e1`.

**Note on Escaping Commas:**
When setting the `stroke-dasharray` property, remember to escape commas as `\,` since commas are used as delimiters in Mermaid’s style definitions.

## New arrow types

There are new types of arrows supported:
Expand Down
Loading

0 comments on commit bc2cc61

Please sign in to comment.