Network diagram as code / Схема сети как код

Этот скрипт позволяет нарисовать схему сети, описав ее в виде кода. Нарисовать новую или исправить старую схему - легко - поправить пару строк кода. Смотрите сами ;)

Пример

Вот код, который описывает эту схему

  const elements = {
    nodes: [                                                    // описываем узлы
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [                                                    // указываем связи
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme1', elements);

Как начать использовать?

Добавьте в ваш html загрузку скрипта

<script src="https://unpkg.com/@antirek/network-diagram@0.1.5/dist/code-full.min.js"></script>

Добавьте div для схемы, задав ширину и высоту

  <div id="scheme1" style="height:300px;width:800px;"></div>

Опишите вашу схему сети

опишите узлы: id, type, label
укажите связи: source - id узла, target - id узла

<script>      
  const elements = {    
    nodes: [                                                    // описываем узлы
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [                                                    // указываем связи
      { source: 'client', target: 'server', label: 'request', color: 'red', },
      { source: 'server', target: 'db1', label: 'request', color: 'red', },
      { source: 'server', target: 'db2', label: 'request', },
    ],
  };
  Diagram('scheme1', elements);
</script>

Весь этот код в одном файле example.html

Позиционирование nodes

Для отрисовки схемы используется cytoscape.js. Схема отрисовывается в двух режимах: auto и grid. Для grid режима необходимо указать positions. Positions - это список элементов с указанием строки и колонки их расположения. Явное указание positions позволяет точно зафиксировать вид схемы.

укажите id узла и позицию: row - номер строки, col - номер колонки

  positions: [
    { id: 'client', row: 1, col: 2, },
    { id: 'server', row: 2, col: 4, },
    { id: 'db1', row: 1, col: 5, },
    { id: 'db2', row: 3, col: 5, },
    { id: 'db2', p: 'b7', },           // указываем позицию а-ля Морской бой
  ]

Пример кода layout = grid

  const elements = {    
    nodes: [
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
    positions: [
      { id: 'client', row: 1, col: 2, },
      { id: 'server', row: 2, col: 4, },
      { id: 'db1', row: 1, col: 5, },
      { id: 'db2', row: 3, col: 5, },
    ],
  };
  Diagram('scheme', elements, {layout:'grid'});

Типы elements

nodes - узлы
edges - связи
groups - группы
positions - расположение (для layout = grid)

Типы nodes

Для nodes можно указать type, который меняет отображаемую иконку объекта.

Доступные type

smartphone
desktop
notebook
server
pod
database
cloud
person
webpage
document
worker

Группы

Для nodes можно указать group. Список group необходимо указать в elements.

  const elements = {
    nodes: [
      { id: 'client', type: 'smartphone', label: 'Smartphone'},
      { 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: 'server', target: 'db cluster', label: 'grpc' },
      { source: 'client', target: 'server', label: 'request' },
    ],
    groups: [
      { id: 'db cluster', label: 'Main Database cluster'},
    ],
  };
  Diagram('scheme', elements);

Примеры

Еще примеры схем: группы, цветные связи, позиции а-ля "Морской бой" https://antirek.github.io/network-diagram/

Онлайн редактор

https://antirek.github.io/network-diagram-editor/

Обзорная статья на Хабре

https://habr.com/ru/post/491814/