Graphviz как пользоваться windows

Graphviz

Graphviz — это разработанный специалистами лаборатории AT&T пакет утилит по автоматической визуализации графов, заданных в виде текстового описания. Пакет распространяется с открытыми исходными файлами и работает на всех операционных системах, включая Windows, Linux/Unix, Mac OS. Самой интересной программой пакета является «dot», автоматический визуализатор направленных графов, который принимает на вход текстовый файл со структурой графа, а на выходе формирует граф в виде графического, векторного или текстового файла.

1 Быстрый старт
2 Внешний вид графа
3 Уровни в графах
4 Многосекционный узлы
5 Гиперссылки на графах

6 Кластеры в графах

6.1 Цвета

6.1.1 Цвета и черно-белая печать

9.1 Graph
9.2 Neato
9.3 FDP
9.4 Twopi
9.5 CIRCO

Быстрый старт

Входной файл для программы «DOT» является обычным текстовым файлом на специальном языке разметки графа. Структура файла очень простая, например,

 digraph G< Рождение->Юность->Зрелость->Старость->Смерть; Юность->Смерть; Зрелость->Смерть; >

на выходе будет

Программа «Dot» сама распознает все связи графа и упорядочит его таким образом, чтобы было наименьшее количество пересечений.

Чтобы использовать «dot»-графы в Wiki4Intranet, используйте следующий синтаксис:

 digraph G< Рождение->Юность->Зрелость->Старость->Смерть; Юность->Смерть; Зрелость->Смерть; >

Если у вас узлы поименованы словосочетаниями, заключите их в кавычки, т. е.

 digraph G< "Полет фантазии"->"Расход горючего"; >

Поздравляем! Теперь вы способны рисовать графы в Wiki4Intranet. Остальной текст будет посвящен некоторым тонкостям использования Graphviz.

Внешний вид графа

«Dot» позволяет изменять внешний вид графа. Например, можно изменять форму фигур (прямоугольники, овалы, круги, параллелограммы, многоугольники), цвет и шрифт текста, цвет фона фигур, стиль стрелок и рамок фигур, подписи стрелок и т. д. Итак, основные объектами являются узлы («node») и ребра («edge»). Для того, чтобы настроить свойства всех узлов или ребер нужно вначале использовать команды

node[свойство1="значение1",свойство2="значение2". ] edge[свойство1="значение1",свойство2="значение2". ]

Также (в квадратных скобках после описания объекта) можно изменять настройки конкретного узла или ребра. Параметры графа, просто задаются в виде параметр=значение. Полезно запомнить параметр «rankdir», он может быть «TB» (top->bottom, параметр по умолчанию), или «LR» (left->right), и определяет, сверху-вниз, или справа-налево, нужно располагать узлы графа. Вот пестрый пример:

digraph G< rankdir=LR; node[color="red",fontsize=14]; edge[color="darkgreen",fontcolor="blue",fontsize=12]; OPEN[shape="rectangle",style="filled",fillcolor="lightgrey"]; CLOSED[shape="octagon",label="Финиш"]; VERIFIED[shape="rectangle",style="rounded"]; OPEN->RESOLVED->VERIFIED->CLOSED; OPEN->CLOSED[style="bold"]; VERIFIED->OPEN[label="обнаружены ошибки",style="dashed",arrowhead="dot"]; >

на выходе будет

Если предполагается, что граф будут не только просматривать через IE, но и печатать, то необходимо установить ширину картинки, иначе при печати картинка будет обрезана. Для этого следует задать внутри описания

size="6.7,15";

Существенна только первая цифра. Число 6.7 подобрано эмпирически, оно обеспечивает печать полной картинки при настройках IE по умолчанию.

Уровни в графах

В «Dot» присутствует возможность связать узлы графа не только стрелками, но и уровнями отображения, что позволяет создавать шкалу и располагать узлы графа соответственно данной шкале. Для связывания используется следующая конструкция:

Например, при использовании следующей конструкции:

 digraph G < node[fontsize=9]; < /* шкала месяцев*/ node[shape=plaintext]; /* что бы не было видно рамок */ edge[color=white] /* что бы не было видно стрелок */ "март" ->"июнь" -> "сентябрь" -> "декабрь"; > < rank = same; "март"; "весна"; "a"; > < rank = same; "июнь"; "лето";> < rank = same; "сентябрь"; "осень"; "d"; > < rank = same; "декабрь"; "зима"; "e">"весна" -> "лето" -> "осень" -> "зима" -> "весна" "a" -> "b" -> "c" -> "d" -> "e" ; >

на выходе получается:

Многосекционный узлы

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

Для включения режима многосекционности устанавливается атрибут узла shape.

shape=record;

Секции описываются в атрибуте label узла, с помощью разделителя «|». Для именования секции ее имя указывается в <>. При описание ребра, исходящего или входящего в секцию, секция именуется следующим образом:

