Merge branch 'develop' into pr/dreathed/4856

* develop: (935 commits) chore: Minor fixes chore: Build docs Use develop as base on develop branch. Update renovate json update link update announcement and blog pages Remove `--force` flag Tweak editor.bash update link chore: update browsers list Update integrations-community: add Drupal and module. Support Firefox Address review comments Change run symbol feat: Make the examples interactive in the documentation site. Add langium chore: update browsers list chore(deps): update all patch dependencies chore(deps): update all minor dependencies Update keywords and description ...
2025-09-20 15:59:51 +02:00 · 2024-03-23 13:57:07 +05:30
parent 00e66c48b8 be1270d070
commit 002d493035
489 changed files with 26388 additions and 11009 deletions
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -1,6 +1,5 @@
 ---
 title: Flowcharts Syntax
-outline: 'deep' # shows all h3 headings in outline in Vitepress
 ---

 # Flowcharts - Basic Syntax
@@ -11,6 +10,14 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
 If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
 ```

+```warning
+If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
+
+Typing "A---oB" will create a [circle edge](#circle-edge-example).
+
+Typing "A---xB" will create a [cross edge](#cross-edge-example).
+```
+
 ### A node (default)

 ```mermaid-example
@@ -293,7 +300,7 @@ flowchart TB
    A & B--> C & D
 ```

-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
@@ -306,17 +313,28 @@ flowchart TB
    B --> D
 ```

-### New arrow types
+## New arrow types

-There are new types of arrows supported as per below:
+There are new types of arrows supported:
+
+- circle edge
+- cross edge
+
+### Circle edge example

 ```mermaid-example
 flowchart LR
    A --o B
-    B --x C
 ```

-### Multi directional arrows
+### Cross edge example
+
+```mermaid-example
+flowchart LR
+    A --x B
+```
+
+## Multi directional arrows

 There is the possibility to use multidirectional arrows.

@@ -487,7 +505,7 @@ flowchart LR
    end
    %% ^ These subgraphs are identical, except for the links to them:

-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% Link *within* subgraph2:
    %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -764,7 +782,19 @@ flowchart TD
    B-->E(A fa:fa-camera-retro perhaps?)
 ```

-Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid supports Font Awesome if the CSS is included on the website.
+Mermaid does not have any restriction on the version of Font Awesome that can be used.
+
+Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
+
+Adding this snippet in the `<head>` would add support for Font Awesome v6.5.1
+
+```html
+<link
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+  rel="stylesheet"
+/>
+```

 ## Graph declarations with spaces between vertices and link and without semicolon

@@ -790,7 +820,7 @@ The layout of the diagram is done with the renderer. The default renderer is dag

 Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.

-The _elk_ renderer is an experimenal feature.
+The _elk_ renderer is an experimental feature.
 You can change the renderer to elk by adding this directive:

 ```
@@ -813,3 +843,5 @@ mermaid.flowchartConfig = {
    width: 100%
 }
 ```
+
+<!--- cspell:ignore lagom --->