Макет Cytoscape.js, который позволяет позиционировать дочерние элементы внутри соединения (например, как ранг точки)

Я пытаюсь использовать цитоскейп, чтобы заменить мой вывод dot и сделать его интерактивным (переместить узлы и соединения, развернуть/свернуть соединения и т. д.). Однако при первой загрузке графика пользователю должен быть представлен макет по умолчанию. Однако я изо всех сил пытаюсь найти макет/конфигурацию, которая поддерживает то, что dot вызывает rank.

На моем графике есть составные узлы, которые представляют компоненты. Компоненты содержат другие компоненты и/или состояния, переходы, переменные. Каждый компонент может указывать inputs и outputs. В этой точке я попытался добавить некоторую форму потока внутри системы (rankdir=LR;), расположив inputs слева (rank=source;) и outputs справа (rank=sink;). Другие элементы не имеют rank и, следовательно, располагаются свободно. Затем я указал cluster подграфов, содержащих все рекурсивные компоненты.

Теперь, вот что у меня есть в точке. Я надеюсь, что это объясняет, что я хотел бы закончить с.

Во-первых, я уже видел этот вопрос, но как насколько я понял это для ручного позиционирования, а не макетов.

Я не нашел макета, полностью поддерживающего позиционирование узлов внутри соединения. Я рассмотрел использование макетаcytoscape.js-cola со следующими параметрами:

  layout: {
    name: 'cola',
    flow: { axis: 'y', minSeparation: 40 },
    avoidOverlap: true
  }

Я закончил с этим Как видите, поток есть, но не такой приятный, как в dot.

Я пытался добавить какую-то функцию для параметра alignment, но, насколько я понял, я могу указать только абсолютные координаты (например, return {'x': 0};). Это в основном позволяет мне выровнять ВСЕ входы, а не все входы соединения.

Вот CodePen моего примера, с которым можно поиграться: https://codepen.io/anon/pen/GEaOQQ В Javascript вы можете увидеть комментарии