элемент:

Например, из такого описания:

digraph structs < rankdir=HR; first [shape=record,label=" x1\n all | < x21 | x22| x23> | x3" ]; second [shape=record,label=" x22_1 | x22_2 | x22_3"]; first: -> second; >

Гиперссылки на графах

Можно использовать атрибут «URL», задавая относительные или абсолютные гиперссылки для узлов и ребер. Например

 digraph G < rankdir=LR; SGML [URL="SGML"]; HTML [URL="HTML"]; XML [URL="XML"]; XHTML [URL="http://www.w3schools.com/xhtml/"]; SGML->HTML; SGML->XML; HTML->XHTML; XML->XHTML; SGML->XHTML[color="red",fontcolor="blue",label="ссылка на Google",URL="http://www.google.com"]; >

Кластеры в графах

Программа «Dot» позволяет объединять узлы графов в кластеры для подчеркивания общности.

Кластер описывается следующим синтаксисом:

subgraph имя

При этом имя подграфа должно начинаться с префикса cluster, иначе подграф не позволяет себя отобразить на экран(раскраска, контур, подпись, .. ).

digraph G < rankdir=LR; subgraph cluster0 < node [style=filled,color=white]; style=filled; color=lightgrey; a0; a1 label = "process #1"; >subgraph cluster1 < node [style=filled]; b0; label = "process #2"; color=blue >start -> a0; start -> b0; a0 -> a1 -> end; b0 -> end; >

Цвета

Graphviz позволяет использовать широкую цветовую палитру, задавая цвета или по именам, в одной из известных палитр:

Палитра X11
SVG

Набор палитр Brewer-а, что удобно при автоматической генерации схем — задаваемые числовым индексом цвета в более-менее вменяемой палитре.

Кроме именованных цветов, можно использовать обычное трехбайтное шестнадцатиричное кодирование

color="#FF0EDD"

и выбирать цвета из палитры, например, на http://www.colorpicker.com/

Цвета и черно-белая печать

Graphviz позволяет использовать широкую цветовую палитру, однако, стоит не забывать, что контрастно выглядящие на цветном мониторе цвета, могут быть совершенно неразличимы после черно-белой печати. После проделанных экспериментов (Bug:11015), можно рекомендовать следующие палитры цветов (иллюстрированы на цвете ребер графа):

Формы вершин

Перечислим палитру возможных форм вершин (узлов).

Окончания ребер

Можно задавать стиль офомления начала («arrowtail») и конца («arrowhead») дуг (ребер):

Чтобы работал arrowtail, для ребра нужно указать свойство dir=both или dir=back.

Неориентированные графы

Наряду с рисованием ориентированных графов, есть несколько методов для автоматического рисования неориентированных графов (будем рассматривать их на примере несложной ER-диаграммы).

В отличие от автоматического рисования направленных («directed») графов, основанных на ранговой модели, есть несколько подходов к раскладке ненаправленных графов.

Graph

Ненаправленный граф можно нарисовать с помощью рангового подхода (несмотря на ненаправленность ребер) — будет использоваться программа «dot». Как это будет выглядеть для простой ER-диаграммы, можно увидеть ниже.

Очевидна неоптимальность такого подхода для неориентированных графов.

Neato

Метод «neato» использует «энергетическую» (spring) модель, по сути, близкую к методу искуственного отжига — начиная с некоторого состояния вершины перемещаются, чтобы минимизировать некую потенциальную энергию. Рекомендуем для ненаправленных графов общего вида.

FDP

Метод «fdp» по сути, близок к методу «neato», и использует другую разновидность «энергетического» («spring») подхода. Также рекомендуется для ненаправленных графов общего типа.

Twopi

Метод «twopi» рисует графы с радиальной раскладкой. По сути одна вершина выбирается центральной, и помещается в центр, а остальные размещаются на последовательности концентрических орбит, вокруг этой вершины. Т.е. все вершины на расстоянии в «одно ребро» от центра, лежат на первой орбите, «в два ребра» — на второй и т. д.

CIRCO

Метод «circo» использует «circular layout». Выделяются двусвязные компоненты (каждая вершина имеет по крайней мере два ребра) и вершины этих компонент рисуются на некотором круге. «Дополнительные» ребра рисуются радиально и далее процесс повторяется. Пересечение ребер внутри круга минимизируется максимально возможным выносом ребер с круга за его периметр.

Версии для печати

Как известно, трудно добиться хорошего результата одновременно на экране и на принтере, в силу разных разрешений. Картинка экранного разрешения будет плохо (с «зазубринами») выглядеть на принтере, а картинка печатного разрешения, будет очень плохо выглядеть на экране (к сожалению, современные броузеры выполняют очень примитивный ресайзинг картинок при показе), и будет достаточно много «весить». Все соображения о печатных картинках также относятся к случаю, когда вы переносите (например, копируя вебстраницу из броузера через клипборд) содержимое MediaWiki-статьи в MS Word или другой текстовый редактор. Для такого, «печатного» случая (т. е. если у вас не примитивные графы, и вы собираетесь их печатать или переносить в другую систему верстки), мы сделали «печатную версию» всех перечисленных графов, с разрешением около 200 DPI. Для этого надо использовать те же самые тэги с постфиксом «-print», например «graph-print»,«neato-print», и т.п.:

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

