Use monaco-mermaid for syntax highlighting and many syntax highlighting improvements

2025-09-02 15:16:49 +02:00 · 2021-10-31 14:45:41 -07:00
parent 66d4d9d5b8
commit 1b7e690ec1
19 changed files with 356 additions and 207 deletions
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@@ -11,7 +11,7 @@ This statement declares the direction of the Flowchart.

 This declares the graph is oriented from top to bottom (`TD` or `TB`).

-```
+```mermaid-code
 graph TD
    Start --> Stop
 ```
@@ -22,7 +22,7 @@ graph TD

 This declares the graph is oriented from left to right (`LR`).

-```
+```mermaid-code
 graph LR
    Start --> Stop
 ```
@@ -55,7 +55,7 @@ Apart from the graph type, the syntax is the same. This is currently experimenta

 ### A node (default)

-```
+```mermaid-code
 graph LR
    id
 ```
@@ -73,7 +73,7 @@ It is also possible to set text in the box that differs from the id. If this is
 found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
 one previously defined will be used when rendering the box.

-```
+```mermaid-code
 graph LR
    id1[This is the text in the box]
 ```
@@ -86,7 +86,7 @@ graph LR

 ### A node with round edges

-```
+```mermaid-code
 graph LR
    id1(This is the text in the box)
 ```
@@ -97,7 +97,7 @@ graph LR

 ### A stadium-shaped node

-```
+```mermaid-code
 graph LR
    id1([This is the text in the box])
 ```
@@ -108,7 +108,7 @@ graph LR

 ### A node in a subroutine shape

-```
+```mermaid-code
 graph LR
    id1[[This is the text in the box]]
 ```
@@ -119,7 +119,7 @@ graph LR

 ### A node in a cylindrical shape

-```
+```mermaid-code
 graph LR
    id1[(Database)]
 ```
@@ -130,7 +130,7 @@ graph LR

 ### A node in the form of a circle

-```
+```mermaid-code
 graph LR
    id1((This is the text in the circle))
 ```
@@ -141,7 +141,7 @@ graph LR

 ### A node in an asymmetric shape

-```
+```mermaid-code
 graph LR
    id1>This is the text in the box]
 ```
@@ -153,7 +153,7 @@ Currently only the shape above is possible and not its mirror. *This might chang

 ### A node (rhombus)

-```
+```mermaid-code
 graph LR
    id1{This is the text in the box}
 ```
@@ -164,7 +164,7 @@ graph LR

 ### A hexagon node
 {% raw %}
-```
+```mermaid-code
 graph LR
    id1{{This is the text in the box}}
 ```
@@ -179,7 +179,7 @@ graph LR

 ### Parallelogram

-```
+```mermaid-code
 graph TD
    id1[/This is the text in the box/]
 ```
@@ -190,7 +190,7 @@ graph TD

 ### Parallelogram alt

-```
+```mermaid-code
 graph TD
    id1[\This is the text in the box\]
 ```
@@ -201,7 +201,7 @@ graph TD

 ### Trapezoid

-```
+```mermaid-code
 graph TD
    A[/Christmas\]
 ```
@@ -211,7 +211,7 @@ graph TD
 ```
 ### Trapezoid alt

-```
+```mermaid-code
 graph TD
    B[\Go shopping/]
 ```
@@ -226,7 +226,7 @@ Nodes can be connected with links/edges. It is possible to have different types

 ### A link with arrow head

-```
+```mermaid-code
 graph LR
    A-->B
 ```
@@ -237,7 +237,7 @@ graph LR

 ### An open link

-```
+```mermaid-code
 graph LR
    A --- B
 ```
@@ -248,7 +248,7 @@ graph LR

 ### Text on links

-```
+```mermaid-code
 graph LR
    A-- This is the text! ---B
 ```
@@ -259,7 +259,7 @@ graph LR

 or

-```
+```mermaid-code
 graph LR
    A---|This is the text|B
 ```
@@ -270,7 +270,7 @@ graph LR

 ### A link with arrow head and text

-```
+```mermaid-code
 graph LR
    A-->|text|B
 ```
@@ -281,7 +281,7 @@ graph LR

 or

-```
+```mermaid-code
 graph LR
    A-- text -->B
 ```
@@ -292,7 +292,7 @@ graph LR

 ### Dotted link

-```
+```mermaid-code
 graph LR;
   A-.->B;
 ```
@@ -303,7 +303,7 @@ graph LR;

 ### Dotted link with text

