Page tree
Skip to end of metadata
Go to start of metadata

Graphviz

Introduction

Graphviz is a language used to describe drawings and diagrams. This page describes the use of the Graphviz language within the {graphviz} and {flowchart} macros in Confluence.

The graphviz language is not unique to Confluence. Although there are sections on the graphviz macro in the

, your best references (other than this page) for the supported options and syntax are:

Flowchart Macro

The {flowchart} macro provides a simple means of drawing a flow chart that more or less matches the look and feel of Confluence. Within the flowchart macro, you draw nodes by simply listing them on a line, as in:

Unknown macro: {flowchart}

Word
"A Phrase"

 매크로코드
{flowchart}
Word
"A Phrase"
{flowchart}

Relationships between nodes are represented using textual arrows:

Unknown macro: {flowchart}

"Step One"->"Step Two"
Love->Marriage

 매크로코드
{flowchart}
"Step One"->"Step Two"
Love->Marriage
{flowchart}

Relationships can be multiple, and can be specified in any order (graphviz will make sense of it):

Unknown macro: {flowchart}

D->A
B->C
A->B
C->D
B->D

 매크로코드
{flowchart}
D->A
B->C
A->B
C->D
B->D
{flowchart}

Graphviz Macro

The {graphviz} macro uses the same basic notation as the {flowchart} macro, but offers access to the full range of graphviz options. As you will see in the following examples, you have an awful lot of control when using the {graphviz} macro.

Basic Usage

In order to draw a graph like the ones pictured above, all you need to do is add the digraph construct to the contents of the previous example, as in:

Unknown macro: {graphviz}

digraph {
D->A
B->C
A->B
C->D
B->D
}

 매크로코드
{graphviz}
digraph {
D->A
B->C
A->B
C->D
B->D
}
{graphviz}

Note that the default node shape is different that the {flowchart} macro.

Setting graph options

You can control the graph orientation node shape, size, color from the header block within the digraph section, as in:

Unknown macro: {graphviz}

digraph

Unknown macro: {graph [ label="Diagram with more advanced formatting...", rankdir=LR];node [shape=trapezium, color=blue, style=filled, fillcolor="#ccccff", height=0.10, nodesep=0.10, fontsize=24, fontcolor="#000099"];{rank=same; B C; }

D->A
B->C
A->B
C->D
B->D
}

 매크로코드
{graphviz}
digraph {
graph [ label="Diagram with more advanced formatting...", rankdir=LR];
node [shape=trapezium, color=blue, style=filled, fillcolor="#ccccff", height=0.10, nodesep=0.10, fontsize=24, fontcolor="#000099"];
{rank=same; B C; }
D->A
B->C
A->B
C->D
B->D
}
{graphviz}

Note that the rank must come after the general graph and node options, otherwise ranked nodes will not inherit the formatting.

Setting node or relationship options

This example shows you an additional line style, labeling connections and how to override default for a single node or relationship:

Unknown macro: {graphviz}

digraph {
node [shape=trapezium, color=blue, style=filled, fillcolor="#ccccff", height=0.10, nodesep=0.10, fontsize=24, fontcolor="#000099"];
D->A
B->C [dir=none]
A->B [label="stop soon", labelloc=c]
C->D
B->D

B [shape=octagon, color=black, style=filled, fillcolor="#ff0000", fontcolor=white, label="STOP"]
}

 매크로코드
{graphviz}
digraph {
node [shape=trapezium, color=blue, style=filled, fillcolor="#ccccff", height=0.10, nodesep=0.10, fontsize=24, fontcolor="#000099"];
D->A
B->C [dir=none]
A->B [label="stop soon", labelloc=c]
C->D
B->D

B [shape=octagon, color=black, style=filled, fillcolor="#ff0000", fontcolor=white, label="STOP" ]
}
{graphviz}

Multi-line labels

Although you can't have an automatic word wrap for node labels, you can insert one or more manual breaks:

Unknown macro: {graphviz}

