Традиция

Шаблон:Graphviz


{{Graphviz}} — шаблон для вывода графов на языке dot с помощью программы GraphViz, использующий функциональность расширения MediaWiki ExternalData.

Параметры:

  1. или dot — описание графа на языке dot. Если в описании присутсвует знак равенства, потребуется использовать синтаксис именованного параметра (1= или dot=). Если имеется символ |, его надо заменить на {{!}},
  • renderer — алгоритм вывода графов: dot, neato, twopi, circo, fdp, osage, patchwork или sfdp.

ПримерыПравить

Примеры
Описание Викитекст Вывод
Простейший пример 
{{graphviz|id=Example1|

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

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

Dot с викиссылками 
{{graphviz|id=Example2|

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

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

Многословные названия узлов в кавычках 
{{graphviz|id=Example3|

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

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

Граф со сложным форматированием на прозрачном фоне 
{{graphviz|1=

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

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

Позиционирование узлов 
{{graphviz|id=Example5|dot=

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

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

Многосекционные узлы 
{{graphviz|id=Example6|dot=

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;
}
}}

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

Кластеры 
{{graphviz|id=Example7|dot=

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;
}
}}

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|id=Example8|dot=

digraph Example8{ rankdir=TB;
    Палитра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]
}
}}

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|id=Example9|dot= 

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

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|id=Example10|renderer=neato|dot= 

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

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|id=Example11|renderer=fdp|dot=

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

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|id=Example12|renderer=twopi|dot=

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

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|id=Example13|renderer=circo|dot=

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

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

Настройки викиПравить

Для работы шаблон требует установки расширения MediaWiki Extension:ExternalData, программы GraphViz и настроек в LocalSettings.php: 

// GraphViz:
$edgExeName         ['graphviz'] = 'GraphViz';
$edgExeUrl          ['graphviz'] = 'https://graphviz.org/';
$edgExeCommand      ['graphviz'] = 'dot -K$layout$ -Tsvg';
$edgExeParams       ['graphviz'] = ['layout' => 'dot'];
$edgExeParamFilters ['graphviz'] = ['layout' => '/^dot|neato|twopi|circo|fdp|osage|patchwork|sfdp$/'];
$edgExeInput        ['graphviz'] = 'dot';
$edgExePreprocess   ['graphviz'] = 'EDConnectorExe::edfWikilinks4dot';
$edgExePostprocess  ['graphviz'] = 'EDConnectorExe::edfExtractSVG';
$edgExeTags         ['graphviz'] = 'graphviz';

СсылкиПравить

Визуализация информации
Области
применения		 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=767060