-```
+```mermaid-code
 graph LR
   A-. text .-> B
 ```
@@ -314,7 +314,7 @@ graph LR

 ### Thick link

-```
+```mermaid-code
 graph LR
   A ==> B
 ```
@@ -325,7 +325,7 @@ graph LR

 ### Thick link with text

-```
+```mermaid-code
 graph LR
   A == text ==> B
 ```
@@ -337,7 +337,7 @@ graph LR
 ### Chaining of links

 It is possible to declare many links in the same line as per below:
-```
+```mermaid-code
 graph LR
   A -- text --> B -- text2 --> C
 ```
@@ -347,7 +347,7 @@ graph LR
 ```

 It is also possible to declare multiple nodes links in the same line as per below:
-```
+```mermaid-code
 graph LR
   a --> b & c--> d
 ```
@@ -357,7 +357,7 @@ graph LR
 ```

 You can then describe dependencies in a very expressive way. Like the one-liner below:
-```
+```mermaid-code
 graph TB
    A & B--> C & D
 ```
@@ -369,7 +369,7 @@ If you describe the same diagram using the the basic syntax, it will take four l
 word of warning, one could go overboard with this making the graph 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.
-```
+```mermaid-code
 graph TB
    A --> C
    A --> D
@@ -381,7 +381,7 @@ graph TB

 When using flowchart instead of graph there are new types of arrows supported as per below:

-```
+```mermaid-code
 flowchart LR
    A --o B
    B --x C
@@ -398,7 +398,7 @@ flowchart LR

 When using flowchart instead of graph there is the possibility to use multidirectional arrows.

-```
+```mermaid-code
 flowchart LR
    A o--o B
    B <--> C
@@ -423,7 +423,7 @@ than the others by adding extra dashes in the link definition.
 In the following example, two extra dashes are added in the link from node _B_
 to node _E_, so that it spans two more ranks than regular links:

-```
+```mermaid-code
 graph TD
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
@@ -448,7 +448,7 @@ When the link label is written in the middle of the link, the extra dashes must
 be added on the right side of the link. The following example is equivalent to
 the previous one:

-```
+```mermaid-code
 graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
@@ -482,7 +482,7 @@ as summed up in the following table:

 It is possible to put text within quotes in order to render more troublesome characters. As in the example below:

-```
+```mermaid-code
 graph LR
    id1["This is the (text) in the box"]
 ```
@@ -495,7 +495,7 @@ graph LR

 It is possible to escape characters using the syntax exemplified here.

-```
+```mermaid-code
    graph LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
@@ -514,7 +514,7 @@ end

 An example below:

-```
+```mermaid-code
 graph TB
    c1-->a2
    subgraph one
@@ -543,7 +543,7 @@ graph TB

 You can also set an explicit id for the subgraph.

-```
+```mermaid-code
 graph TB
    c1-->a2
    subgraph ide1 [one]
@@ -562,7 +562,7 @@ graph TB

 With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.

-```
+```mermaid-code
 flowchart TB
    c1-->a2
    subgraph one
@@ -618,7 +618,7 @@ Examples of tooltip usage below:
 </script>
 ```

-```
+```mermaid-code
 graph LR;
    A-->B;
    B-->C;
@@ -646,7 +646,7 @@ graph LR
 ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).

 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
-```
+```mermaid-code
 graph LR;
    A-->B;
    B-->C;
@@ -707,7 +707,7 @@ Beginners tip, a full example using interactive links in a html context:

 Comments can be entered within a flow diagram, which will be ignored by the parser.  Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax

-```
+```mermaid-code
 graph LR
 %% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
@@ -751,7 +751,7 @@ linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;

 It is possible to apply specific styles such as a thicker border or a different background color to a node.

-```
+```mermaid-code
 graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
@@ -791,7 +791,7 @@ It is also possible to attach a class to a list of nodes in one statement:

 A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:

-```
+```mermaid-code
 graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;
@@ -822,7 +822,7 @@ below:

 **Example definition**

-```
+```mermaid-code
 graph LR;
    A-->B[AAA<span>BBB</span>];
    B-->D;
@@ -851,7 +851,7 @@ It is possible to add icons from fontawesome.

 The icons are accessed via the syntax fa:#icon class name#.

-```
+```mermaid-code
 graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
@@ -875,7 +875,7 @@ graph TD

 Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.

-```
+```mermaid-code
 graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}