JSFiddle - React, Tailwind, and code Playground

by scottymo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.21/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<div id="cy"></div>

CSS

body {
  font-family: helvetica;
  font-size: 14px;
}

#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
}

JavaScript

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  layout: {
    name: 'dagre'
  },

  style: [
    {
      selector: 'node',
      style: {
        'content': 'data(id)',
        'text-opacity': 0.5,
        'text-valign': 'center',
        'text-halign': 'right',
        'background-color': '#11479e'
      }
    },

    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'width': 4,
        'target-arrow-shape': 'triangle',
        'line-color': '#9dbaea',
        'target-arrow-color': '#9dbaea'
      }
    }
  ],

    elements: {
    nodes: [
      { data: { id: 'Support-Wargames' } },
      { data: { id: 'Support-FATE' } },
      { data: { id: 'Support-FEWD' } },
      { data: { id: 'FEWD-FATE-Repo' } },
      { data: { id: 'Release-Branch' } },
      { data: { id: 'New-Deploy-Pattern' } },
      { data: { id: 'CI-Pipeline' } },
      { data: { id: 'Support-Bamboo' } },
      { data: { id: 'Bamboo-Scalability' } },
      { data: { id: 'Core-Brand-Integration' } },
      { data: { id: 'Support-Brand' } },
      { data: { id: 'Roles-Responsibilities' } }
    ],
    edges: [
      { data: { source: 'Support-FATE', target: 'Support-Wargames' } },
      { data: { source: 'Support-FATE', target: 'CI-Pipeline' } },
      { data: { source: 'Support-FATE', target: 'Support-Bamboo' } },
      { data: { source: 'Support-FATE', target: 'FEWD-FATE-Repo' } },
      { data: { source: 'Support-FEWD', target: 'Support-Wargames' } },
      { data: { source: 'Support-FEWD', target: 'Support-Bamboo' } },
      { data: { source: 'FEWD-FATE-Repo', target: 'Release-Branch' } },
      { data: { source: 'CI-Pipeline', target: 'Support-Wargames' } },
      { data: { source: 'Support-Bamboo', target: 'Bamboo-Scalability' } },
      { data: { source: 'Bamboo-Scalability', target: 'CI-Pipeline' } },
      { data: { source: 'Core-Brand-Integration', target: 'Support-Bamboo' }...