Sandbox

You are here: Sandbox » DirectedGraphExamples

Directed Graph Plugin Examples

04 July 2024 - 12:53 | Version 2 |

Howto

HowtoDirectedGraphs has a basic howto on creating directed graphs using dot. The below examples show some of the capabilities of the DirectedGraphPlugin

Examples

Cole's example

You type: 

<dot >
digraph G {
    subgraph cluster_c0 {a0 -> a1 -> a2 -> a3}
    subgraph cluster_c1 {
        b0 -> b1 -> b2 -> b3;
        label="Group B";
    }
    x -> a0 [style=dotted];
    x -> b0;
    a1 -> a3 [style=bold, label="a1 to a3"];
    a3 -> a0;
    a0 [shape=box, fontname=Courier, fontsize=11];
    a1 [color=red];
    a3 [label="Label\nfor a3"];
    label="Cole's Example";
}
</dot>
You get: (simulated)
graphsample.png 		You get: (if installed)
DirectedGraphPlugin_1.png diagram

Clientside imagemap (clickable nodes and edges)

You type: 

<dot map="1" size="auto" antialias="on">
digraph G {
    URL="http://foswiki.org";
    Plugins [URL="http://foswiki.org/Extensions"];
    DirectedGraphPlugin [URL="http://foswiki.org/Extensions/DirectedGraphPlugin"];
    Plugins -> DirectedGraphPlugin;
}
</dot>
You get: (simulated)
You get: (if installed)
DirectedGraphPlugin_2.png diagram
You get: (simulated, antialiasing on)
graphsample2_antialiased.png 		You get: (if installed, antialiasing on)
DirectedGraph Error (1): 
Processing .convert -density %DENSITY|N% -geometry %GEOMETRY|S% %INFILE|F% %OUTFILE|F% 

01: digraph G {
02:     URL="http://www.foswiki.org";
03:     Plugins [URL="http://foswiki.org/Extensions/PluginPackage"];
04:     DirectedGraphPlugin [URL="http://foswiki.org/Extensions/DirectedGraphPlugin"];
05:     Plugins → DirectedGraphPlugin;
06: }
07:

Usecase description / state diagram

To view the dot input for this example, click the [dot] link located below the diagram.

You get: (simulated)
usecase_sample.png 		You get: (if installed)
DirectedGraph Error (1): 
Processing .convert -density %DENSITY|N% -geometry %GEOMETRY|S% %INFILE|F% %OUTFILE|F% 

01: digraph G {
02:  size="9";
03:  graph [rankdir="TB" label="1st Time Use/Phone Registration" fontsize=12 bgcolor="#eeeeff"];
04:    node [shape=box fontsize=9];
05:    edge [color=blue fontsize=8 font="Arial"];
06: 
07:    cell_number_entry [label="Cell Number Entry"];
08:    welcome [label="Welcome Page"];
09:    member_name_creation [label="Member Name Creation"];
10:    password_creation [label="Password Creation"];
11:    member_name_unavailable [label="Member Name Unavailable"];
12:    email_entry [label="Email Entry"];
13:    zip_code_entry [label="Zip Code Entry"];
14:    tos [label="TOS"];
15:    decline_confirmation [label="Decline Confirmation"];
16:    registration_confirmation [label="Registration Confirmation"];
17:    member_name_entry [label="Member Name Entry"];
18:    password_entry [label="Password Entry"];
19:    confirm_phone_number [label="Confirm Phone Number"];
20:    unsuccessfull_sign_in [label="Unsuccessfull Sign In"];
21:    email_confirmation [label="Email Confirmation"];
22:    main_menu [label="Main Menu"];
23:    initial_screen [label="Initial Screen"];
24:    exit_application [label="Exit the Application"];
25: 
26:    welcome → initial_screen [label="First Time"]
27:    initial_screen → member_name_creation [label="Register"];
28:    initial_screen → member_name_entry [label="Sign In"];
29:    member_name_creation → password_creation [label="Valid Member Name" dir="both"];
30:    member_name_creation → member_name_unavailable [label="Invalid Member Name" dir="both"];
31:    welcome → password_creation;
32:    password_creation → cell_number_entry [dir="both"];
33:    member_name_entry → password_entry [dir="both"];
34:    cell_number_entry → email_entry [dir="both"];
35:    password_entry → confirm_phone_number [label="Auth. Successful" dir="both"];
36:    password_entry → unsuccessfull_sign_in [label="Auth. Unsuccessful"];
37:    email_entry → zip_code_entry [dir="both"];
38:    zip_code_entry → tos [dir="both"];
39:    confirm_phone_number → main_menu;
40:    unsuccessfull_sign_in → member_name_entry [label="Try Again" constraint="false"];
41:    unsuccessfull_sign_in → email_confirmation;
42:    tos → decline_confirmation [label="Decline" dir="both"];
43:    tos → registration_confirmation [label="Accept"];
44:    decline_confirmation → exit_application [label="Yes"];
45:    registration_confirmation → main_menu [label="10 Sec/NEXT"]; 
46: }
47:

Component architecture (inline SVG)

This is a typical example of a component architecture drawing (This kind of graph is also easy to do in Foswiki:Extensions.JHotDrawPlugin if you like the look but you prefer to draw it manually using your mouse).

Click the [dot] link located below the diagram to view the input. Note that this example is an inline SVG with fallback to PNG

You get: (simulated)
sample_component_architecture.png
You get: (if installed)
DirectedGraphPlugin_3.svg diagram
[png] [dot]

Simple LAN setup (custom icons / shapefiles)

This type of graph can also easily be extended, for instance making network nodes clickable, pointing to asset databases or similar.

Click the [dot] link below the diagram to view the input.

You get: (simulated)
sample_simple_lan_setup.png 		You get: (if installed)
DirectedGraphPlugin_4.png diagram
[dot] 		You get: (if installed, antialiased)
DirectedGraph Error (1): 
Processing .convert -density %DENSITY|N% -geometry %GEOMETRY|S% %INFILE|F% %OUTFILE|F% 

01: digraph G { size="2,3!"; dpi="100";
02:     edge [arrowhead=none color=blue];
03:     node [fontcolor=blue color=white];
04: 
05:     Workstation [shapefile="Sun_Workstation.jpg"];
06:     Printer [shapefile="Printer.jpg"];
07:     Internet [shapefile="Cloud-Filled.jpg"];
08:     Router [shapefile="Wireless_Router.jpg"];
09:     Switch [shapefile="Workgroup_Switch.jpg"];
10:     Laptop [shapefile="Laptop.jpg"];
11: 
12:     Workstation → Switch;
13:     Printer → Switch;
14:     Switch → Router;
15:     Router → Internet;
16:     Laptop → Router [style=dotted];
17: }
18:

Related Topics: HowtoDirectedGraphs

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding arbeitsgruppe.ch? Send feedback
This page was cached on 11 Jan 2026 - 23:59.