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

code:d3.js

const digraph = ` digraph G {

label="ネットワーク図を作ってみよう";

ノードA -> ノードB label = エッジ1;

ノードB -> ノードC label = エッジ2;

ノードB -> ノードD label = エッジ3;

}

code:d3.js

d3.select("#graph").graphviz()

.fade(false)

.renderDot(digraph);

rund3 で実行

code:js

const digraph =

というのがJavaScriptの構文で、

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

code:vizScript.js

const 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);

});

viz-script-button.icon （実行ボタン）

code:dot01.pu

@startdot

digraph G {

label="ネットワーク図を作ってみよう";

ノードA -> ノードB label = エッジ1;

ノードB -> ノードC label = エッジ2;

ノードB -> ノードD label = エッジ3;

}

@enddot

https://plantuml-proxy.vercel.app/svg/https://scrapbox.io/api/code/suto3/Graphviz:ネットワーク図を作ってみよう/dot01.pu#.svg