// 그래프 요소를 담을 컨테이너 생성
var container = document.getElementById('cy');

// 그래프 인스턴스 생성
var cy = cytoscape({
  container: container,
  elements: [
    // 초기 그래프 요소 설정
    { data: { id: 'node1' } },
    { data: { id: 'node2' } },
    { data: { id: 'edge1', source: 'node1', target: 'node2' } }
  ],
  style: [
    // 그래프 요소의 스타일 설정
    {
      selector: 'node',
      style: {
        'background-color': 'red',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'line-color': 'blue',
        'target-arrow-color': 'blue',
        'target-arrow-shape': 'triangle'
      }
    }
  ]
});

// 새로운 노드 추가
cy.add({ data: { id: 'node3' } });

// 새로운 엣지 추가
cy.add({ data: { id: 'edge2', source: 'node2', target: 'node3' } });

// 노드와 엣지 제거
cy.remove('node1');
cy.remove('edge1');