✏️dot形式って包含関係は示せないですよね？

 実は、DOT形式では包含関係も示すことができます。GraphvizのDOT言語は、サブグラフやクラスタを定義する機能を持っており、これによってノードのグループを明確に区切り、それぞれのグループ間やグループ内の関係を視覚的に表現することが可能です。

サブグラフとクラスタ:

• サブグラフ: DOT形式ではsubgraphキーワードを使用してサブグラフを定義できます。これにより、特定のノード群を論理的にまとめ、その内部で独自のグラフ構造を作成することができます。

• クラスタ: サブグラフを用いて、ノードの集合を視覚的に囲むことができるクラスタも作成可能です。クラスタはsubgraphで始まり、名前がclusterというキーワードで始まることが一般的です（例：subgraph cluster_0 {...}）。クラスタ内のノードは枠で囲まれ、クラスタ外のノードや他のクラスタと関係を持つことができます。

これにより、DOT形式を使用して、たとえば組織の階層やモジュール間の包含関係など、複雑なネットワーク内の階層的な構造を表現することが可能です。この機能は、システムのアーキテクチャを示したり、複雑なソフトウェアのコンポーネント関係を図示するのに特に有用です。

// Sample DOT file
digraph G {
    // Global attributes
    node [shape=rectangle, style=filled, color=lightblue];
    edge [color=blue];

    // Define clusters
    subgraph cluster_0 {
        label = "Cluster A";
        // Nodes within the cluster
        A;
        B;
    }

    subgraph cluster_1 {
        label = "Cluster B";
        // Nodes within the cluster
        C;
        D;
    }

    // Edges between clusters
    A -> C;
    B -> D;
    B -> C;

    // Node outside the clusters with edges
    E -> A;
    E [shape=ellipse, color=red];
}

Canviz - DOTファイルをレンダリングするためのJavaScriptライブラリ[5]。
d3-graphviz - Viz.jsとD3.jsをベースにしたJavaScriptライブラリ。DOTグラフをレンダリングし、グラフ間のアニメーション遷移とインタラクティブなグラフ操作をサポートする[6]。
Vis.js - ネットワークグラフの入力としてDOTを受け付けるJavaScriptライブラリ[7]。
Viz.js - GraphvizのJavaScript移植版で、ブラウザで使うためのシンプルなラッパーを提供する。
hpcc-js/wasm Graphviz - Viz.js[8] に似た Graphviz 用の高速な WASM ライブラリ。