graph.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rasa Core Visualisation</title>
    <script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
    <script src="https://dagrejs.github.io/project/dagre/latest/dagre.min.js"></script>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://dagrejs.github.io/project/graphlib-dot/v0.6.3/graphlib-dot.js"></script>
</head>
<body>
<div id="errormsg" style="color: #b00"></div>
<svg>
    <style id="graph-style">
        .node.invisible > rect {
            display: none;
        }

        .node.start > rect {
            fill: #7f7;
            rx: 30;
            ry: 18;
        }

        .node.end > rect {
            fill: #f77;
            rx: 30;
            ry: 18;
        }

        .node:not(.active) > rect, .node:not(.active) > .label {
            opacity: 0.4;
        }

        .edgePath:not(.active) path {
            opacity: 0.4;
        }

        .node.ellipsis > rect {
            fill: #CCC;
        }

        .node.intent > rect {
            fill: #7ff;
        }

        .node.dashed > rect {
            stroke-dasharray: 5;
        }

        text {
            font-weight: 300;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf, serif;
            font-size: 14px;
            color: #1f1d1d;
        }

        .node rect {
            stroke: #444;
            fill: #fff;
            stroke-width: 1.5px;
        }

        .edgePath path {
            stroke: #333;
            stroke-width: 1.5px;
        }

        svg {
            position: fixed;
            top: 10px;
            left: 0;
            height: 100%;
            width: 100%
        }
    </style>
    <g></g>
</svg>
<script>

  function serveGraph() {
    let oldInputGraphValue;

    const url = 'visualization.dot';
    const refreshInterval = 500;

    // trigger a refresh by fetching an updated graph
    setInterval(function () {
      fetch(url).then(r => r.text()).then(dot => {
        document.getElementById('errormsg').innerHTML = '';
        if (oldInputGraphValue === dot) return;

        oldInputGraphValue = dot;
        drawGraph(dot);
      }).catch(err => {
        document.getElementById('errormsg').innerHTML =
          'Failed to update plot. (' + err.message + ')';
      });
    }, refreshInterval);
  }

  function drawGraph(graph) {
    let g = graphlibDot.read(graph);
    // Set margins, if not present
    if (!g.graph().hasOwnProperty("marginx") &&
      !g.graph().hasOwnProperty("marginy")) {
      g.graph().marginx = 20;
      g.graph().marginy = 20;
    }
    g.graph().transition = function (selection) {
      return selection.transition().duration(300);
    };
    // Render the graph into svg g
    d3.select("svg g").call(render, g);
  }
  // Set up zoom support
  const svg = d3.select("svg"),
    inner = d3.select("svg g"),
    zoom = d3.zoom().on("zoom", function () {
      inner.attr("transform", d3.event.transform);
    });
  svg.call(zoom);

  // Create and configure the renderer
  const render = dagreD3.render();

  let isClient = false;
  isClient = true;

  if (isClient) {
    // Mark all nodes and their edges as active
    cssRules = document.getElementById('graph-style').sheet.cssRules;
    cssRules[3].style.opacity = 1;
    cssRules[4].style.opacity = 1;

    let graph;
    graph = `digraph  {
0 [class="start active", fillcolor=green, fontsize=12, label=START, style=filled];
"-1" [class=end, fillcolor=red, fontsize=12, label=END, style=filled];
1 [class="", fontsize=12, label=utter_ask_nickname];
2 [class="", fontsize=12, label=ask_nickname_form];
3 [class="", fontsize=12, label=utter_check_nickname];
4 [class="", fontsize=12, label=utter_askhobby];
5 [class="", fontsize=12, label=ask_hobby_form];
6 [class="", fontsize=12, label=utter_askwhy];
7 [class="", fontsize=12, label=utter_askwhen];
8 [class="", fontsize=12, label=utter_tanks_for_answer];
12 [class="", fontsize=12, label=utter_rename];
21 [class="", fontsize=12, label="..."];
22 [class="", fontsize=12, label=utter_goodbye];
24 [class="", fontsize=12, label=utter_iamabot];
25 [class=intent, fillcolor=lightblue, label="시이작", shape=rect, style=filled];
26 [class=intent, fillcolor=lightblue, label="정헌영", shape=rect, style=filled];
27 [class=intent, fillcolor=lightblue, label="네 맞아요", shape=rect, style=filled];
28 [class=intent, fillcolor=lightblue, label="전혀", shape=rect, style=filled];
29 [class=intent, fillcolor=lightblue, label="나는 노래듣기가 좋아", shape=rect, style=filled];
30 [class=intent, fillcolor=lightblue, label="네트에 골을 넣으면 좋아서", shape=rect, style=filled];
31 [class=intent, fillcolor=lightblue, label="매주 수요일에 해요", shape=rect, style=filled];
32 [class=intent, fillcolor=lightblue, label="종료", shape=rect, style=filled];
33 [class=intent, fillcolor=lightblue, label="나는 사람과 대화하고 있어?", shape=rect, style=filled];
0 -> 21  [class="", key=NONE, label=""];
0 -> 25  [class="", key=0];
1 -> 26  [class="", key=0];
2 -> 3  [class="", key=NONE, label=""];
3 -> 27  [class="", key=0];
3 -> 28  [class="", key=0];
4 -> 29  [class="", key=0];
5 -> 6  [class="", key=NONE, label=""];
6 -> 30  [class="", key=0];
7 -> 31  [class="", key=0];
8 -> "-1"  [class="", key=NONE, label=""];
12 -> "-1"  [class="", key=NONE, label=""];
21 -> 32  [class="", key=0];
21 -> 33  [class="", key=0];
22 -> "-1"  [class="", key=NONE, label=""];
24 -> "-1"  [class="", key=NONE, label=""];
25 -> 1  [class="", key=0];
26 -> 2  [class="", key=0];
27 -> 4  [class="", key=0];
28 -> 12  [class="", key=0];
29 -> 5  [class="", key=0];
30 -> 7  [class="", key=0];
31 -> 8  [class="", key=0];
32 -> 22  [class="", key=0];
33 -> 24  [class="", key=0];
}
`;
    drawGraph(graph);
  } else {
    serveGraph();
  }


</script>
</body>
</html>