/suto3/Graphviz:ネットワーク図を作ってみよう

generated at 2/14/2025, 12:44:23 PM
Graphviz:ネットワーク図を作ってみよう
ネットワーク図（network diagram）とは複数の要素とそれらの繋がりの様子（ネットワーク）を表現した図である。

Graphviz:グラフ - Graphviz:graph
Graphviz:ノード - Graphviz:node
Graphviz:エッジ - Graphviz:edge

#Graphviz

d3.jsconst digraph = ` digraph G {
  label="ネットワーク図を作ってみよう";
  ノードA -> ノードB [label = エッジ1];
  ノードB -> ノードC [label = エッジ2];
  ノードB -> ノードD [label = エッジ3];
}
`

d3.jsd3.select("#graph").graphviz()
    .fade(false)
    .renderDot(digraph);

実行 https://suto3.github.io/rund3?code=https://scrapbox.io/api/code/suto3/Graphviz:ネットワーク図を作ってみよう/d3.js
rund3 で実行
jsconst digraph = ``
というのがJavaScriptの構文で、

 digraph G {}  はGraphviz（dot言語）の構文である。

Javascript:テンプレートリテラル

viz-script-buttonで実行
vizScript.jsconst graph = `
  digraph G {
    label="ネットワーク図を作ってみよう";
    ノードA -> ノードB [label = エッジ1];
    ノードB -> ノードC [label = エッジ2];
    ノードB -> ノードD [label = エッジ3];
  }
`; 
const viz = new Viz();
viz.renderSVGElement(graph)
.then(function(element) {
  const editor = document.getElementById('editor');
  editor.appendChild(element);
});

 （実行ボタン）

plantuml-proxyで実行
PlantUML:DOT言語
dot01.pu@startdot
digraph G {
  label="ネットワーク図を作ってみよう";
  ノードA -> ノードB [label = エッジ1];
  ノードB -> ノードC [label = エッジ2];
  ノードB -> ノードD [label = エッジ3];
}
@enddot