Ссылки и дополнительная документация

Онлайн-документация, +последние изменения, FAQ и прочее можно найти на домашней странице пакета http://www.graphviz.org/Documentation.php

Внимание! Данная статья выбрана для репликации во внешнюю базу знаний компании. Пожалуйста, не допускайте в этой статье публикацию конфиденциальной информации, ведения обсуждений в теле статьи, и более ответственно относитесь к качеству самой статьи — проверяйте орфографию, пишите по-русски, избегайте непроверенной вами информации.

Retrieved from «https://wiki.4intra.net/index.php?title=Graphviz&oldid=7233»

CustisWikiToLib
Справка

Graphviz — рисуем графы

Достаточно часто встречается задача, когда надо нарисовать нечто, представляющее из себя граф. Это может быть иерархическая сструктура работ проекта, иерархическая структура рисков, организационная структура, топология сети и т.п. Если же количество вершин и ребер достаточно велико, то нарисовать это красиво становится нетривиальной задачей. К счастью, существует программа Graphviz, которая использует язык описания графов dot и имеет графический интерфейс под Windows.

Сама программа бесплатна и может быть скачена по ссылке. После установки в Windows в меню «Пуск» появится приложение gvedit, которое является графическим интерфесом к установленному пакету программ. В Mac OS X такого не произойдет и обходное решение описано ниже (если, конечно, вы не готовы работать в терминале).

Рассмотрим направленный граф, описывающий все возможные коммуникации между четырьмя участниками проекта. Листинг, описывающий граф привожу ниже:

digraph test< 1->2; 1->3; 1->4; 2->1; 2->3; 2->4; 3->1; 3->2; 3->4; 4->1; 4->2; 4->3; >

В приложении это будет выглядеть следующим образом:

bezymyannyy_1

В данном случае, был использован параметр по умолчанию и для построения графа использована утилита dot.

Для примера, тот же граф, построенный с помощью:


circo	fdp	twopi

Подробнее это описано в документации на сайте. Если кратко, то dot , а далее в статье используется только он, рисует граф в заданном в порядке ветвления; twopi — использует радиальное построение, когда вершины располагаются на концентрических окружностях, circo — связанные вершины располагаются по кругу.

В данном случае, у нас был изображен орграф. Если граф не ориентирован, иными словами «стрелочки» на рисунке нам не важны, то граф описывается следующим образом (обратите внимание на первой слово «graph» вместо «digraph», как задаются связи («—» вместо «->»), а также на команду node [shape = box] — задающую прямоугольники в качестве вершин). Несомненно, формат стрелок можно определить и в самом графе на языке dot, но алгоритмы построения для ориентированных и неориентированных графов имеют небольшое отличие.

graph test

Результат выглядит так:

test_4

Пример из заметки по динамическому программированию: меняем ориентацию графа (строится справа налево), добавляем подписи и стили линий и задаем размер листа.

digraph ex01 < rankdir=LR; size="8,5" node [shape = box]; "1" ->"2" [ label = "3",style=bold,color=red ]; "1" -> "3" [ label = "7",style=dotted]; "1" -> "4" [ label = "2",style=dotted ]; "2" -> "5" [ label = "9",style=dotted ]; "2" -> "6" [ label = "11",style=bold,color=red ]; "3" -> "5" [ label = "5",style=dotted ]; "3" -> "6" [ label = "10",style=dotted ]; "3" -> "7" [ label = "7",style=dotted ]; "4" -> "6" [ label = "15",style=dotted ]; "4" -> "7" [ label = "13",style=dotted ]; "5" -> "8" [ label = "7",style=dotted ]; "5" -> "9" [ label = "5",style=dotted ]; "6" -> "8" [ label = "3",style=bold,color=red ]; "6" -> "9" [ label = "4",style=dotted ]; "7" -> "8" [ label = "7",style=dotted ]; "7" -> "9" [ label = "1",style=dotted ]; "8" -> "10" [ label = "1",style=bold,color=red ]; "9" -> "10" [ label = "4",style=dotted ]; >

step4-1

Более сложные пример приведен в заметке по методу анализа иерархии.

При выборе формата записи результирующего графа, определенный интерес представляет формат svg в поле Output File Type. Формат svg — векторный формат, файлы в этом формате можно редактировать, например, с помощью Inkscape. Также обратите внимание на векторный формат emf, позволяющий внедрять и масштабировать рисунки в Word без потери качества. Для этого сайта был использован растровый формат png.

