<graphviz>

Материал из свободной русской энциклопедии «Традиция»
Перейти к: навигация, поиск
<graphviz>
Описание:
Позволяет внедрять графы
Автор:
Параметры:
format:
gif, jpg, jpeg, png (по умолчанию) или svg
uniquifier:
уникальный, в пределах страницы, идентификатор
renderer:
dot (по умолчанию), neato, fdp, sfdp, circo или twopi
Возвращает: Синтаксис:
<graphviz format="gif, jpg, jpeg, png (по умолчанию) или svg" uniquifier="уникальный, в пределах страницы, идентификатор" renderer="dot (по умолчанию), neato, fdp, sfdp, circo или twopi">описание графа на языке dot</graphviz>
Написание статей Написание статей
Тематические статьи
Техническая справка
Общие правила

Список правил и руководств Справка

<graphviz> — предоставляемый расширением graphviz тег MediaWiki, позволяющий внедрять в страницы графы, отрисованные программой GraphViz с помощью алгоритмов dot, neato, fdp, sfdp, circo и twopi.

Возможности dot[править]

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

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

Также (в квадратных скобках после описания объекта) можно изменять настройки конкретного узла или ребра. Параметры графа, просто задаются в виде параметр=значение.

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

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

  { rank = same; "элемент уровня"; "элемент для привязки 1"; "элемент для привязки 2"; ..}

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

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

shape=record;

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

элемент:<имя_секции>

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

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

subgraph имя{
свойство1 = "значение1",свойство2="значение2",...
узел1; 
узел2;
...
}

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

Особенности[править]

Внимание: если на странице есть несколько графов, у них должны быть разные имена. Если этого добиться нельзя, следует задать уникальные в пределах страницы атрибуты uniquifier.

Если вместо сохранённого графа появилась надпись Graph image source changed. Reload page to display updated graph image, следует обновить страницу в браузере.

Примеры[править]

Примеры
Описание Викитекст Вывод
Простейший пример
<graphviz>
digraph Example1{ 
    Зачатие->Рождение->Юность->Зрелость->Старость->Смерть;
    Зачатие->Аборт->Смерть;
    Юность->Смерть;
    Зрелость->Смерть;
}
</graphviz>

Graph image creation requires permission to upload.

Dot с викиссылками
<graphviz>
digraph Example2{ 
    Зачатие [URL="[[Зачатие]]"]; Рождение [URL="[[Рождение]]"]; Юность [URL="[[Юность]]"]; Зрелость [URL="[[Зрелость]]"]; Старость [URL="[[Старость]]"]; Смерть [URL="[[Смерть]]"]; Аборт [URL="[[Аборт]]"];
    Зачатие->Рождение->Юность->Зрелость->Старость->Смерть;
    Зачатие->Аборт->Смерть;
    Юность->Смерть;
    Зрелость->Смерть;
}
</graphviz>

Graph image creation requires permission to upload.

Многословные названия узлов в кавычках
<graphviz>
digraph Example3{
    "Полёт фантазии"->"Расход горючего";
}
</graphviz>

Graph image creation requires permission to upload.

