Версия 10:01, 15 июня 2009

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

Для использования Графвиз требуется использовать примитивный язык описания графов dgl. Основные понятия:

граф,
вершина графа -- элемент множества,
ребро графа, соединяющее вершину N с вершиной M

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

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

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

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

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

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

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

 <graphviz>
 digraph G{
 "Сидоров Пётр Фёдорович" -> "Сидоров Иван Петрович" [label="отец"];
 "Сидорова Анна Павловна " -> "Сидоров Иван Петрович" [label="мать"];
 } 
 </graphviz>

digraph G{
"Сидоров Пётр Фёдорович" -> "Сидоров Иван Петрович" [label="отец"];
"Сидорова Анна Павловна " -> "Сидоров Иван Петрович" [label="мать"];
} 
</graphviz>

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

Свойства графа

Для того, граф было удобнее просматривать, можно настроить следующие свойства. Например:

Направленность графа:
- rankdir=LR - слева-направо
- rankdir=TB - сверху вниз
- ratio=auto - отношение = авто;
Цвет фона графа - graph [bgcolor=Snow2] - окрашивает фон в цвет - "серый снег"
Свойства (node) узлов - node[color="Pink",fontsize=10, style=filled, fontcolor="blue", shape="none"] (Сочетание двух и более слов записывается в кавычки - "Нижний Новгород")
- color="Pink" - цвет = розовый (Цвета в Вики)
- fontsize=8 - размер шрифта = 8
- style=filled - стиль = заполненный (без неё узел прозрачен)
- fontcolor="blue" - цвет шрифта = голубой
- shape="none" - форма = "без формы"
  - Формы узла [shape=?] - invtriangle - треугольник вершиной вниз; box - прямоугольник; ellipse - эллипс; invtrapezium - перевёрнутая трапеция; triangle - треугольник; trapezium - трапеция; record - ; doubleoctagon - двойной восьмиугольник ; octagon - восьмиугольник; tripleoctagon - тройной восьмиугольник (Все формы)
- Ярославль [shape=Mdiamond] - узлу Ярославль придаётся форма ромба(алмаз)
- Сызрань [shape=Msquare] - узлу Сызрань придаётся форма квадрата
- Кострома [shape=circle] - узлу Кострома придаётся форма круга
- "Нижний Новгород" [shape=doublecircle] - узлу "Нижний Новгород" придаётся форма двойного круга
- Казань [shape=hexagon,color=green] - узлу Казань придаётся форма шестиугольника и зелёный цвет
Управление положением узлов - {rank=same; Елабуга Дзержинск Сызрань ;} - узлам Елабуга, Дзержинск, Сызрань предан разряд = тот же самый; ranksep=3 - расстояние между разрядами;
Свойства(edge)ребер - edge[color="blue",fontcolor="Green",fontsize=12]
- color="Brown" - цвет = коричневый
  - color="Green:blue:red" - трёхцветие (возможно любое количество)
- dir=both - направление стрелки в две стороны
- fontsize=8 - размер шрифта = 8
- fontcolor="blue" - цвет шрифта = зелёный
- style=dotted - стиль = пунктирная линия
- arrowhead="dot" - голова стрелки = "точка", "none" - нет (Все формы)
Ярлык ребра [label="Волга"] - все связи Ярославль -> ... -> Сызрань будут помечены меткой Волга.

<graphviz>
 digraph G{
 graph [bgcolor=Snow2];
 rankdir=LR ; // направление графа слева направо
 node[color="Pink",fontsize=8, fontcolor="blue",style=filled, shape="none"] ;
 edge[color="Brown",fontcolor="Green",fontsize=8] ;
 Ярославль -> Кострома -> "Нижний Новгород" -> Казань -> Сызрань [dir=both, label="Волга"];
 "Нижний Новгород" -> Дзержинск [style=dotted, label="Ока",arrowhead="dot" ] ;
 Казань -> Елабуга [label="Кама", color="Green:blue:red"] ;
 Ярославль [shape=Mdiamond], Сызрань [shape=Msquare], Кострома [shape=circle];
 "Нижний Новгород" [shape = doublecircle],Казань[shape=hexagon,color=green]
 {rank=same; Елабуга Дзержинск Сызрань ;}
 }
 </graphviz>

digraph G{
graph [bgcolor=Snow2];
rankdir=LR ; 
node[color="Pink",fontsize=8, fontcolor="blue",style=filled, shape="none"] ;
edge[color="Brown",fontcolor="Green",fontsize=8] ;
Ярославль -> Кострома -> "Нижний Новгород" -> Казань -> Сызрань [dir=both, label="Волга"];
"Нижний Новгород" -> Дзержинск [style=dotted, label="Ока",arrowhead="dot" ] ;
Казань -> Елабуга [label="Кама", color="Green:blue:red"] ;
Ярославль [shape=Mdiamond], Сызрань [shape=Msquare], Кострома [shape=circle];
"Нижний Новгород" [shape = doublecircle],Казань[shape=hexagon,color=green]
{rank=same; Елабуга Дзержинск Сызрань ;}

}

</graphviz>

Гипертекстовые ссылки на страницы

Ссылки на внутренние страницы устанавливаются прямым связыванием:

ПскоВики - [URL=ПскоВики]