bezymyannyy_2

И последний пример, использование структуры в качестве вершины графа.

digraph structs < node [shape=record, style="rounded,filled"]; struct1 [label="Инициация| Планирование| Исполнение| Завершение", fillcolor=yellow]; struct2 [label=" Мониторинг| Контроль"]; struct1:f0-> struct2:f0; struct1:f1-> struct2:f0; struct1:f2-> struct2:f0; struct1:f3-> struct2:f0; struct2:f1 -> struct1:f0 [color="red"]; struct2:f1 ->struct1:f1 [color="red"]; struct2:f1 ->struct1:f2 [color="red"]; struct2:f1 ->struct1:f3 [color="red"]; >

Иcпользование команд консоли

snimok-ekrana-2016-03-09-v-21-55-07

Самый простой вариант создать диаграмму — это запустить в консоли соответсвующую команду (на рисунке показано окно Терминала под Mac OS X), например, dot. Если файл называется test.gv, а на выходе мы хотим получить png, то команда будет такая, как это показано ниже (а также выше на рисунке). Решение универсально и работает в любой операционной системе.

dot -Tpng -O test.gv

Использование RStudio для рисования графов

Следует отметить, что в Mac OS X при установке graphviz такой удобной графической оболочки как в Windows, вы не получите. Если вариант собрать его из исходников из портов (если вы хоть что-то поняли из написанных слов, значит инструкции не нужны), можно использовать консоль, как это показано выше, но также имеется возможноть использовать средства языка R и RStudio. Возможно, что кому-то это будет проще.

Для корректной работы вам понадобится пакет DiagrammeR. Установите его из меню или командой

install.packages("DiagrammeR")

После установки создайте файл, скопируйте туда код, сохраните его с расширением .gv, поставьте галочку «Preview on Save». Обратите внимание, если вы работаете в Windows, то файл необходимо сохранять в кодировке cp1251, иначе вместо русского языка вы получите кракозябры.

bezymyannyy_3

Дальше, используя кнопку Export, можно сохранить получившуюся диаграмму в формате png или jpeg.

Альтернативные варианты рисования диаграмм

Следует отметить, что DiagrammeR позволяет работать и с диаграммами в формате mermaid. В таком случае, файлы надо сохранять с расширением .mmd. Помимо простых графов, этот формат позволяет описать диаграмму последовательности, как это показано на рисунке ниже.

bezymyannyy_4

sequenceDiagram Покупатель->>Кассир: запрос билетов Кассир->>База данных: наличие мест alt билеты имеются База данных->>Кассир: Имеются Кассир->>Покупатель: Подтверждение Покупатель->>Кассир: Согласие Кассир->>База данных: Бронирование мест Кассир->>Принтер: Печать билета else билеты проданы База данных->>Кассир: Свободных мест нет Кассир->>Покупатель: Извините end

Диаграмма (обратите внимание, что пропали стрелки и непонятно, как идут сообщения. Это давно известная ошибка, которую так и не исправили):

rplot_1

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

snimok-ekrana-2016-03-09-v-21-06-13

Дополнительные материалы

Примеры на сайте graphviz. При кликании мышкой по графу показывается его код.
Документация: различные типы узлов
Документация: различные типы стрелок
Документация: цветовая палитра

LinuxShare

strict warning: Only variables should be passed by reference in /var/www/victor/web/linuxshare.ru/data/modules/book/book.module on line 559.

Введение в GraphViz

Однажды, собираясь писать документацию — я задумался. Проект, который я собирался документировать, динамически развивался и было очевидно, что все схемы, которые я буду рисовать ещё не раз придётся дополнять и перерисовывать. «Вот бы было что-то типа Wiki, но с возможностью также легко рисовать схемы» — подумал тогда я. «Но неужели до меня никто не додумался до столь простой мысли и не сделал столь полезного изобретения?» — меня посетили сомнения. «Не может быть!» Я отправился в поисковые системы, где во множестве предлагались различные платные графические редакторы, позволяющие рисовать прямо в браузере. Но тут мой взгляд зацепился за знакомое название GraphViz! Вспомнив, что я уже не раз слышал об этом продукте, а также не раз видел его в составе моего дистрибутива, я решил познакомится поближе и неожиданно увлёкся.

Автор статьи: Виктор Вислобоков
Размещается под лицензией: CC-BY-NC-ND

Установка

Установка до безобразия проста. GraphViz входит в состав практически всех извесных мне дистрибутивов, ориентированных на пользователя. Так что всё что остаётся, например, людям использующим Fedora, CentOS и прочие rpm-дистрибутивы с yum, это выполнить команду:

yum install graphviz

Также в дистрибутивах есть пакеты, позволяющие использовать GraphViz со многими языками прогаммирования: Perl, Python, PHP, Tcl/TK и и.д. Возможно после ознакомления с GraphViz вы захотите поставить и использовать также и эти пакеты.