digraph {
node [shape=rect]
"This\nWorks\nright down the centre."
"We can also put long text\lon the left\las well as the\rright.\r"
}

 매크로코드
{graphviz}
digraph {
node [shape=rect]
"This\nWorks\nright down the centre."
"We can also put long text\lon the left\las well as the\rright.\r"
}
{graphviz}

Linking

This example shows you how to create links from individual nodes to URLS:

Unknown macro: {graphviz}

digraph

Unknown macro: {{rank=same; Confluence "UHI Libraries"}

UHI [URL="http://www.uhi.ac.uk"]
"UHI Libraries" [URL="http://www.library.uhi.ac.uk/" ]
"Confluence" [URL="http://tracker.uhi.ac.uk/confluence/"]
"My Confluence Home Page" [URL="/confluence/x/FYAF"]
UHI->"UHI Libraries";
UHI->Confluence
Confluence->"My Confluence Home Page"
"UHI Libraries"->Confluence [label="clickable label", URL="http://www.bbc.co.uk/", labelloc=b, dir=none]
}

 매크로코드
{graphviz}
digraph {
{rank=same; Confluence "UHI Libraries"}

UHI [URL="http://www.uhi.ac.uk"]
"UHI Libraries" [URL="http://www.library.uhi.ac.uk/" ]
"Confluence" [URL="http://tracker.uhi.ac.uk/confluence/"]
"My Confluence Home Page" [URL="/confluence/x/FYAF"]
UHI->"UHI Libraries";
UHI->Confluence
Confluence->"My Confluence Home Page"
"UHI Libraries"->Confluence [label="clickable label", URL="http://www.bbc.co.uk/", labelloc=b, dir=none]
}
{graphviz}

Note that if you want to link to a page within Confluence, you'll get the best results using the persistent URL found on the "Info" tab.

Subgraphs

Subgraphs are useful in breaking down complex diagrams into sensible chunks. This example shows you how to use subgraphs (note that you must name them cluster_0, cluster_1, etc.):

Unknown macro: {graphviz}

digraph {
graph [bgcolor="#000000"];
edge [color="#00ff00"];

node [ shape=rect, style="filled,rounded" ];

subgraph cluster_0 {
graph [ style=filled, fillcolor="#cccccc"];
node [ color="#ff0000", fillcolor="#ffcccc" ];
edge [color="#ff0000"];
label="Our Section";
"Our Section Head"->Me

"Our Section Head"->"Coworker 1"
"Our Section Head"->"Coworker 2"
}
subgraph cluster_1 {
graph [ style=filled, fillcolor="#999999"];
node [ color="#ffff00", fillcolor="#ffffcc" ];
edge [color="#ffff00"];
label="Another Section";
"External Section Head"->"External Coworker 1"
"External Section Head"->"External Coworker 2"
}

"The Big Boss"->"Our Section Head"
"The Big Boss"->"External Section Head"

"The Big Boss" [shape=tripleoctagon, style=filled, color="#00ff00", fillcolor="#ccffcc"];
}

 매크로코드
{graphviz}
digraph {
graph [bgcolor="#000000"];
edge [color="#00ff00"];

node [ shape=rect, style="filled,rounded" ];

subgraph cluster_0 {
graph [ style=filled, fillcolor="#cccccc"];
node [ color="#ff0000", fillcolor="#ffcccc" ];
edge [color="#ff0000"];
label="Our Section";
"Our Section Head"->Me


"Our Section Head"->"Coworker 1"
"Our Section Head"->"Coworker 2"
}
subgraph cluster_1 {
graph [ style=filled, fillcolor="#999999"];
node [ color="#ffff00", fillcolor="#ffffcc" ];
edge [color="#ffff00"];
label="Another Section";
"External Section Head"->"External Coworker 1"
"External Section Head"->"External Coworker 2"
}

"The Big Boss"->"Our Section Head"
"The Big Boss"->"External Section Head"

"The Big Boss" [shape=tripleoctagon, style=filled, color="#00ff00", fillcolor="#ccffcc"];
}
{graphviz}

  • No labels