Example of viz.js

Example of viz.js The viz.js project is a port of the Graphviz to Javascript using Emscripten. You can find the project at: https://github.com/mdaines/viz.js

by Loxos

HTML

<script src="https://rawgit.com/mdaines/viz.js/gh-pages/viz.js"></script>
<script type="text/vnd.graphviz" id="crazy">
digraph{
      rankdir=LR;
    subgraph cluster_2{
    style=filled;
    color=gray94;
    
    subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white,shape="rect"];
		interfaceA;
        interfaceC;
    interfaceD;
		label = "System A";
	}
    subgraph cluster_1 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white,shape="rect"];
		interfaceB;
    interfaceB2;
    interfaceB3;
		label = "System B";
	}
    interfaceA -> interfaceB[label="our fantastic Market Data Flow"]
    interfaceA -> interfaceB[label="our fantastic Market Data Flow"]
    interfaceD -> interfaceB[label="our fantastic Market Data Flow"]
    interfaceA -> interfaceB2[label="our fantastic Market Data Flow"]
    interfaceC -> interfaceB2[label="our fantastic Market Data Flow"]
    }}
</script>

CSS

polygon {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

JavaScript

document.body.innerHTML += Viz(document.getElementById('crazy').innerHTML, 'svg');