Первое использование

Использовать GraphViz очень просто. Как всегда всё в стиле Unix-way, т.е. через командную строку. Вы делаете файл, в котором, на некоем мета-языке содержится описание требуемого вам графа, а затем запускаете утилиту из комплекта GraphViz, которая из этого файла делает другой файл, хранящий в себе уже сам отрисованный граф.

Простейший пример. Сделаем файл example1.gv вида:

digraph HelloWorld < "Hello" ->"World"; >

и получим из него картинку в формате PNG:

dot -Tpng example1.gv -oexample1.png

Думаю, теперь вы уже можете без труда составить простейшие вертикальные графы.

Разумеется, отрисованный граф можно получать не только в виде PNG-картинки. Это может быть и SVG-графика, встраиваемая в веб-страницу, и PDF, и PostScript, VML и т.д. и т.д.

Разумеется, GraphViz может много больше, чем просто отрисовка столь примитивного графа, который был продемонстрирован в предыдущем разделе. Возможностей очень много и их полное описание выходит за пределы данной статьи. Если вы очень любите изучать всё с начала и до конца, то я рекомендую посетить официацльный сайт на предмет чтения официальной документации: http://www.graphviz.org. Я же рассмотрю лишь некоторые полезные возможности, которые помогут вам начать рисовать достаточно продвинутые графы и схемы.

Немного теории

Хотя с помощью GraphViz можно рисовать схемы, которые лишь отдалённо напоминают графы, всё же GraphViz — это именно средство для отрисовки графов! Поэтому не ждите от неё возможностей Visio или чего-то подобного, у этого продукта (как впрочем и любого другого) есть свои ограничения и недостатки, о чём будет сказано ниже. И вот вам кстати ссылка на Галерею графов, где вы можете посмотреть, что можно получить с помощью GraphViz.

Прежде чем пойти дальше, я введу некоторые термины, которыми мы будем оперировать. Они пригодятся ниже, когда я буду давать пояснения, а также если вы вдруг всё же начнёте изучать полную документацию. Итак:

node — Узел графа. Обычно представляет из себя какую-либо фигуру из библиотеки встроенных фигур.
edge — Переводится как «край», но в GraphViz имеет совсем другое значение. Обычно это стрелка, соединяющая node (узлы графа)
subgraph — Подграф, который включается в основной граф. Самостоятельная область графа, которая может включать в себя другие узлы и которая затем самостоятельно отрисовывается в графе
cluster — Или «кластер». Это разновидность подграфа, которая может иметь метку и выделенную область, выделяемую цветом.
атрибут — Именованный параметр, который может изменять оформление или поведение графа, подграфа, node или edge. Атрибутов великое множество и подробное описание к ним можно найти на официальном сайте, ссылку на который я уже приводил.

Имена узлов

GraphViz по умолчанию заточен на использование UTF-8 и вы можете преспокойно использовать русские буквы в названии узлов графа. Единственное, что необходимо помнить, что лучше заключайте любые имена в двойные кавычки, хотя GraphViz и позволяет использовать имена из одного слова, не содержащие разделительных знаков без кавычек. Т.е. вы можете использовать следующие имена узлов:

node1 Понедельник "Новый год" "self-made"

Обратите внимание, в двух последних случаях использование двойных кавычек обязательно, потому что в имени «Новый год» два слова, разделённые через пробел, а имя «self-made» содержит служебный символ «-«. В общем мой совет — используйте кавычки всегда и не ошибётесь, а напротив избежите досадных ошибок, связанных с невнимательностью.

В любом месте файла вы можете использовать комментарии также как в языке C++, т.е. либо вот так:

/* это комментарий в несколько строк */

либо вот так:

// это комментарий до конца строки

Умолчания

Если вы используете набор однотипных фигур и стрелок, но не тот, который установлен по умолчанию, гораздо удобней будет выставить вначале необходимые умолчания, которые будут действовать для всего графа. Например умолчание:

node [shape="box"] edge [dir="both"]

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

Примеры

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

Пример 1. Предположим вы хотите составить себе план действий на неделю, потому что периодически, что-либо вылетает из головы. Например, во вторник и субботу вы моете свой автомобиль, а по понедельникам, четвергам и субботам у вас тренировка в спортзале. А в среду, пятницу и понедельник вам нужно зайти в магазин за продуктами. А в четверг вам ещё нужно побывать в паспортном столе, чтобы забрать документы, а если они ещё будут не готовы, то подождать их сидя в кафе неподалёку. Теперь, сразу решаем, что внешний вид узлов графа должен быть круги вместо эллипсов, которые залиты синим цветом, а надписи в них будут белые. Поскольку документы — это наиболее важное в нашем плане, то мы используем красный цвет. А стрелки мы хотим, чтобы были не сплошные, а пунктирные. Да и граф нужно ориентировать не по вертикали, а по горизонтали, потому что так нам наглядней. В итоге получаем:

