Flowchart

1. Flow Direction

graph TD
    Start --> Stop

type

Type	Description
TB	Top to Bottom
TD	Top-down/ same as Top to Bottom
BT	Bottom to Top
RL	Right to Left
LR	Left to Right

2. Node-shapes

graph LR


%% A node with round edges
    id1(This is the text in the box 1)


%% A stadium-shaped node
    id2([This is the text in the box 2]) 


%% A stadium-shaped node
    id3([This is the text in the box 3]) 


%% A node in a subroutine shape
    id4[[This is the text in the box 4]]


%% A node in a cylindrical shape
    id5[(Database 5)]


%% A node in the form of a circle
    id6((This is the text in the circle 6))


%% A node in an asymmetric shape
    id7>This is the text in the box 7]


%% A node (rhombus)
    id8{This is the text in the box 8}


%% A hexagon node
    id9{{This is the text in the box 9}}

%% Parallelogram
    id10[/This is the text in the box 10/]


%% Parallelogram alt
    id11[\This is the text in the box 11\]


%% Trapezoid
    A[/Christmas 12\]


%% Trapezoid alt
    B[\Go shopping 13/]

graph TD


%% A node with round edges
    id1(This is the text in the box 1)


%% A stadium-shaped node
    id2([This is the text in the box 2]) 


%% A stadium-shaped node
    id3([This is the text in the box 3]) 


%% A node in a subroutine shape
    id4[[This is the text in the box 4]]


%% A node in a cylindrical shape
    id5[(Database 5)]


%% A node in the form of a circle
    id6((This is the text in the circle 6))


%% A node in an asymmetric shape
    id7>This is the text in the box 7]


%% A node (rhombus)
    id8{This is the text in the box 8}


%% A hexagon node
    id9{{This is the text in the box 9}}

%% Parallelogram
    id10[/This is the text in the box 10/]


%% Parallelogram alt
    id11[\This is the text in the box 11\]


%% Trapezoid
    A[/Christmas 12\]


%% Trapezoid alt
    B[\Go shopping 13/]

3. Links between nodes 1

%% A link with arrow head
graph LR
    A-->B


%% An open link
    C --- D

%% Text on links
    E-- This is the text! ---F
%% or
    G---|This is the text|H


%% 【practical】
I ---|cost 10<br>|K
I ---|cost 10<br>|L

M ---|192.168.10.1/30|N
M ---|192.168.10.5/30|N


O ---|192.168.10.1/30<br>cost 10|P
O ---|192.168.10.5/30<br>cost 10|P

%% A link with arrow head
graph LR
    A-->B


%% An open link
    C --- D

%% Text on links
    E-- This is the text! ---F
%% or
    G---|This is the text|H


%% 【practical】
I ---|cost 10<br>|K
I ---|cost 10<br>|L

M ---|192.168.10.1/30|N
M ---|192.168.10.5/30|N


O ---|192.168.10.1/30<br>cost 10|P
O ---|192.168.10.5/30<br>cost 10|P

4. Links between nodes 2

%% A link with arrow head and text
graph LR
    A-->|text|B

%% or
    C-- text -->D


%% Dotted link
   E-.->F;


%% Dotted link with text
   G-. text .-> H

%% Thick link
   I ==> J


%% Thick link with text
   K == text ==> L


%%Chaining of links
%% It is possible declare many links in the same line as per below:
   M -- text --> N -- text2 --> O


%% It is also possible to declare multiple nodes links in the same line as per below:
a --> b & c--> d

%% A link with arrow head and text
graph LR
    A-->|text|B

%% or
    C-- text -->D


%% Dotted link
   E-.->F;


%% Dotted link with text
   G-. text .-> H

%% Thick link
   I ==> J


%% Thick link with text
   K == text ==> L


%%Chaining of links
%% It is possible declare many links in the same line as per below:
   M -- text --> N -- text2 --> O


%% It is also possible to declare multiple nodes links in the same line as per below:
a --> b & c--> d

5. Links between nodes 3

%%Chaining of links
%% You can then describe dependencies in a very expressive way. Like the one-liner below:

graph TB
A & B--> C & D

%%Chaining of links
%% You can then describe dependencies in a very expressive way. Like the one-liner below:

graph TB
A & B--> C & D

6. Links between nodes 5

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

flowchart LR
    A --o B
    B --x C


%% Beta: Multi directional arrows
%% When using flowchart instead of graph there is the possibility to use multidirectional arrows.

    a o--o b
    b <--> c
    c x--x d

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

flowchart LR
    A --o B
    B --x C


%% Beta: Multi directional arrows
%% When using flowchart instead of graph there is the possibility to use multidirectional arrows.

    a o--o b
    b <--> c
    c x--x d

7. Links between nodes 6

%% Minimum length of a link


%% 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:

graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];

%% Minimum length of a link


%% 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:

graph TD
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];

8. Dotted Link / Thick link

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

9. Special characters (that break syntax)

%% Special characters that break syntax
graph LR
    id1["This is the (text) in the box"]


