<graphviz>

Материал из свободной русской энциклопедии «Традиция»
Перейти к навигации Перейти к поиску
Nuvola apps important yellow.svg
 Внимание!
Вместо прямого использования тега <graphviz> рекомендуется использовать шаблон {{graphviz}}.
GraphViz, External data (расширение MediaWiki)
<graphviz>
Тэг MediaWiki
Описание:
Позволяет внедрять графы
Автор:
Параметры:
format:
gif, jpg, jpeg, png (по умолчанию) или svg
uniquifier:
уникальный, в пределах страницы, идентификатор
layout:
dot (по умолчанию), neato, fdp, sfdp, circo или twopi
Возвращает:
Граф
Синтаксис:
<graphviz format="gif, jpg, jpeg, png (по умолчанию) или svg" uniquifier="уникальный, в пределах страницы, идентификатор" layout="dot (по умолчанию), neato, fdp, sfdp, circo или twopi">описание графа на языке dot</graphviz>
Написание статей Написание статей
Тематические статьи
Техническая справка
Общие правила

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

<graphviz> — предоставляемый расширением GraphViz или External data тег 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>

Example1 Зачатие Зачатие Рождение Рождение Зачатие->Рождение Аборт Аборт Зачатие->Аборт Юность Юность Рождение->Юность Зрелость Зрелость Юность->Зрелость Смерть Смерть Юность->Смерть Старость Старость Зрелость->Старость Зрелость->Смерть Старость->Смерть Аборт->Смерть

Dot с викиссылками 
<graphviz>

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

Example2 Зачатие Зачатие Рождение Рождение Зачатие->Рождение Аборт Аборт Зачатие->Аборт Юность Юность Рождение->Юность Зрелость Зрелость Юность->Зрелость Смерть Смерть Юность->Смерть Старость Старость Зрелость->Старость Зрелость->Смерть Старость->Смерть Аборт->Смерть

Многословные названия узлов в кавычках 
<graphviz>

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

Example3 Полёт фантазии Полёт фантазии Расход горючего Расход горючего Полёт фантазии->Расход горючего

Граф со сложным форматированием на прозрачном фоне 
<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>

Example4 OPEN OPEN CLOSED Финиш OPEN->CLOSED RESOLVED RESOLVED OPEN->RESOLVED VERIFIED VERIFIED VERIFIED->OPEN обнаружены ошибки VERIFIED->CLOSED RESOLVED->VERIFIED

Позиционирование узлов 
<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>

Example5 март март июнь июнь март->июнь сентябрь сентябрь июнь->сентябрь декабрь декабрь сентябрь->декабрь весна весна лето лето весна->лето a a b b a->b осень осень лето->осень зима зима осень->зима d d e e d->e зима->весна c c b->c c->d

Многосекционные узлы 
<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>

Example6 first x1 all x21 x22 x23 x3 second x22_1 x22_2 x22_3 first:f0->second

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

Example7 cluster0 process #1 cluster1 process #2 a0 a0 a1 a1 a0->a1 end end a1->end b0 b0 b0->end start start start->a0 start->b0

Палитра, оптимизированная для чёрно-белой печати 
<graphviz>

digraph Example8{ rankdir=TB; size="7,6";

    Палитра1->goldenrod [color=goldenrod]
    Палитра1->green [color=green]
    Палитра1->sienna [color=sienna]
    Палитра1->red [color=red]
    Палитра1->blue [color=blue]

    Палитра2->lightcyan [color=lightcyan]
    Палитра2->pink [color=pink]
    Палитра2->green [color=green]
    Палитра2->sienna [color=sienna]
    Палитра2->red [color=red]
    Палитра2->black [color=black]
}
</graphviz>

Example8 Палитра1 Палитра1 goldenrod goldenrod Палитра1->goldenrod green green Палитра1->green sienna sienna Палитра1->sienna red red Палитра1->red blue blue Палитра1->blue Палитра2 Палитра2 Палитра2->green Палитра2->sienna Палитра2->red lightcyan lightcyan Палитра2->lightcyan pink pink Палитра2->pink black black Палитра2->black

Неориентированный граф на 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>

Example9 Entity Relation Diagram drawn by DOT course course C-I C-I course—C-I n institute institute name1 name institute—name1 S-I S-I institute—S-I 1 student student name2 name student—name2 grade grade student—grade number number student—number S-C S-C student—S-C m name0 name name0—course code code code—course C-I—institute 1 S-C—course n S-I—student n

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

<graphviz layout="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>

Example10 Entity Relation Diagram drawn by NEATO course course C-I C-I course—C-I n institute institute name1 name institute—name1 S-I S-I institute—S-I 1 student student name2 name student—name2 grade grade student—grade number number student—number S-C S-C student—S-C m name0 name name0—course code code code—course C-I—institute 1 S-C—course n S-I—student n

Неориентированный граф на fdp 
<graphviz layout="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>

Example11 Entity Relation Diagram drawn by FDP course course C-I C-I course—C-I n institute institute name1 name institute—name1 S-I S-I institute—S-I 1 student student name2 name student—name2 grade grade student—grade number number student—number S-C S-C student—S-C m name0 name name0—course code code code—course C-I—institute 1 S-C—course n S-I—student n

Неориентированный граф на twopi 
<graphviz layout="twopi">

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>

Example12 Entity Relation Diagram drawn by TWOPI course course C-I C-I course—C-I n institute institute name1 name institute—name1 S-I S-I institute—S-I 1 student student name2 name student—name2 grade grade student—grade number number student—number S-C S-C student—S-C m name0 name name0—course code code code—course C-I—institute 1 S-C—course n S-I—student n

Неориентированный граф на circo 
<graphviz layout="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>

Example13 Entity Relation Diagram drawn by CIRCO course course C-I C-I course—C-I n institute institute name1 name institute—name1 S-I S-I institute—S-I 1 student student name2 name student—name2 grade grade student—grade number number student—number S-C S-C student—S-C m name0 name name0—course code code code—course C-I—institute 1 S-C—course n S-I—student n

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

Визуализация информации
Области
применения		 Biological data visualization • Chemical imaging • Crime mapping • Data visualization • Educational visualization • Flow visualization • Geovisualization • Information visualization • Mathematical visualization • Vtlbwbycrfz dbpefkbpfwbz • Molecular graphics • Product visualization • Научное моделирование • Software visualization • Техническое черчение • Volume visualization
Способы
визуализации		 Рисунок • Чертёж • Макет • Chart • Компьютерная графика • Диаграмма • График функции • Инженерная графика • Идеограмма • Инфографика • Карта • Фотография • Пиктограмма • График • Statistical graphics • Таблица • Technical drawings • Психология зрительного восприятия • Technical illustration • Mind Map
Программное
обеспечение		 Apache ECharts • GrahViz • mscgen • PlantUML • ploticus • gnuplot • Vega (средство визуализации)
В Традиции {{bpmn}} • {{echarts}} • {{graphviz}} • {{mscgen}} • {{plantuml}} • {{mindmap}} • {{graph}} • {{mermaid}} • {{gnuplot}}
Связанные
темы		 Модель • Научное моделирование • Картография • Компьютерная графика • Graph drawing • Graphic design • Imaging science • Information science • Mental visualisation • Neuroimaging • Spatial analysis • Visual analytics • Зрительное восприятие • Коммутативная диаграмма • ТП:Оптика, свет и цвет • Категория:Зрение
Источник — https://traditio.wiki/w/index.php?title=Справка:Graphviz&oldid=879649