digraph MyPlan < node [shape="circle", style="filled", fillcolor="blue", fontcolor="#FFFFFF", margin="0.01"]; edge [style="dashed"]; rankdir="LR"; "Документы" [fillcolor="red"]; "Понедельник"->"Тренировка"->"Продукты"; "Вторник"->"Мойка авто"; "Среда"->"Продукты"; "Четверг"->"Документы"->"Тренировка"; "Документы"->"Кафе"->"Документы"; "Пятница"->"Продукты"; "Суббота"->"Мойка авто"->"Тренировка"; "Воскресенье"; >

И картинку:

Уместно дать некоторые пояснения. Как видите, цвет можно задавать не только его названием, но и 16-ричным кодом, как в HTML (#RRGGBB). Единожды появившееся описание узла, используется повсеместно, не вызывая конфликтов. Несвязанные узлы, например «Воскресенье» так и остаются в графе без стрелочек. Атрибут margin=»0.01″ используется, чтобы уменьшить отступ внутри кругов, иначе они будут больше, что не всегда удобно. Атрибут rankdir=»LR» меняет направление графа с «TB» (сверху вниз), на «LR» (слева направо).

Посмотрев на граф, вы видите, что он получился не таким уж и удобным. Дни недели разбросаны по всему графу, ориентироваться в нём неудобно. Может быть попробовать всё же изобразить его вертикально?

Пример 2. Давайте попробуем изобразить ранее изученный пример вертикально. Ну а чтобы было интересней, заключим дни недели в кластер, выделим его цветом и добавим метку. А вместо кругов в качестве фигур для дней недели будем использовать прямоугольники, залитые зелёным цветом. А шрифт у названий дней недели сделаем чёрного цвета и помельче. Заодно ещё и добавим в воскресенье сперва поход в театр, а затем в кафе:

digraph MyPlan < node [shape="circle", style="filled", fillcolor="blue", fontcolor="#FFFFFF", margin="0.01"]; edge [style="dashed"]; "Документы" [fillcolor="red"]; subgraph cluster_week < node [shape="box", style="filled", fillcolor="green", fontcolor="black", fontsize="9"]; label = "Дни недели"; "Понедельник"; "Вторник"; "Среда"; "Четверг"; "Пятница"; "Суббота"; "Воскресенье"; >"Понедельник"->"Тренировка"->"Продукты"; "Вторник"->"Мойка авто"; "Среда"->"Продукты"; "Четверг"->"Документы"->"Тренировка"; "Документы"->"Кафе"->"Документы"; "Пятница"->"Продукты"; "Суббота"->"Мойка авто"->"Тренировка"; "Воскресенье"->"Театр"->"Кафе"; >

и картика:

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

Ещё обратите внимание, чтобы была возможность сделать рамочку и подпись к кластеру, имя у подграфа должно начинаться с «cluster» и никак иначе

Пример 3. Теперь давайте возьмём так сказать один день из жизни и сделаем из него блок-схему алгоритма. Пусть это будет четверг. Делаем практически то, что уже пробовали, лишь добавляем к стрелочкам, соединяющим узлы подписи «Да» и «Нет»:

digraph MyPlan < node [shape="rectangle"]; "Начало" [shape="ellipse"] "Конец" [shape="ellipse"] "Если готовы документы" [shape="diamond"] "Начало"->"Четверг"->"Если готовы документы"->"Тренировка"[label="Да"] "Тренировка"->"Конец"; "Если готовы документы"->"Кафе"[label="Нет"] "Кафе"->"Если готовы документы"; >

получаем картинку:

И. разочаровано на неё смотрим! Коряво получилось. «Кафе» должно быть сбоку от условия «Если готовы документы», а у нас оно внизу, а стрелка к «Кафе» и обратно к «Если готовы документы» идёт совсем не по стандарту. Если изменить уровнь у «Кафе» ещё можно, использовав распределение узлов по уровням, то со стрелками уже ничего поделать нельзя. Вот вам и первый недостаток GraphViz — он не ориентирован на создание прямолинейных блок-схем алгоритмов.

Пример 4. Давайте теперь ознакомимся с возможностью GraphViz распределять узлы графа по определённым уровням высоты. Реализована эта возможность, через создание в качестве некой «линейки уровней» ещё одного невидимого графа в стороне от основного и закрепление узлов нашего графа на том же уровне, что узлов линейки. Итак, снова берём наш план и меняем его вот так:

digraph MyPlan < node [shape="circle", style="filled", fillcolor="blue", fontcolor="#FFFFFF", margin="0.01"]; edge [style="dashed"]; < node [shape="plaintext",style="invisible"]; edge [color="white"]; "1" ->"2" -> "3" -> "4" -> "5" -> "6" -> "7"; > subgraph week < node [shape="box", style="filled", fillcolor="green", fontcolor="black", fontsize="9"]; label = "Дни недели"; "Понедельник"; "Вторник"; "Среда"; "Четверг"; "Пятница"; "Суббота"; "Воскресенье"; < rank="same"; "1"; "Понедельник"; > < rank="same"; "2"; "Вторник"; > < rank="same"; "3"; "Среда"; > < rank="same"; "4"; "Четверг"; > < rank="same"; "5"; "Пятница"; > < rank="same"; "6"; "Суббота"; > < rank="same"; "7"; "Воскресенье"; >> "Документы" [fillcolor="red"]; "Понедельник"->"Тренировка"->"Продукты"; "Вторник"->"Мойка авто"; "Среда"->"Продукты"; "Четверг"->"Документы"->"Тренировка"; "Документы"->"Кафе"->"Документы"; "Пятница"->"Продукты"; "Суббота"->"Мойка авто"->"Тренировка"; "Воскресенье"; >

В итоге получим вот такую смешную картинку:

Обратите внимание, у узлов линейнки, установлен атрибут:

style="invisible";

который запрещает отрисовывать эти узлы, хотя и OpenViz резервирует место под них, а атрибут

color="white"

у стрелок, приводит к тому, что они отрисовываются, но белым цветом, таким же как цвет фона, поэтому их не видно!

Как вы можете видеть, теперь дни недели упорядочены по высоте, но к сожалению не находятся друг под другом. И увы, мне неизвесно способа как их можно заставить выстроится именно так! Конструкция:

говорит, что узлы «2» и «Вторник» должны находится на одном уровне. Вы можете, например, добавить ещё какой-либо узел после «Вторник» также через «;» и этот узел также будет отрисован на этом же уровне.

Ещё один недостаток такого распределения по уровням становится ясен, когда начинаете работать с кластерами. Я пытался создать в кластере ещё один кластер и несколько узлов, распределив их по высоте, но сколь я не бился — у меня ничего не вышло. По неизвестной мне причине, уровни начинали вставать попарно друг с другом рядом. Если кто знает почему так и как это решить — напишите мне и моё «большое спасибо» вам обеспечено. Заодно дополню статью.

Пример 5. А что если хочется странного, например, чтобы название узла было в две строки? Это как раз довольно просто. А если вдруг хочется чтобы вторая строка имела другой цвет и размер шрифта? Вот это уже гораздо сложнее! А бывает вообще хочется некий прямоугольник, разбитый по секциям с разными надписями. Вот вам пример, реализующий всё вышесказанное:

digraph MyPlan < node [margin="0.01"]; "box1" [shape="box", label="Надпись в\nдве строки"]; "box2" [shape="box", style="filled", fillcolor="lightcyan2", label=вторая строка другим шрифтом и цветом>]; "box3" [shape="record", label = "Слева|Справа"]; "box4" [shape="record", label = "<Сверху|Снизу>"]; "box5" [shape="record", label = "Слева|<Сверху|Центр|Снизу>|Справа"]; "box1" -> "box2"; "box3" -> "box4" -> box5; >

И картинка:

Как видите, если «box1» и «box2» используют тип узла «box» и HTML-форматирование, то «box3», «box4» и «box5» используют специальный тип узла: «record». К сожалению у «record» есть недостаток — расположение меток зависит от направленности графа, т.е. если бы у этого графа атрибут «rankdir» был выставлен в «LR» а не как по умолчанию в «TB», то метки «слева» и «справа» стали бы отрисоваться не слева и справа, а сверху и снизу и наоборот метки «снизу» и «сверху» стали бы отрисовываться вместо снизу и свеху, справа и слева. Это не очень-то удобно, если вы по каким-то причинам решить поменять направление роста графа.

Пример 6. Тем не менее, GraphViz неплохо подходит для отображения структуры баз данных и связей между таблицами. Приведём пример, заодно пользуясь случаем показать, что можно изменить внешний вид наконечников стрелок:

digraph MyPlan < node [margin="0.01"]; rankdir="LR"; "users_tbl" [shape="record", label ]; "perms_tbl" [shape="record", label ]; "access_tbl" [shape="record", label ]; "users_tbl":PK ->"access_tbl":FK1[dir="both",arrowtail="invdot",arrowhead="odot"]; "perms_tbl":PK -> "access_tbl":FK2[dir="both",arrowtail="invdot",arrowhead="odot"]; >

и картинка:

Заключение

В общем-то пожалуй и всё, что я хотел рассказать. Думаю, для решения множества задач — этих примеров достаточно.

Хочется заметить, что во всех примерах я использовал направленный граф и утилиту dot, однако GraphViz позволяет использовать и другие виды отрисовки графов, такие как «circo», «neato» и т.д. Так вот, чтобы попробовать отобразить свой граф в таком режиме, нужно вместо dot использовать соответствующую утилиту: circo, neato и т.д. Не все атрибуты, которые поддерживаются dot, поддерживаются другими способами отображения — нужно иметь это в виду.

Вложение	Размер
example1.png	6.59 kb
example2.png	58.5 kb
example3.png	178.01 kb
example4.png	24.35 kb
example5.png	96.85 kb
example6.png	16.59 kb
example7.png	13.96 kb

Войдите чтобы добавлять комментарии
прочитано 45162 раза

Русские Блоги

Установка Graphviz и вводное руководство под windows

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

Адрес для перепечатки: http://blog.csdn.net/lanchunhui/article/details/49472949

Загрузите и установите переменные среды конфигурации
- intall
- Настроить переменные среды
- проверка
- graph
- digraph
- Сложный пример
Обнаружение хороших инструментов похоже на открытие нового мира. Иногда нам будет любопытно, как сделать такие яркие иллюстрации в бумагах и книгах всех без исключения профессий без умелого использования рисовальных инструментов.

Скачать, установить, настроить переменные среды

intall

Двойной клик msi File, а затем перейдите к следующему (запомните путь установки, путь по умолчанию — C: \ Program Files (x86) \ Graphviz2.38, информация о пути будет использоваться для настройки переменных среды позже), после завершения установки, в меню «Пуск» Windows будет создано сообщение с ярлыком. Ярлык по умолчанию не размещается на рабочем столе. Чтобы

Настроить переменные среды

Добавьте папку bin в каталоге установки graphviz в переменную среды Path:

проверка

Войдите в интерфейс командной строки Windows, введите dot -version , А затем нажмите Enter.Если отображается соответствующая информация о версии graphviz, установка и настройка выполнены успешно.

Используйте команду в окне cmd, чтобы преобразовать точечный файл в графический файл pdf.

Вам нужно ввести преобразованный путь к файлу, иначе вы не знаете, куда идти.

dot -Tpdf D:\mycodes\pythonStudy\python\allDecisionTree.dot -o D:\mycodes\pythonStudy\python\allDecisionTree.pdf

Начало работы с основным рисунком

Откройте редактор graphviz под окнами gvedit , Напишите следующий язык сценариев с точкой и сохраните его как текстовый файл в формате gv. Затем войдите в интерфейс командной строки и используйте команду с точкой, чтобы преобразовать файл gv в графический файл png.
```
dot D:\test\1.gv -Tpng -o image.png
```
graph

использование графика — Опишите отношения
```
graph pic1 < a -- b a -- b b -- a [color=blue] > 
```
digraph

использовать -> Опишите отношения
```
digraph pic2 < a ->b a -> b b -> a [style=filled color=blue] > 
```
Сложный пример
```
digraph startgame < label=«Процесс обновления игровых ресурсов» rankdir="TB" start[label=Форма "Начать игру" = стиль круга = заливка] ifwifi[label=«Сетевая среда для определения наличия Wi-Fi» shape = ромб] needupdate[label=«Есть ли ресурсы, которые нужно обновить» shape = diamond] startslientdl[label="Тихая загрузка" shape = box] enterhall[label="Войдите в игровое лобби" shape = box] enterroom[label="Войдите в комнату" shape = box] resourceuptodate[label="Ресурс неполный" shape = ромб] startplay[label=Форма "Обычная игра" = круг fillcolor = синий] warning[label=«Напомнить игроку, нужно ли обновлять» shape = diamond] startdl[label="Войдите в интерфейс загрузки" shape = box] //  start -> ifwifi ifwifi->needupdate[label="Да"] ifwifi->enterhall[label="нет"] needupdate->startslientdl[label="Да"] startslientdl->enterhall needupdate->enterhall[label="нет"] enterhall -> enterroom enterroom -> resourceuptodate resourceuptodate -> warning[label="Да"] resourceuptodate -> startplay[label="нет"] warning -> startdl[label=«Подтвердить загрузку»] warning -> enterhall[label="Отменить загрузку"] startdl -> enterhall[label=«Отменить загрузку»] startdl -> startplay[label=«Загрузка завершена»] >
```
Взаимодействовать с python

Мощный и удобный метод Graphviz для рисования диаграмм / блок-схем позволяет нам легко думать о машинном обучении. Decision Tree Метод отображения. К счастью, scikit-learn предоставляет .dot Файловый интерфейс, конкретные операции следующие:

вpythonВ среде редактирования:
```
from sklearn.tree import export_graphviz # Импортируется функция # tree означает, что модель обучена, то есть был вызван метод fit (X_train, y_train) экземпляра DecisionTreeClassifier export_graphviz(tree, out_file='tree.dot', feature_names=['petal length', 'petal width'])
```
Войдите в интерфейс командной строки Windows, переключитесь на cd tree.dot Путь, выполнить
```
dot -Tpng tree.dot -o tree.png
```
Похожие публикации: