基本的な定義
フローチャートはノード（幾何学的な図形）と接続線（矢印または線）で構成されます。Mermaid コードはノードと接続線の構築方法を定義し、さまざまな矢印タイプ、多方向の矢印、およびサブグラフとの任意のリンクをサポートします。
警告 フローチャートのノードで単語 "end" を使用する場合は、最初の文字または単語全体を大文字にしてください（例："End" または "END"）。すべて小文字で "end" と入力するとフローチャートがエラーになります。
警告 フローチャートのノードを接続する際に、最初の文字として "o" または "x" を使用する場合は、文字の前にスペースを追加するか、文字を大文字にしてください（例："dev--- ops"、"dev---Ops"）。
1 つのノード（デフォルト）
コピー
埋め込み
---
title: Node
---
flowchart LR
id
id はボックス内に表示される内容です。
フローチャート作成の構文では、flowchart の代わりに graph も使用できます。
テキスト付きのノード
id とは異なるテキストをボックスに設定することもできます。これを複数回実行すると、システムはそのノードで最後に指定されたテキストを採用します。また、後でノードに接続線を定義する場合は、テキスト定義を省略できます。ボックスのレンダリング時には、以前に定義されたテキストが使用されます。
コピー
埋め込み
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode テキスト
二重引用符で Unicode テキストを囲みます。
コピー
埋め込み
flowchart LR
id["This ❤ Unicode"]
Markdown 形式
二重引用符とバッククォートで Markdown テキストを囲みます
コピー
埋め込み
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
方向
フローチャートの方向を宣言します
フローチャートが上から下に配置されることを表します（TD または TB）
コピー
埋め込み
flowchart TD
Start --> Stop
フローチャートの方向には以下が含まれます:
- TB - 上から下
- TD - 上から下（上から下と同じ）
- BT - 下から上
- RL - 右から左
- LR - 左から右
ノードの図形
角丸長方形
コピー
埋め込み
flowchart LR
id1(This is the text in the box)
スタジアム形
コピー
埋め込み
flowchart LR
id1([This is the text in the box])
サブグラフ
コピー
埋め込み
flowchart LR
id1[[This is the text in the box]]
データベース
コピー
埋め込み
flowchart LR
id1[(Database)]
円形
コピー
埋め込み
flowchart LR
id1((This is the text in the circle))
非対称図形
コピー
埋め込み
flowchart LR
id1>This is the text in the box]
ひし形
コピー
埋め込み
flowchart LR
id1{This is the text in the box}
六角形
コピー
埋め込み
flowchart LR
id1{{This is the text in the box}}
平行四辺形
コピー
埋め込み
flowchart TD
id1[/This is the text in the box/]
逆平行四辺形
コピー
埋め込み
flowchart TD
id1[\This is the text in the box\]
台形
コピー
埋め込み
flowchart TD
A[/ProcessOn\]
逆台形
コピー
埋め込み
flowchart TD
B[\ProcessOn/]
二重円
コピー
埋め込み
flowchart TD
id1(((This is the text in the circle)))
Mermaid フローチャートのノード図形の拡張
Mermaid はフローチャート作成の柔軟性と精度を高めるために、30 種類の新しい図形を導入しました。これらの新しい図形は、フローチャート内のプロセス、意思決定、イベント、データストレージ、その他の要素を直感的に表現するためのより多くの選択肢を提供し、明瞭さとセマンティックな意味を向上させます。
図形定義の新しい構文
Mermaid は現在、増え続ける図形に対応するために、図形タイプを定義する汎用構文をサポートしています。この構文により、明確で柔軟な形式でノードに特定の図形を指定できます。
コピー
埋め込み
A@{ shape: rect }
この構文はノード A を長方形として作成します。レンダリング方法は [A] または A と同じです。
ノード図形の完全なリスト
以下は、新しく導入されたノード図形と、それに対応する意味、略称、別名の完全なリストです:
| セマンティック名 | グラフ構文 | 構文の略称 | 構文の代替 | 詳細な説明 |
|---|---|---|---|---|
| カード | Notched Rectangle | notch-rect | card, notched-rectangle | カードを表します |
| 整理 | Hourglass | hourglass | collate | 整理操作を表します |
| 通信リンク | Lightning Bolt | bolt | com-link, lightning-bolt | 通信リンク |
| コメント | Curly Brace | brace | brace-l, comment | コメントを追加 |
| 右側のコメント | Curly Brace | brace-r | コメントを追加 | |
| 両側に波括弧が付いたコメント | Curly Braces | braces | コメントを追加 | |
| データの入力または出力 | Lean Right | lean-r | in-out, lean-right | 入力または出力を表します |
| データの入力または出力 | Lean Left | lean-l | lean-left, out-in | 出力または入力を表します |
| データベース | Cylinder | cyl | cylinder, database, db | データベースストレージ |
| 判定 | Diamond | diam | decision, diamond, question | 意思決定ステップ |
| 遅延 | Half-Rounded Rectangle | delay | half-rounded-rectangle | 遅延を表します |
| 直接アクセスストレージ | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | 直接アクセスストレージ |
| ディスクストレージ | Lined Cylinder | lin-cyl | disk, lined-cylinder | ディスクストレージ |
| 表示 | Curved Trapezoid | curv-trap | curved-trapezoid, display | 画面や端末などのデバイスに情報が表示されることを表します |
| 分割処理 | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | 分割処理の図形 |
| ドキュメント | Document | doc | document | ドキュメントを表します |
| イベント | Rounded Rectangle | rounded | event | イベントを表します |
| 抽出 | Triangle | tri | extract, triangle | 抽出プロセス |
| 分岐/マージ | Filled Rectangle | fork | join | フローチャート内の分岐またはマージ |
| 内部ストレージ | Window Pane | win-pane | internal-storage, window-pane | 内部ストレージ |
| 接続点 | Filled Circle | f-circ | filled-circle, junction | 接続点 |
| 線付きドキュメント | Lined Document | lin-doc | lined-document | 線付きドキュメント |
| 線/影の工程 | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | 線付きのプロセス図形 |
| ループ制限 | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | ループ制限ステップ |
| 手動ファイル | Flipped Triangle | flip-tri | flipped-triangle, manual-file | 手動ファイル操作 |
| 手動入力 | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | 手動入力ステップ |
| 手動操作 | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | 人手によるタスクを表します |
| 複数ドキュメント | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| マルチプロセス | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| 不規則な図形 | Odd | odd | 不規則な図形 | |
| 紙テープ | Flag | flag | paper-tape | 紙テープ |
| 準備条件 | Hexagon | hex | hexagon, prepare | 準備または条件ステップ |
| 優先アクション | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | 優先アクション |
| 処理 | Rectangle | rect | proc, process, rectangle | 標準的な処理の図形 |
| 開始 | Circle | circle | circ | 起点 |
| 開始 | Small Circle | sm-circ | small-circle, start | 小さな円の起点 |
| 停止 | Double Circle | dbl-circ | double-circle | 停止点を表します |
| 停止 | Framed Circle | fr-circ | framed-circle, stop | 停止点を表します |
| データの保存 | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | データの保存 |
| サブグラフ | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | サブグラフ、サブルーチン |
| 要約 | Crossed Circle | cross-circ | crossed-circle, summary | 要約 |
| タグ付きドキュメント | Tagged Document | tag-doc | tagged-document | タグ付きドキュメント |
| 標準化されたプロセス | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| 終点 | Stadium | stadium | pill, terminal | 終点 |
| テキストブロック | Text Block | text | テキストブロック |
以下は、新しく導入された図形を使用したフローチャートのコード例です:
コピー
埋め込み
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
プロセス
コピー
埋め込み
flowchart TD
A@{ shape: rect, label: "This is a process" }
イベント
コピー
埋め込み
flowchart TD
A@{ shape: rounded, label: "This is an event" }
サブプロセス
コピー
埋め込み
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
データベース（円柱）
コピー
埋め込み
flowchart TD
A@{ shape: cyl, label: "Database" }
開始（円形）
コピー
埋め込み
flowchart TD
A@{ shape: circle, label: "Start" }
不規則な図形
コピー
埋め込み
flowchart TD
A@{ shape: odd, label: "Odd shape" }
判断（ひし形）
コピー
埋め込み
flowchart TD
A@{ shape: diamond, label: "Decision" }
準備条件 (六角形)
コピー
埋め込み
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
データ入力/出力（右に傾斜）
コピー
埋め込み
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
データ入力/出力（左に傾斜）
コピー
埋め込み
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
優先アクション (台形)
コピー
埋め込み
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
手動操作 (逆台形)
コピー
埋め込み
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
停止 (二重円)
コピー
埋め込み
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
テキストブロック
コピー
埋め込み
flowchart TD
A@{ shape: text, label: "This is a text block" }
カード（切り欠き長方形）
コピー
埋め込み
flowchart TD
A@{ shape: notch-rect, label: "Card" }
線/影付きプロセス
コピー
埋め込み
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
開始（小さな円）
コピー
埋め込み
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
停止 (枠付きの円)
コピー
埋め込み
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
分岐/マージ (長方形)
コピー
埋め込み
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
整理（砂時計）
コピー
埋め込み
flowchart TD
A@{ shape: hourglass, label: "Collate" }
コメント（波括弧）
コピー
埋め込み
flowchart TD
A@{ shape: comment, label: "Comment" }
コメント右側（右側の波括弧）
コピー
埋め込み
flowchart TD
A@{ shape: brace-r, label: "Comment" }
コメント（両側に括弧が付く）
コピー
埋め込み
flowchart TD
A@{ shape: braces, label: "Comment" }
通信リンク（稲妻）
コピー
埋め込み
flowchart TD
A@{ shape: bolt, label: "Communication link" }
ドキュメント
コピー
埋め込み
flowchart TD
A@{ shape: doc, label: "Document" }
遅延（半角丸長方形）
コピー
埋め込み
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
コピー
埋め込み
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
ディスクストレージ（溝付き円柱）
コピー
埋め込み
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
表示（表示図形）
コピー
埋め込み
flowchart TD
A@{ shape: curv-trap, label: "Display" }
分割処理（分割長方形）
コピー
埋め込み
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
抽出（小さな三角形）
コピー
埋め込み
flowchart TD
A@{ shape: tri, label: "Extract" }
内部ストレージ（ウィンドウパネル）
コピー
埋め込み
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
接続点（実心円）
コピー
埋め込み
flowchart TD
A@{ shape: f-circ, label: "Connect" }
線付きドキュメント
コピー
埋め込み
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
ループ制限 (切り欠き五角形)
コピー
埋め込み
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
手動ファイル (反転三角形)
コピー
埋め込み
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
手動入力 (直角台形)
コピー
埋め込み
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
複数ドキュメント (積み重ねドキュメント)
コピー
埋め込み
flowchart TD
A@{ shape: docs, label: "Multi-document" }
マルチプロセス (積み重ね長方形)
コピー
埋め込み
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
紙テープ (旗)
コピー
埋め込み
flowchart TD
A@{ shape: flag, label: "Paper tape" }
データの保存 (蝶ネクタイ長方形)
コピー
埋め込み
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
要約 (十字付きの円)
コピー
埋め込み
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
タグ付きドキュメント
コピー
埋め込み
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
マーク付きプロセス
コピー
埋め込み
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Mermaid フローチャートの特殊な図形
Mermaid はフローチャートを強化するために画像も導入しました。フローチャートに直接画像を含めることができ、より多くの視覚的な背景と明瞭さを提供します。
画像図形
image を使用してフローチャートに画像を挿入できます。画像を定義する構文は以下のとおりです:
コピー
埋め込み
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
パラメータ
- img：表示する画像の URL アドレス。
- label：画像に関連付けられたテキストラベルで、任意の文字列を使用できます。定義しない場合、ラベルは表示されません。
- pos：ラベルの位置。定義しない場合、ラベルはデフォルトで画像の下部になります。
- w：画像の幅。定義しない場合、デフォルトで画像の元の幅になります。
- h：画像の高さ。定義しない場合、デフォルトで画像の元の高さになります。
- constraint：画像がノードのサイズを制限するかどうかを決定します。この設定は、画像が元のアスペクト比を維持し、幅に応じて高さを調整することも保証します。定義しない場合、デフォルトは off です。
画像はフローチャートに追加の柔軟性と視覚的な魅力を提供し、より情報量が多く魅力的にします。
ノード間の接続
ノードは接続線と矢印で接続できます。さまざまなタイプのリンクがあり、リンクにテキスト文字列を付加することもできます。
矢印付きのリンク
コピー
埋め込み
flowchart LR
A-->B
開いたリンク
コピー
埋め込み
flowchart LR
A --- B
テキスト付きのリンク
コピー
埋め込み
flowchart LR
A-- This is the text! ---B
または
コピー
埋め込み
flowchart LR
A --- | This is the text| B
矢印とテキスト付きのリンク
コピー
埋め込み
flowchart LR
A-->|text|B
または
コピー
埋め込み
flowchart LR
A-- text -->B
破線リンク
コピー
埋め込み
flowchart LR
A-.->B;
テキスト付きの破線リンク
コピー
埋め込み
flowchart LR
A-. text .->B;
太いリンク
コピー
埋め込み
flowchart LR
A ==> B
テキスト付きの太いリンク
コピー
埋め込み
flowchart LR
A == |text| ==> B
不可視リンク
コピー
埋め込み
flowchart LR
A ~~~ B
リンクの連鎖接続
コピー
埋め込み
flowchart LR
A -- text --> B -- text2 --> C
以下のように、同じ行で複数のノードリンクを宣言することもできます:
コピー
埋め込み
flowchart LR
a --> b & c--> d
以下のコードのように依存関係を記述することもできます:
コピー
埋め込み
flowchart LR
a --> b & c--> d & e--> f
同じ図形を基本構文で記述する場合、8 行が必要です。この方法を過度に使用すると、Markdown 形式のフローチャートが読みにくくなる可能性があることに注意してください。
コピー
埋め込み
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
接続線に ID を追加
Mermaid は現在、ノードに ID とメタデータを付加するのと同様に、接続線に ID を追加することをサポートしています。この機能は、接続線上のより高度なスタイル、クラス、アニメーション機能の基盤となります。
構文：接続線に ID を追加するには、接続線の構文の前に ID を付け、その直後に @ 文字を続けます。例：
コピー
埋め込み
flowchart LR
A e1@--> B
この例では、e1 は A と B を接続する接続線の ID です。ノードと同様に、以降の定義やスタイル文でこの ID を使用できます。
アニメーションを有効にする
接続線に ID を追加した後、接続線のプロパティを定義して接続線のアニメーションを有効にできます:
コピー
埋め込み
flowchart LR
A e1@==> B
e1@{ animate: true }
これは、接続線 e1 がアニメーションであることを Mermaid に伝えます。
アニメーションタイプを選択
初期バージョンでは、fast と slow の 2 つのアニメーション速度をサポートしています。特定のアニメーションタイプを選択することは、アニメーションを有効にし、一度にアニメーション速度を設定する簡単な方法です。
コピー
埋め込み
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
classDef 文を使用してアニメーション化
接続線にクラスを割り当て、次に classDef 文でアニメーションプロパティを定義することで、接続線にアニメーションを追加することもできます。例：
コピー
埋め込み
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
このコードでは：
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate は animate という名前のクラスを定義し、スタイルとアニメーションプロパティを持ちます。
- class e1 animate は animate クラスを接続線 e1 に適用します。
カンマのエスケープに関する注意：stroke-dasharray プロパティを設定する際は、カンマを , にエスケープすることを忘れないでください。カンマは Mermaid のスタイル定義で区切り文字として使用されるためです。
新しい矢印タイプ
新しい矢印タイプをサポート
- 実心円付きの接続線
- 交差マーク付きの接続線
実心円付きの接続線
コピー
埋め込み
flowchart LR
A --o B
交差マーク付きの接続線
コピー
埋め込み
flowchart LR
A --x B
多方向の矢印
多方向の矢印を使用できます。例：
コピー
埋め込み
flowchart LR
A o--o B
B <--> C
C x--x D
接続線の長さ
フローチャート内の各ノードは、接続されたノードに基づいて、レンダリングされたグラフ内のランク（フローチャートの方向に応じて垂直または水平のレベル）が割り当てられます。デフォルトでは、リンクは任意の数のランクをまたぐことができますが、接続定義に余分なハイフンを追加することで、ある接続を他の接続より長くすることができます。
この例では、ノード B からノード E への接続に 2 つの余分なハイフンが追加され、通常のリンクより 2 つ多くランクをまたぎます:
コピー
埋め込み
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
接続ラベルを接続の中央に記述する場合、接続の右側に余分なハイフンを追加する必要があります。この例は前の例と同等です:
コピー
埋め込み
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
点線または太いリンクの場合、追加する文字は等号または点です。以下の表を参照してください:
| 長さ | 1 | 2 | 3 |
|---|---|---|---|
| 通常の接続 | --- | ---- | ----- |
| 矢印付きの通常の接続 | --> | ---> | ----> |
| 太い接続 | === | ==== | ===== |
| 矢印付きの太い接続 | ==> | ===> | ====> |
| 点線 | -.- | -..- | -...- |
| 矢印付きの点線 | -.- | -..-> | -...-> |
特殊文字
より扱いにくい文字をレンダリングするために、テキストを引用符で囲むことができます。以下の例を参照してください:
コピー
埋め込み
flowchart LR
id1["This is the (text) in the box"]
文字をエスケープするための実体エンコーディング
例の構文を使用して文字をエスケープできます。
コピー
埋め込み
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
示されている数字は 10 進数であるため、# は #35 としてエンコードできます。HTML の文字名も使用できます。
サブグラフ
コピー
埋め込み
subgraph title
graph definition
end
以下は例です:
コピー
埋め込み
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
サブグラフに id を設定することもできます。
コピー
埋め込み
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
フローチャート
フローチャートタイプのグラフを使用すると、以下のフローチャートのようにサブグラフへの、またはサブグラフからの接続線を設定できます。
コピー
埋め込み
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
サブグラフの方向
フローチャートタイプを使用する場合、以下のように方向文を使用してサブグラフのレンダリング方向を設定できます:
コピー
埋め込み
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
制限事項
サブグラフのいずれかのノードが外部に接続されている場合、サブグラフの方向は無視されます。そうでない場合、サブグラフは親グラフの方向を継承します:
コピー
埋め込み
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Markdown 文字列
Markdown 文字列は、より柔軟な文字列タイプを提供することでフローチャートとマインドマップを強化し、太字や斜体などのテキスト書式オプションをサポートし、ラベル内でテキストを自動的に折り返すことができます。
コピー
埋め込み
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- テキストを太字にするには、テキストの前後に 2 つのアスタリスク（**）を使用します。
- 斜体はテキストの前後に単一のアスタリスク（*）を使用します。
- 従来の文字列では、ノード内でテキストを折り返すために <br> タグを追加する必要があります。しかし、Markdown 文字列はテキストが長すぎる場合に自動的に折り返し、<br> タグの代わりに改行文字を使用するだけで新しい行を開始できます。
この機能はノードラベル、接続線ラベル、サブグラフラベルに適用されます
特定の構文を使用して自動折り返しを無効にできます
コピー
埋め込み
---
config:
markdownAutoWrap: false
---
graph LR
コメント
フローチャートにコメントを入力でき、エディタはこれらのコメントを無視します。コメントは単独の行にする必要があり、二重パーセント記号（%%）で始まる必要があります。コメントの開始から次の行までのすべてのテキストは、フロー構文を含めてコメントと見なされます。
コピー
埋め込み
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
スタイルとクラス
リンクスタイル
リンクスタイルを設定できます。例えば、フロー内で後方に移動するリンクをデザインしたい場合、リンクにはノードのような ID がないため、リンクが使用すべきスタイルを他の方法で決定する必要があります。リンクを定義する際の順序番号を使用するか、デフォルト値を使用してすべてのリンクに適用します。
コピー
埋め込み
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
単一の文でリンク番号をカンマで区切ることで、複数のリンクにスタイルを追加することもできます:
コピー
埋め込み
linkStyle 1,2,7 color:blue;
接続線の曲線スタイルを設定
デフォルトの方法でニーズを満たせない場合、項目間の接続線の曲線スタイルを設定できます。使用可能な曲線スタイルには basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、natural、step、stepAfter、stepBefore があります。
以下の例では、左から右へのグラフが stepBefore 曲線スタイルを使用しています。
コピー
埋め込み
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
ノードスタイルを設定
ノードに特定のスタイル（太い枠線や異なる背景色など）を設定できます。
コピー
埋め込み
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
クラス
毎回スタイルを定義するよりも便利なのは、スタイルクラスを定義し、そのクラスを異なる外観が必要なノードに付加することです。
クラスの定義は以下のとおりです:
コピー
埋め込み
classDef className fill:pink,stroke:#333,stroke-width:4px;
さらに、1 つの文で複数のクラスのスタイルを定義することもできます:
コピー
埋め込み
classDef firstClassName,secondClassName font-size:12pt;
クラスをノードに付加する操作は以下のとおりです:
コピー
埋め込み
class nodeId1 className;
1 つの文でクラスをノードのリストに付加することもできます:
コピー
埋め込み
class nodeId1,nodeId2 className;
クラスの追加には ::: 演算子を使用してクラス名をノードに付加できます。以下のとおりです:
コピー
埋め込み
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
ノード間の複数のリンクを宣言する際にこの形式を使用できます:
コピー
埋め込み
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- グラフ宣言では、文をセミコロンで終了しなくてもよくなりました。バージョン 0.2.16 以降、グラフ文をセミコロンで終了することは任意になりました。したがって、以下のグラフ宣言は古いグラフ宣言と同様に有効です。
- 頂点とリンクの間にはスペースを 1 つ入れることができます。ただし、頂点とそのテキスト、およびリンクとそのテキストの間にはスペースを入れるべきではありません。古いグラフ宣言も依然として有効であるため、この新機能は任意であり、可読性を向上させることを目的としています。
以下は接続線の新しい宣言であり、古い接続線宣言と同様に有効です。
コピー
埋め込み
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
