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
[dot] [png]

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