Отрисовка сетевых топологий

Ручная 

  • draw.io поддерживает импорт из visio (.vdx). Dia поддерживает экспорт в .vdx. Поэтому все утилиты ниже могут работать со всеми через .vdx. Правда само конвертирование в .vdx может не очень корректно отрабатывать из dia – например, в контексте масштабирования.
  • https://www.draw.io – супер крутая WEB (на JavaScript) альтернативая visio/dia. Иконки cisco встроены, все крайне удобно, экспорт в dropbox/google drive.
  • DIA – бесплатная альтернатива Visio (только хуже). Файл обычно сохраняем в формате .dia (для возможности последующей правки) и экспортируем в нужную картинку .png/.jpeg/etc. Можно делать слои. Можно включать сетевые иконки.

  • VISIO – продукт Microsoft. Многие компании используют его по полной:
    • схемы включения объектов (в 1C или других проектных системах) рисуются в visio
    • в visio рисуются разные новые процедуры/roadmap (реализация проектов)
    • алгоритмы

    Редактор платный и стоит $, viewer (vsd, vsdx) бесплатный и является модулем к Internet Explorer – можно скачать с сайта Microsoft (Средство просмотра Microsoft Visio 2013 позволяет всем пользователям просматривать документы Visio в браузере Microsoft Internet Explorer).

 

Автоматизированная

graphviz

http://dreampuf.github.io/GraphvizOnline/ - хороший Online Graphviz 

Для отображения топологий из текстового вида в графический можно использовать утилиту graphviz. Ей просто отдаешь последовательность связок и она отрисовывает топологию. Разовые задачи делал на базе bash, автоматизацию на базе вызова утилиты graphviz через php и вызова получившейся картинки из html.

Пример генерации строк конфига на базе bash:

$ paste sw1 sw2 | awk '{print $3,$4,$5,$6 " -> " $1}'  | sed 's/^/     /' | grep "10.2.0.84"
    "CISCO ME340x 10.2.0.84 " -> "10.13.208.30"
    "CISCO ME340x 10.2.0.84 " -> "10.13.208.31"
    "CISCO ME340x 10.2.0.84 " -> "10.13.208.96"
    "CISCO ME340x 10.2.0.84 " -> "10.13.208.97"

Пример из php:

`echo "digraph G {">pic/graph_$rand`;
`echo "\"$info2\\n$splitted_array[1]\" -> \"$info1\\n$splitted_array[0]\" [color=$color dir=back];" | iconv -f cp1251 -t utf-8>>pic/graph_$rand`;
`echo "}">>pic/graph_$rand`;
`dot -Tpng pic/graph_$rand -o pic/result_$rand.png`;
echo "<img src=\"pic/result_$rand.png\" alt=\"graph\">";

По умолчанию используется одинаковое расстояние между узлами вверх и вниз. При большом количестве узлов это приводит к тому, что картинки расплюстнуты, а линии сливаются. Чтобы поправить можно для графика задать параметры по расстоянию между узлами.

И вместо вот такой картинки по умолчанию:

При настройке graph [pad=”0.5″, nodesep=”0.2″, ranksep=”3″]; получаем более симпотичную (можно поэкспериментировать по примерам ниже):

graph [pad=".75", ranksep="0.25", nodesep="0.25"];
graph [pad="0.5", nodesep="1", ranksep="2"];

 

Leave a Reply