OK www.nutzpflanzen.de verwendet Cookies. Mit Benutzung dieser Webseite stimmen Sie dem zu. Mehr Informationen dazu.

www.nutzpflanzen.de>Sandbox Web>DirectedGraphExamples

Ansichten

Text

Directed Graph Plugin Examples

Howto
Examples

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)

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)

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)

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)

You get: (if installed)

[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)

You get: (if installed)
DirectedGraphPlugin_2.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

Visualisierung

Daten

Keine Beratung! Und ohne Gewähr! | Das Impressum | Datenschutz

Falls Du Inhalte der Webseite verwenden möchtest, nehme bitte zunächst Kontakt zu den jeweiligen Autoren oder falls nicht erreichbar zum Betreiber auf!

Ideas, requests, problems regarding www.nutzpflanzen.de? Send feedback