Граф со сложным форматированием на прозрачном фоне
<graphviz>
digraph Example4{
    graph [bgcolor="transparent"];
    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>

Graph image creation requires permission to upload.

Позиционирование узлов
<graphviz>
digraph Example5{
   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" ;
 }
</graphviz>

Graph image creation requires permission to upload.

Многосекционные узлы
<graphviz>
digraph Example6{
    rankdir=HR;
    first [shape=record,label="  x1\n all | { x21 | <f0> x22| x23} | x3" ];
    second [shape=record,label=" x22_1 | x22_2 | x22_3"];
    first:<f0> -> second;
}
</graphviz>

Graph image creation requires permission to upload.

Кластеры
<graphviz>
digraph Example7 {
    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>

Graph image creation requires permission to upload.

Палитра, оптимизированная для чёрно-белой печати
<graphviz>
digraph Example8{ rankdir=TB; size="7,6";

    Палитра1->goldenrod1 [color=goldenrod1]
    Палитра1->green [color=green]
    Палитра1->sienna4 [color=sienna4]
    Палитра1->red1 [color=red1]
    Палитра1->blue2 [color=blue2]

    Палитра2->lightcyan2 [color=lightcyan2]
    Палитра2->pink2 [color=pink2]
    Палитра2->green [color=green]
    Палитра2->sienna4 [color=sienna4]
    Палитра2->red2 [color=red2]
    Палитра2->black1 [color=black1]
}
</graphviz>

Graph image creation requires permission to upload.

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

<graphviz>

graph Example9{
    node [fontsize=12];
    node [shape=box]; course; institute; student;
    node [shape=ellipse];
    {node [label="name"] name0; name1; name2;}
    code; grade; number;
    node [shape=diamond,style=filled,color=lightgrey];
    "C-I"; "S-C"; "S-I";
    name0 -- course;
    code -- course;
    course -- "C-I" [label="n",len=1.00];
    "C-I" -- institute [label="1",len=1.00];
    institute -- name1;
    institute -- "S-I" [label="1",len=1.00];
    "S-I" -- student [label="n",len=1.00];
    student -- grade;
    student -- name2;
    student -- number;
    student -- "S-C" [label="m",len=1.00];
    "S-C" -- course [label="n",len=1.00];
     label = "\n\nEntity Relation Diagram\ndrawn by DOT";
}
</graphviz>

Graph image creation requires permission to upload.

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

<graphviz renderer="neato">

graph Example10
{
    node [fontsize=12];
    node [shape=box]; course; institute; student;
    node [shape=ellipse];
    {node [label="name"] name0; name1; name2;}
    code; grade; number;
    node [shape=diamond,style=filled,color=lightgrey];
    "C-I"; "S-C"; "S-I";
    name0 -- course;
    code -- course;
    course -- "C-I" [label="n",len=1.00];
    "C-I" -- institute [label="1",len=1.00];
    institute -- name1;
    institute -- "S-I" [label="1",len=1.00];
    "S-I" -- student [label="n",len=1.00];
    student -- grade;
    student -- name2;
    student -- number;
    student -- "S-C" [label="m",len=1.00];
    "S-C" -- course [label="n",len=1.00];
    label = "\n\nEntity Relation Diagram\ndrawn by NEATO";
}
</graphviz>

Graph image creation requires permission to upload.

Неориентированный граф на fdp
<graphviz renderer="fdp">
graph Example11
{
    node [fontsize=12];
    node [shape=box]; course; institute; student;
    node [shape=ellipse];
    {node [label="name"] name0; name1; name2;}
    code; grade; number;
    node [shape=diamond,style=filled,color=lightgrey];
    "C-I"; "S-C"; "S-I";
    name0 -- course;
    code -- course;
    course -- "C-I" [label="n",len=1.00];
    "C-I" -- institute [label="1",len=1.00];
    institute -- name1;
    institute -- "S-I" [label="1",len=1.00];
    "S-I" -- student [label="n",len=1.00];
    student -- grade;
    student -- name2;
    student -- number;
    student -- "S-C" [label="m",len=1.00];
    "S-C" -- course [label="n",len=1.00];
    label = "\n\nEntity Relation Diagram\ndrawn by FDP";
}
</graphviz>

Graph image creation requires permission to upload.

Неориентированный граф на twopie
<graphviz renderer="twopie">
graph Example12{
 
    node [fontsize=12];
    node [shape=box]; course; institute; student;
    node [shape=ellipse];
    {node [label="name"] name0; name1; name2;}
    code; grade; number;
    node [shape=diamond,style=filled,color=lightgrey];
    "C-I"; "S-C"; "S-I";
    name0 -- course;
    code -- course;
    course -- "C-I" [label="n",len=1.00];
    "C-I" -- institute [label="1",len=1.00];
    institute -- name1;
    institute -- "S-I" [label="1",len=1.00];
    "S-I" -- student [label="n",len=1.00];
    student -- grade;
    student -- name2;
    student -- number;
    student -- "S-C" [label="m",len=1.00];
    "S-C" -- course [label="n",len=1.00];
    label = "\n\nEntity Relation Diagram\ndrawn by TWOPI";
}
</graphviz>

Graph image creation requires permission to upload.

Неориентированный граф на circo
<graphviz renderer="circo">
graph Example13{
    node [fontsize=12];
    node [shape=box]; course; institute; student;
    node [shape=ellipse];
    {node [label="name"] name0; name1; name2;}
    code; grade; number;
    node [shape=diamond,style=filled,color=lightgrey];
    "C-I"; "S-C"; "S-I";
    name0 -- course;
    code -- course;
    course -- "C-I" [label="n",len=1.00];
    "C-I" -- institute [label="1",len=1.00];
    institute -- name1;
    institute -- "S-I" [label="1",len=1.00];
    "S-I" -- student [label="n",len=1.00];
    student -- grade;
    student -- name2;
    student -- number;
    student -- "S-C" [label="m",len=1.00];
    "S-C" -- course [label="n",len=1.00];
    label = "\n\nEntity Relation Diagram\ndrawn by CIRCO";
}
</graphviz>

Graph image creation requires permission to upload.

См. также[править]

Ссылки[править]