ブロック図
ブロック図はブロックとコネクタで構成され、複雑なシステム、プロセス、またはアーキテクチャを直感的に表現します。ブロックは基本的なコンポーネントまたは機能を表し、コネクタはこれらのコンポーネント間の関係またはフローを示します。ブロック図は工学、ソフトウェア開発、プロセス管理など、さまざまな分野で極めて重要です。
コピー
埋め込み
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
ブロック図の用途
ブロック図の主な目的はシステムの高レベルビューを提供し、各コンポーネントの複雑な詳細に深く立ち入ることなく、人々が容易に理解および分析できるようにすることです。これにより、ブロック図は複雑なシステムの簡略化、およびシステム内の各コンポーネントの全体的な構造と相互作用の説明に特に役立ちます。
使用シナリオ
ブロック図はさまざまな業界や学問分野で広く応用されており、主に以下を含みます:
- ソフトウェアアーキテクチャ：ソフトウェア開発では、ブロック図を使用してソフトウェアアプリケーションのアーキテクチャを説明できます。これには、各モジュールやサービスがどのように相互作用するか、データフロー、高レベルコンポーネントの相互作用状況を示すことが含まれます。
- ネットワークトポロジ図：ブロック図は IT および電気通信におけるネットワークアーキテクチャを表すのに非常に適しています。さまざまなネットワークデバイスとサービスが相互に接続する方法を示すことができ、ルーティング、スイッチ、ファイアウォール、およびネットワーク内のデータの流れが含まれます。
- 工程フロー図：ビジネスと製造では、ブロック図を使用してフローチャートを作成できます。これらのフローチャートは業務または製造プロセスの各段階を表し、ステップの順序、意思決定ポイント、制御フローの可視化に役立ちます。
- 電気システム：エンジニアはブロック図を使用して電気システムと回路を表現します。電気システムの高レベル構造、異なる電気コンポーネント間の相互作用、および電流の流れを説明できます。
- 教育目的：ブロック図は教育資料でも広く使用され、複雑な概念やシステムを簡略化した方法で説明します。ブロック図は科学理論、工学原理、技術システムの分解と可視化に役立ちます。
次に、Mermaid を使用してブロック図を作成および操作する方法を詳しく掘り下げ、基本的な構文から高度な構成とスタイルまでのすべてを網羅します。
シンプルなブロック図
基本構造
ブロック図は異なる実体またはコンポーネントを表すブロックで構成され、Mermaid ではシンプルなテキストラベルを使用してブロックを簡単に作成できます。ブロック図の最も基本的な形式は、接続線のない一連のブロックです。
シンプルなブロック図の例：a、b、c とラベル付けされた 3 つのブロックを含むシンプルなブロック図を作成するには、構文は以下のとおりです:
コピー
埋め込み
block-beta
a b c
このコードは水平に並んだ 3 つのブロックを生成し、各ブロックは最適な可読性のために自動的に間隔を空けて配置されます。
使用する列数を定義する
複数列図
シンプルなブロック図は線形で単純ですが、より複雑なシステムでは構造化されたレイアウトが必要になる場合があります。Mermaid ではブロックを複数の列に整理でき、より複雑で詳細な図の作成に役立ちます。
複数列図の例：ブロックを複数の列に分散する必要がある場合、列数を指定し、それに応じてブロックを配置できます。以下は、3 列と 4 つのブロックを持つブロック図を作成する方法で、4 番目のブロックは 2 行目に現れます:
コピー
埋め込み
block-beta
columns 3
a b c d
この構文により、Mermaid はブロック a、b、c、d を 3 列に配置し、必要に応じて次の行に折り返します。この機能は、階層的または多層のシステムを表現するのに特に役立ちます。
高度なブロック構成
Mermaid の高度な構文は、図の設計により大きな柔軟性と複雑さをもたらし、より広範なユースケースとシナリオに適応できます。
ブロックの幅を調整する
複数列にまたがる
より複雑な図では、特定のコンポーネントを強調したり、より大きな実体を表したりするために、複数の列にまたがるブロックが必要になる場合があります。Mermaid では、ブロックの幅を調整して複数の列を覆うことができ、図の可読性と構造性を高めます。
例：2 列にまたがるブロックを作成するには、各ブロックに必要な幅を指定できます:
コピー
埋め込み
block-beta
columns 3
a["A label"] b:2 c:2 d
この例では、A label とラベル付けされたブロックが 1 列を占め、ブロック b、c は 2 列にまたがり、d は独自の列に割り当てられます。ブロックサイズのこの柔軟性は、重要性やサイズが異なるコンポーネントを持つシステムを正確に表現するために極めて重要です。
複合ブロックを作成する
ネストブロック
複合ブロックは、1 つのコンポーネントが複数の子コンポーネントを含む、ネストまたは階層的なシステムを表現できます。
例：複合ブロックの作成には、親ブロックを定義し、その中に子ブロックをネストすることが含まれます。以下は、ネストされた要素を持つ複合ブロックを定義する構文です:
コピー
埋め込み
block-beta
block
D
end
A["A: I am a wide one"]
この構文では、D はより大きな親ブロック内にネストされた子ブロックです。この機能は、複数のサービスを持つサーバーや、より大きな組織の枠組み内の 1 つの部門など、複雑な構造を記述するのに特に役立ちます。
自動列幅
幅を調整する
Mermaid では、ブロックの内容に応じて列幅を動的に調整できます。列の幅は列内で最も広いブロックによって決まり、図がバランスと可読性を保つことを保証します。
例：ブロックサイズが異なる図では、Mermaid は各列で最大のブロックに合わせて列幅を自動的に調整します。
コピー
埋め込み
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
ここでは、Mermaid が最も広いブロックに合わせて列の幅を動的に調整する方法を示します。
水平方向のブロックのマージ：ブロックを水平に積み重ねる必要がある場合、列幅を使用してタスクを完了できます。以下は、4 つのブロックを積み重ねたブロック図を作成する構文です:
コピー
埋め込み
block-beta
block
columns 1
a["A label"] b c d
end
この例では、マージされたブロックの幅は最大の子ブロックの幅に自動的に調整されます。
ブロックの種類と図形
Mermaid のブロック図は標準的な長方形の図形に限定されません。Mermaid は多様なブロック図形を提供し、さまざまなタイプの情報や実体をより細かく個性的に表現できます。
標準的なブロック図形
角丸長方形
角丸長方形のブロックを作成します。より柔軟でフレキシブルなコンポーネントを表すのに使用できます:
コピー
埋め込み
block-beta
id1("This is the text in the box")
スタジアム形状
スタジアム形状のブロックは、フロー指向のコンポーネントを表すために使用できます:
コピー
埋め込み
block-beta
id1(["This is the text in the box"])
サブグラフ形状
サブグラフまたは含まれるプロセスを表すために使用され、二重の垂直線を持つ長方形のブロックで表現します:
コピー
埋め込み
block-beta
id1[["This is the text in the box"]]
円柱形
円柱形は、データベースまたはストレージコンポーネントを表すのに非常に適しています:
コピー
埋め込み
block-beta
id1[("Database")]
円形
円形は、集中的または重要なコンポーネントを表すために使用できます:
コピー
埋め込み
block-beta
id1(("This is the text in the circle"))
非対称図形、ひし形、六角形
意思決定にはひし形を使用し、独特または専門的なプロセスには、非対称や六角形を使用できます:
非対称図形
コピー
埋め込み
block-beta
id1>"This is the text in the box"]
コピー
埋め込み
block-beta
id1{"This is the text in the box"}
コピー
埋め込み
block-beta
id1{{"This is the text in the box"}}
平行四辺形と台形
平行四辺形と台形は、入力 / 出力と移行プロセスに非常に適しています
コピー
埋め込み
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
二重円
重要または高優先度のコンポーネントをハイライトするには、二重円を使用すると効果的です:
コピー
埋め込み
block-beta
id1((("This is the text in the circle")))
矢印ブロックと空のブロック
矢印ブロック
ブロックの矢印はフロー内の方向または流れを直感的に表示できます:
コピー
埋め込み
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
空のブロック
空のブロックは空白を作成するために使用でき、レイアウトと可読性に役立ちます:
コピー
埋め込み
block-beta
columns 3
a space b
c d e
コピー
埋め込み
block-beta
ida space:3 idb idc
注意、数値記号 space:num を使用して空のブロックが占める列数を設定できます。num は列幅の数値を表します。space を使用することもでき、デフォルトは 1 列です。
Mermaid の標準図形と特殊図形はブロック図の表現力を高め、より正確で状況に即した表現を可能にします。
線でブロックを接続する
Mermaid ブロック図の重要な特性の 1 つは、さまざまなタイプの線やリンクを使用して各ブロックを接続できることです。
基本的な接続と矢印タイプ
ブロックの接続には矢印または線を使用する必要があります。これらのコネクタはブロック間の関係または情報の流れを記述します。Mermaid はさまざまな図のニーズを満たすために一連の矢印タイプを提供します。
基本的なリンク
ブロックから別のブロックへの方向または流れを示す、矢印付きのシンプルなリンクを作成します:
コピー
埋め込み
block-beta
A space B
A-->B
この例は、ブロック A からブロック B への直接接続を示しています。
リンク上のテキスト
ブロックを接続するだけでなく、通常は関係を記述またはマークする必要があります。Mermaid ではリンクにテキストを追加でき、リンクにコンテキストを提供します。
リンクにテキストを追加するには、リンク定義にそのテキストを含める構文を使用します:
コピー
埋め込み
block-beta
A space:2 B
A-- "X" -->B
コピー
埋め込み
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
スタイルとカスタマイズ
ブロック図の構造とレイアウトに加えて、Mermaid は多数のスタイルオプションを提供し、これらのカスタマイズ機能により、より視覚的な特徴と情報量を持つ図を作成できます。
個別のブロックのスタイル
Mermaid は個々のブロックに対して詳細なスタイル設定ができ、色、ストローク、枠線の太さなど、さまざまな CSS プロパティを適用できます。
個々のブロックのスタイルをカスタマイズ
あるブロックにカスタムスタイルを適用するには、style 構文を使用し、その後にブロック識別子と必要な CSS プロパティを続けます:
コピー
埋め込み
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
クラススタイル
Mermaid はスタイルをクラスに適用することをサポートします。特定のスタイルセットを複数の要素に適用したい場合、スタイル設定を使用する方が簡単です。これらの要素を 1 つのクラスにリンクするだけでよいためです。
個々のクラスのスタイルを設定する
コピー
埋め込み
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
ここでは、blue という名前のクラスを定義してブロック A に適用し、ブロック B は個別のスタイルを受け取ります。
使用事例
Mermaid ブロック図のモジュール化された図を実際のシナリオに適用すると、その多機能性が存分に発揮されます。
各種機能の詳細な例
構造、リンク、スタイル要素を通じて、さまざまな状況で特定の役割を果たす Mermaid ブロック図を作成できます。
システムアーキテクチャ
以下は、相互接続されたコンポーネントを持つシンプルなソフトウェアシステムアーキテクチャです:
コピー
埋め込み
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
この例は、フロントエンド、バックエンド、データベースを含む基本アーキテクチャを示し、異なるコンポーネントタイプを区別するために各ブロックの表現形式が異なります。
業務プロセス
以下は、意思決定ポイントと複数の段階を持つ業務プロセスです:
コピー
埋め込み
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
これらの実際の事例は、複雑な情報を簡略化し、分野を超えた効果的なコミュニケーションを実現する上での Mermaid ブロック図の実用的価値を際立たせています。
トラブルシューティング
Mermaid 構文を使用して複雑なブロック図を作成すると、時として課題に直面します。ここではよくある構文エラーを列挙し、より複雑な図の構造を管理するためのヒントを提供します。
よくある構文エラー
よくある構文エラーを避けることは、Mermaid ブロック図をスムーズに使用するための鍵です。
リンクエラー
不正確なリンク構文を使用すると、予期しない結果や壊れた図になる可能性があります:
コピー
埋め込み
block-beta
A - B
修正：接続の方向とタイプを定義するために、矢印（--> または ---）を使用して各ブロックを正しく接続してください。また、ブロック図の基本原則の 1 つは、作者がブロックの位置を完全に制御することであるため、上記のケースでは、ブロック間にスペースを追加する必要があります:
コピー
埋め込み
block-beta
A space B
A --> B
スタイルのずれ
誤ったコンテキストで、または不正確な構文を使用してスタイルを適用すると、期待どおりにスタイルを設定できない可能性があります:
コピー
埋め込み
block-beta
A
style A fillpink;
修正：スタイルプロパティをコンマで正しく区切り、正しい CSS プロパティ形式を使用して構文を修正してください:
コピー
埋め込み
block-beta
A
style A fill:pink,stroke:#333;