Кроме того, мы можем в начале графа указать, что все элементы поименованные в графе должны ссылаться на страницы с соответстующим названием. node [URL="/index.php/\N"] ;

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

Для того, чтобы имя заметки на ребре так же становилось ссылкой на страницу, необходимо дополнить метку ссылкой [label="ПскоВики", URL="ПскоВики"]. В графе, который представлен ниже все узлы и метки являются гиперссылками.

<graphviz>
 digraph G{
 rankdir=LR ;
 node[color="Green",fontsize=9, fontcolor="blue"] ;
 edge[color="Green",fontcolor="blue",fontsize=8] ;
 node [URL="/index.php/\N"] ;
 Категории -> "Категория:Тьюторы" -> "Категория:Участник" ->  "Категория:Учитель"  [label="ПскоВики",URL="ПскоВики"] ;
 }
 </graphviz>

<graphviz> digraph G{ rankdir=LR ; node[color="Green",fontsize=9, fontcolor="blue"] ; edge[color="Green",fontcolor="blue",fontsize=8] ; node [URL="/index.php/\N"] ; Категории -> "Категория:Тьюторы" -> "Категория:Участник" -> "Категория:Учитель" [label="ПскоВики",URL="ПскоВики"] ; } </graphviz>

Ссылки на внешние источники устанавливаются прямым связыванием с адресом web-сайта:

ПскоВики [URL="http://wiki.pskovedu.ru/index.php/Заглавная_страница"]

<graphviz>
 digraph G{
 rankdir=LR ;
 node[color="red",fontsize=9, fontcolor="blue", shape="none"] ;
 edge[color="red",fontcolor="blue",fontsize=8] ;
 node [URL="/index.php/\N"] ;
 Тест -> Проект [style=dotted, label="ПскоВики", URL="http://wiki.pskovedu.ru/index.php/  Заглавная_страница"] ;
 }
 </graphviz>

<graphviz> digraph G{ rankdir=LR ; node[color="red",fontsize=9, fontcolor="blue", shape="none"] ; edge[color="red",fontcolor="blue",fontsize=8] ; node [URL="/index.php/\N"] ; Тест -> Проект [style=dotted, label="ПскоВики", URL="http://wiki.pskovedu.ru/index.php/Заглавная_страница"] ; } </graphviz>

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

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

<graph>
 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"];
 }
 </graph>

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"];

} </graphviz>

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

В структуре графа можно образовать несколько групп использую дополнение - subgraph cluster_0 {}

<graphviz> digraph G {
 subgraph cluster0 {
  style=filled;
  color=DeepSkyBlue;
  node [style=filled,color=white];
  "Учебные проекты" -> "Сообщество школ" -> "Сетевые проекты" -> "Участники сообщества";
  label = "Летописи.ру";
  }
 subgraph cluster1 {
  node [style=filled];
  Проекты -> школы -> тьюторы -> учителя;
  label = "ПскоВики";
  color=blue
  "Учебные проекты" -> Проекты
  учителя -> "Участники сообщества"
  Проекты -> "Сетевые проекты"
        }
	}</graphviz>

<graphviz> digraph G {

subgraph cluster0 {
 style=filled;
 color=DeepSkyBlue;
 node [style=filled,color=white];
 "Учебные проекты" -> "Сообщество школ" -> "Сетевые проекты" -> "Участники сообщества";
 label = "Летописи.ру";
 }
subgraph cluster1 {
 node [style=filled];
 Проекты -> школы -> тьюторы -> учителя;
 label = "ПскоВики";
 color=blue
 "Учебные проекты" -> Проекты
 учителя -> "Участники сообщества"
 Проекты -> "Сетевые проекты"
       }

}</graphviz>

Задание для самостоятельной работы

Используя графвиз отобразите сферу ваших интересов и увлечений.

@@ Строка 51: / Строка 51: @@
 Поздравляем! Теперь вы способны рисовать простейшие графы в {{SITENAME}}. Остальной текст будет посвящен некоторым тонкостям использования Graphviz.
-== Внешний вид графа ==
-«Dot» позволяет изменять внешний вид графа. Например, можно изменять форму фигур (прямоугольники, овалы, круги, параллелограммы, многоугольники), цвет и шрифт текста, цвет фона фигур, стиль стрелок и рамок фигур, подписи стрелок и т. д.
-Итак, основные объектами являются узлы («node») и ребра («edge»). Для того, чтобы настроить свойства всех узлов или ребер нужно вначале использовать команды
- node[свойство1="значение1",свойство2="значение2",...]
- edge[свойство1="значение1",свойство2="значение2",...]
-Также (в квадратных скобках после описания объекта) можно изменять настройки конкретного узла или ребра. Параметры графа, просто задаются в виде <tt>параметр=значение</tt>.
-Полезно запомнить параметр «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"];
- }
-на выходе будет
-<graphviz>
-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"];
-}
-</graphviz>
 ==Свойства графа==

Лекция 1.6. Графвиз — различия между версиями

Версия 10:01, 15 июня 2009

Содержание

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

Свойства графа

Гипертекстовые ссылки на страницы

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

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

Задание для самостоятельной работы

Навигация

Просмотры

Персональные инструменты

Навигация

Поиск

Инструменты