I have created a very basic Graphviz flow chart and want to add hyperlinks for my users to click on text within a box to jump to a wiki section with this data (e.g. Use SQL CODE to gather data...where SQL CODE jumps to a different section of the wiki).

I hope I posted a picture at the end from their instructions and below is the simple code to create that flow. What I'd like to do is something like, where it says "decision shape," make the "shape" word something like: <a href="https://something" target=_blank>shape</a> and have it appear like any other hyperlink in the graphic. Is that possible? I read on node shapes in the wiki but I'm not clear and was looking for examples for below. Thanks!

# Box Definition
start    [label="Start Here",            style=rounded]
step1    [label="Step1\n line break"]
step2    [label="different fill",        fillcolor=cyan]
step3    [label="decision shape",        shape="diamond"]
step3a   [label="sub-step3-A\n no fill", style=""]
step3b   [label="input shape",           shape="parallelogram"]
end      [style=rounded]

# Flow
start -> step1 -> step2 -> step3
step3 -> step3a [label=yes]
step3 -> step3b [label=no]
step3a -> end

# box ranking (ie, placed at same horizontal)
{ rank=same; step1 step2 step3}

------------------------ Hopefully I have posted a picture next -------------------

I have created a very basic Graphviz flow chart and want to add hyperlinks for my users to click on text within a box to jump to a wiki section with this data (e.g. Use SQL CODE to gather data...where SQL CODE jumps to a different section of the wiki).

I hope I posted a picture at the end from their instructions and below is the simple code to create that flow. What I'd like to do is something like, where it says "decision shape," make the "shape" word something like: <a href="https://something" target=_blank>shape</a> and have it appear like any other hyperlink in the graphic. Is that possible? I read on node shapes in the wiki but I'm not clear and was looking for examples for below. Thanks!

# Box Definition
start    [label="Start Here",            style=rounded]
step1    [label="Step1\n line break"]
step2    [label="different fill",        fillcolor=cyan]
step3    [label="decision shape",        shape="diamond"]
step3a   [label="sub-step3-A\n no fill", style=""]
step3b   [label="input shape",           shape="parallelogram"]
end      [style=rounded]

# Flow
start -> step1 -> step2 -> step3
step3 -> step3a [label=yes]
step3 -> step3b [label=no]
step3a -> end

# box ranking (ie, placed at same horizontal)
{ rank=same; step1 step2 step3}

------------------------ Hopefully I have posted a picture next -------------------

• hyperlink
• graphviz
• flowchart

2 Answers 2

The URL attribute does what you want. Here is an example from the Graphviz website - remember that it only works for these output formats: ps2, cmap, i*map and svg

graph {
  label="Vincent van Gogh Paintings"
  URL="https://en.wikipedia./wiki/Vincent_van_Gogh"

  subgraph cluster_self_portraits {
    URL="https://en.wikipedia./wiki/Portraits_of_Vincent_van_Gogh"
    label="Self-portraits"

    "Self-Portrait with Grey Felt Hat" [URL="https://www.vangoghmuseum.nl/en/collection/s0016V1962"]
    "Self-Portrait as a Painter" [URL="https://www.vangoghmuseum.nl/en/collection/s0022V1962"]
  }
  
  subgraph cluster_flowers {
    URL="https://en.wikipedia./wiki/Sunflowers_(Van_Gogh_series)"
    label="Flowers"

    "Sunflowers" [URL="https://www.nationalgallery..uk/paintings/vincent-van-gogh-sunflowers"]
    "Almond Blossom" [URL="https://www.vangoghmuseum.nl/en/collection/s0176V1962"]
  }
}

Here is a crude way to add links to parts of a label

graph h {
  a [shape=plain label=<<table cellborder="0" cellpadding="0" cellspacing="0" ><tr><td>Before</td><td href="https://en.wikipedia./wiki/Sunflowers_(Van_Gogh_series)"> ouch </td><td>after</td></tr></table>>]
}