examples/example.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Network diagram as code</title>
<script src="https://unpkg.com/@antirek/network-diagram@0.1.1/dist/code-full.min.js"></script>
</head>
<body style="font:14px helvetica neue, helvetica, arial, sans-serif;">

<h3>Example</h3>
<div id="scheme" style="height:300px;width:800px;"></div>
<script>
  const elements = {    
    nodes: [
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', group: 'db cluster', label: 'DB 1'},
      { id: 'db2', type: 'database', group: 'db cluster', label: 'DB 2'},
    ],
    edges: [
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme', elements);
</script>

</body>
</html>