%% Entity codes to escape characters
%% It is possible to escape characters using the syntax exemplified here.
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]

%% Special characters that break syntax
graph LR
    id1["This is the (text) in the box"]


%% Entity codes to escape characters
%% It is possible to escape characters using the syntax exemplified here.
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]

10. Subgraphs 1

%% syntax
%% subgraph title
%%     graph definition
%% end

%% example
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

%% syntax
%% subgraph title
%%     graph definition
%% end

%% example
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

11. Subgraphs 2

%% You can also set an explicit id for the subgraph.
graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

%% You can also set an explicit id for the subgraph.
graph TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

12. Beta flowcharts

%% With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

%% With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

13. Direction in subgraphs

%% With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

%% With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

14. Interaction copy

graph LR;
    A-->B;
    B-->C;
    C-->D;
    D-->E;
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank
    click C href "http://www.github.com" _blank
    click D href "http://www.github.com" "Open this in a new tab" _blank

同じことをHTMLで書く方法は以下の通り

<body>
  <div class="mermaid">
    graph LR;
        A-->B;
        B-->C;
        C-->D;
        D-->E;
        click A callback "Tooltip"
        click B "http://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "http://www.github.com" "This is a link"
  </div>

  <script>
    var callback = function(){
        alert('A callback was triggered');
    }
    var config = {
        startOnLoad:true,
        flowchart:{
            useMaxWidth:true,
            htmlLabels:true,
            curve:'cardinal',
        },
        securityLevel:'loose',
    };

    mermaid.initialize(config);
  </script>
</body>

15. Styling a node

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

16. Class

毎回スタイルを定義するよりも便利なのは、スタイルのクラスを定義し、このクラスを異なる外観にする必要のあるノードにアタッチすることです。 クラス定義は次の例のようになります。

Syntax

classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId1 className;
class nodeId1,nodeId2 className;

graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;

graph LR
    A:::someclass --> B
    classDef someclass fill:#f96;

17. Css classes

以下の例のように、グラフ定義から適用できるcssスタイルの事前定義されたクラスを作成することもできます。

Example style

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

Example definition

graph LR;
    A-->B[AAA<span>BBB</span>];
    B-->D;
    class A cssClass;

graph LR;
    A-->B[AAA<span>BBB</span>];
    B-->D;
    class A cssClass;

Default class

クラスにdefaultという名前が付けられている場合、特定のクラス定義なしですべてのクラスに割り当てられます。If a class is named default it will be assigned to all classes without specific class definitions.

    classDef default fill:#f9f,stroke:#333,stroke-width:4px;

18. Basic support for fontawesome

fontawesomeからアイコンを追加することが可能です。 アイコンには、【構文】 ** fa：icon class name **を介してアクセスします。

Error

MKdocs では fontawesome　がうまく表示されず...

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

19. Sample FontAwesome

https://johobase.com/font-awesome-icon-font-list-free/

graph LR

    fa:fa-address-book
    fa:fa-address-card
    fa:fa-address-card
    fa:fa-adjust
    fa:fa-apple
    fa:fa-bath
    fa:fa-bed
    fa:fa-beer
    fa:fa-bicycle
    fa:fa-bluetooth
    fa:fa-bluetooth-b
    fa:fa-book
    fa:fa-briefcase
    fa:fa-bug
    fa:fa-calendar
    fa:fa-car
    fa:fa-check
    fa:fa-check-square
    fa:fa-child
    fa:fa-chrome
    fa:fa-clipboard
    fa:fa-cloud
    fa:fa-coffee
    fa:fa-comment
    fa:fa-file
    fa:fa-hourglass-half
    fa:fa-image
    fa:fa-laptop
    fa:fa-linux
    fa:fa-microphone
    fa:fa-mouse-pointer
    fa:fa-phone
    fa:fa-search
    fa:fa-shopping-cart
    fa:fa-trash
    fa:fa-user
    fa:fa-wifi
    fa:fa-youtube

20. Space / without semicolon

頂点とリンクの間にスペースがあり、セミコロンがないグラフ宣言

グラフ宣言では、ステートメントもセミコロンなしで終了できるようになりました。 リリース0.2.16以降、グラフステートメントをセミコロンで終了することはオプションです。 したがって、以下のグラフ宣言は、グラフの古い宣言とともに有効です。

頂点とリンクの間には単一のスペースが許可されます。 ただし、頂点とそのテキスト、およびリンクとそのテキストの間にスペースがあってはなりません。 グラフ宣言の古い構文も機能するため、この新しい機能はオプションであり、読みやすさを向上させるために導入されました。

以下は、グラフエッジの新しい宣言です。これは、グラフエッジの古い宣言とともに有効です。

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

21. Configuration

レンダリングされたフローチャートの幅を調整することは可能ですか？

これは、jelly.flowchartConfigを定義するか、CLIによって構成でjsonファイルを使用することによって行われます。 CLIの使用方法については、かつのページに記載されています。 jelly.flowchartConfigはJSON文字列ウィットに設定できます

mermaid.flowchartConfig = {
    width: 100%
}