Home Was gibt es Neues? Erste Schritte Online Server Running F.A.Q. Download Forum Theme Vorverarbeitung Standard Bibliothek Hitchhiker's Guide PDF Leitfaden
PlantUML Language specification nwdiag

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Netzwerkdiagramm mit nwdiag

Ein Netzwerkdiagramm ist eine visuelle Darstellung eines Computer- oder Telekommunikationsnetzwerks. Es veranschaulicht die Anordnung und Zusammenschaltung von Netzwerkkomponenten, einschließlich Servern, Routern, Switches, Hubs und Geräten. Netzwerkdiagramme sind für Netzwerktechniker und -administratoren von unschätzbarem Wert, um Netzwerke zu verstehen, einzurichten und Fehler zu beheben. Sie sind auch für die Visualisierung der Struktur und des Datenflusses in einem Netzwerk unerlässlich, um eine optimale Leistung und Sicherheit zu gewährleisten.

nwdiag, entwickelt von Takeshi Komiya, bietet eine optimierte Plattform zum schnellen Zeichnen von Netzwerkdiagrammen. Wir danken Takeshi für dieses innovative Werkzeug!

Aufgrund seiner intuitiven Syntax wurde nwdiag nahtlos in PlantUML integriert. Die hier gezeigten Beispiele sind von den von Takeshi dokumentierten Beispielen inspiriert.

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Einfaches Diagramm

Definieren Sie ein Netzwerk

🎉 Copied! 

@startuml
nwdiag {
  network dmz {
      address = "210.x.x.x/24"
  }
}
@enduml

Definieren Sie einige Elemente oder Server in einem Netzwerk

🎉 Copied! 

@startuml
nwdiag {
  network dmz {
      address = "210.x.x.x/24"

      web01 [address = "210.x.x.1"];
      web02 [address = "210.x.x.2"];
  }
}
@enduml

Vollständiges Beispiel

🎉 Copied! 

@startuml
nwdiag {
  network dmz {
      address = "210.x.x.x/24"

      web01 [address = "210.x.x.1"];
      web02 [address = "210.x.x.2"];
  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01;
      db02;
  }
}
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Definieren Sie mehrere Adressen

🎉 Copied! 

@startuml
nwdiag {
  network dmz {
      address = "210.x.x.x/24"

      // set multiple addresses (using comma)
      web01 [address = "210.x.x.1, 210.x.x.20"];
      web02 [address = "210.x.x.2"];
  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01;
      db02;
  }
}
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Knoten gruppieren

Gruppe innerhalb von Netzwerkdefinitionen definieren

🎉 Copied! 

@startuml
nwdiag {
  network Sample_front {
    address = "192.168.10.0/24";

    // define group
    group web {
      web01 [address = ".1"];
      web02 [address = ".2"];
    }
  }
  network Sample_back {
    address = "192.168.20.0/24";
    web01 [address = ".1"];
    web02 [address = ".2"];
    db01 [address = ".101"];
    db02 [address = ".102"];

    // define network using defined nodes
    group db {
      db01;
      db02;
    }
  }
}
@enduml

Gruppe außerhalb von Netzwerkdefinitionen definieren

🎉 Copied! 

@startuml
nwdiag {
  // define group outside of network definitions
  group {
    color = "#FFAAAA";

    web01;
    web02;
    db01;
  }

  network dmz {
    web01;
    web02;
  }
  network internal {
    web01;
    web02;
    db01;
    db02;
  }
}
@enduml

Mehrere Gruppen im selben Netzwerk definieren

Beispiel mit 2 Gruppen

🎉 Copied! 

@startuml
nwdiag {
  group {
    color = "#FFaaaa";
    web01;
    db01;
  }
  group {
    color = "#aaaaFF";
    web02;
    db02;
  }
  network dmz {
      address = "210.x.x.x/24"

      web01 [address = "210.x.x.1"];
      web02 [address = "210.x.x.2"];
  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01 ;
      db02 ;
  }
}
@enduml

[Ref. QA-12663]

Beispiel mit 3 Gruppen

🎉 Copied! 

@startuml
nwdiag {
  group {
    color = "#FFaaaa";
    web01;
    db01;
  }
  group {
    color = "#aaFFaa";
    web02;
    db02;
  }
  group {
    color = "#aaaaFF";
    web03;
    db03;
  }

  network dmz {
      web01;
      web02;
      web03;
  }
  network internal {
      web01;
      db01 ;
      web02;
      db02 ;
      web03;
      db03;
  }
}
@enduml

[Ref. QA-13138]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Extended Syntax (for network or group)

Network

For network or network's component, you can add or change:
  • addresses (separated by comma ,);
  • color;
  • description;
  • shape.

🎉 Copied! 

@startuml
nwdiag {
  network Sample_front {
    address = "192.168.10.0/24"
    color = "red"

    // define group
    group web {
      web01 [address = ".1, .2", shape = "node"]
      web02 [address = ".2, .3"]
    }
  }
  network Sample_back {
    address = "192.168.20.0/24"
    color = "palegreen"
    web01 [address = ".1"]
    web02 [address = ".2"]
    db01 [address = ".101", shape = database ]
    db02 [address = ".102"]

    // define network using defined nodes
    group db {
      db01;
      db02;
    }
  }
}
@enduml

Group

For a group, you can add or change:

🎉 Copied! 

@startuml
nwdiag {
  group {
    color = "#CCFFCC";
    description = "Long group description";

    web01;
    web02;
    db01;
  }

  network dmz {
    web01;
    web02;
  }
  network internal {
    web01;
    web02;
    db01 [address = ".101", shape = database];
  }
}
@enduml

[Ref. QA-12056]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Using Sprites

You can use all sprites (icons) from the Standard Library or any other library.

Use the notation <$sprite> to use a sprite, \n to make a new line, or any other Creole syntax.

🎉 Copied! 

@startuml
!include <office/Servers/application_server>
!include <office/Servers/database_server>

nwdiag {
  network dmz {
      address = "210.x.x.x/24"

      // set multiple addresses (using comma)
      web01 [address = "210.x.x.1, 210.x.x.20",  description = "<$application_server>\n web01"]
      web02 [address = "210.x.x.2",  description = "<$application_server>\n web02"];
  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01 [address = "172.x.x.100",  description = "<$database_server>\n db01"];
      db02 [address = "172.x.x.101",  description = "<$database_server>\n db02"];
  }
}
@enduml

[Ref. QA-11862]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Using OpenIconic

You can also use the icons from OpenIconic in network or node descriptions.

Use the notation <&icon> to make an icon, <&icon*n> to multiply the size by a factor n, and \n to make a newline:

🎉 Copied! 

@startuml

nwdiag {
  group nightly {
    color = "#FFAAAA";
    description = "<&clock> Restarted nightly <&clock>";
    web02;
    db01;
  }
  network dmz {
      address = "210.x.x.x/24"

      user [description = "<&person*4.5>\n user1"];
      // set multiple addresses (using comma)
      web01 [address = "210.x.x.1, 210.x.x.20",  description = "<&cog*4>\nweb01"]
      web02 [address = "210.x.x.2",  description = "<&cog*4>\nweb02"];

  }
  network internal {
      address = "172.x.x.x/24";

      web01 [address = "172.x.x.1"];
      web02 [address = "172.x.x.2"];
      db01 [address = "172.x.x.100",  description = "<&spreadsheet*4>\n db01"];
      db02 [address = "172.x.x.101",  description = "<&spreadsheet*4>\n db02"];
      ptr  [address = "172.x.x.110",  description = "<&print*4>\n ptr01"];
  }
}
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Same nodes on more than two networks

You can use same nodes on different networks (more than two networks); nwdiag use in this case 'jump line' over networks.

🎉 Copied! 

@startuml
nwdiag {
  // define group at outside network definitions
  group {
    color = "#7777FF";

    web01;
    web02;
    db01;
  }

  network dmz {
    color = "pink"

    web01;
    web02;
  }

  network internal {
    web01;
    web02;
    db01 [shape = database ];
  }

  network internal2 {
    color = "LightBlue";

    web01;
    web02;
    db01;
  }

}
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Peer-Netzwerke

Peer-Netzwerke sind einfache Verbindungen zwischen zwei Knoten, für die wir kein horizontales "Stromschienennetz" verwenden

🎉 Copied! 

@startuml
nwdiag {
  inet [shape = cloud];
  inet -- router;

  network {
    router;
    web01;
    web02;
  }
}
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Peer networks and group

Without group

🎉 Copied! 

@startuml
nwdiag {
    internet [ shape = cloud];
    internet -- router;

    network proxy {
        router;
        app;
    }
    network default {
    	app;
        db;
    }
}
@enduml

Group on first

🎉 Copied! 

@startuml
nwdiag {
    internet [ shape = cloud];
    internet -- router;

    group {
      color = "pink";
      app;
      db;
    }

    network proxy {
        router;
        app;
    }

    network default {
    	app;
        db;
    }
}
@enduml

Group on second

🎉 Copied! 

@startuml
nwdiag {
    internet [ shape = cloud];
    internet -- router;

    network proxy {
        router;
        app;
    }

    group {
      color = "pink";
      app;
      db;
    }

    network default {
    	app;
        db;
    }
}
@enduml

Group on third

🎉 Copied! 

@startuml
nwdiag {
    internet [ shape = cloud];
    internet -- router;

    network proxy {
        router;
        app;
    }
    network default {
    	app;
        db;
    }
    group {
      color = "pink";
      app;
      db;
    }
}
@enduml

[Ref. Issue#408 and QA-12655]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Add title, caption, header, footer or legend on network diagram

🎉 Copied! 

@startuml

header some header

footer some footer

title My title

nwdiag {
  network inet {
      web01 [shape = cloud]
  }
}

legend
The legend
end legend

caption This is caption
@enduml

[Ref. QA-11303 and Common commands]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
With or without shadow

With shadow (by default)

🎉 Copied! 

@startuml
nwdiag {
  network nw {
    server;
    internet;
  }
  internet [shape = cloud];
}
@enduml

Without shadow

🎉 Copied! 

@startuml
<style>
root {
 shadowing 0
}
</style>
nwdiag {
  network nw {
    server;
    internet;
  }
  internet [shape = cloud];
}
@enduml

[Ref. QA-14516]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Change width of the networks

You can change the width of the networks, especially in order to have the same full width for only some or all networks.

Here are some examples, with all the possibilities.

First example

  • without

🎉 Copied! 

@startuml
nwdiag {
  network NETWORK_BASE {
   dev_A [address = "dev_A" ]
   dev_B [address = "dev_B" ]
  }
  network IntNET1 {
   dev_B [address = "dev_B1" ]
   dev_M [address = "dev_M1" ]
  }
  network IntNET2 {
   dev_B [address = "dev_B2" ]
   dev_M [address = "dev_M2" ]
 }
}
@enduml

  • only the first

🎉 Copied! 

@startuml
nwdiag {
  network NETWORK_BASE {
   width = full
   dev_A [address = "dev_A" ]
   dev_B [address = "dev_B" ]
  }
  network IntNET1 {
   dev_B [address = "dev_B1" ]
   dev_M [address = "dev_M1" ]
  }
  network IntNET2 {
   dev_B [address = "dev_B2" ]
   dev_M [address = "dev_M2" ]
 }
}
@enduml

  • the first and the second

🎉 Copied! 

@startuml
nwdiag {
  network NETWORK_BASE {
   width = full
   dev_A [address = "dev_A" ]
   dev_B [address = "dev_B" ]
  }
  network IntNET1 {
   width = full
   dev_B [address = "dev_B1" ]
   dev_M [address = "dev_M1" ]
  }
  network IntNET2 {
   dev_B [address = "dev_B2" ]
   dev_M [address = "dev_M2" ]
 }
}
@enduml

  • all the network (with same full width)

🎉 Copied! 

@startuml
nwdiag {
  network NETWORK_BASE {
   width = full
   dev_A [address = "dev_A" ]
   dev_B [address = "dev_B" ]
  }
  network IntNET1 {
   width = full
   dev_B [address = "dev_B1" ]
   dev_M [address = "dev_M1" ]
  }
  network IntNET2 {
   width = full
   dev_B [address = "dev_B2" ]
   dev_M [address = "dev_M2" ]
 }
}
@enduml

Second example

  • without

🎉 Copied! 

@startuml
nwdiag {
  e1
  network n1 {
    e1
    e2
    e3
  }

  network n2 {
    e3
    e4
    e5
  }

  network n3 {
    e2
    e6
  }
}
@enduml

  • only the first

🎉 Copied! 

@startuml
nwdiag {
  e1
  network n1 {
    width = full
    e1
    e2
    e3
  }

  network n2 {
    e3
    e4
    e5
  }

  network n3 {
    e2
    e6
  }
}
@enduml

  • the first and the second

🎉 Copied! 

@startuml
nwdiag {
  e1
  network n1 {
    width = full
    e1
    e2
    e3
  }

  network n2 {
    width = full
    e3
    e4
    e5
  }

  network n3 {
    e2
    e6
  }
}
@enduml

  • all the network (with same full width)

🎉 Copied! 

@startuml
nwdiag {
  e1
  network n1 {
    width = full
    e1
    e2
    e3
  }

  network n2 {
    width = full
    e3
    e4
    e5
  }

  network n3 {
    width = full
    e2
    e6
  }
}
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Other internal networks

You can define other internal networks (TCP/IP, USB, SERIAL,...).

  • Without address or type

🎉 Copied! 

@startuml
nwdiag {
  network LAN1 {
     a [address = "a1"];
  }
  network LAN2 {
     a [address = "a2"];
     switch;
  }
  switch -- equip;
  equip -- printer;
}
@enduml

  • With address or type

🎉 Copied! 

@startuml
nwdiag {
  network LAN1 {
     a [address = "a1"];
  }
  network LAN2 {
     a [address = "a2"];
     switch [address = "s2"];
  }
  switch -- equip;
  equip [address = "e3"];
  equip -- printer;
  printer [address = "USB"];
}
@enduml

[Ref. QA-12824]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Using (global) style

Without style (by default)

🎉 Copied! 

@startuml
nwdiag {
  network DMZ {
      address = "y.x.x.x/24"
      web01 [address = "y.x.x.1"];
      web02 [address = "y.x.x.2"];
  }

   network Internal {
    web01;
    web02;
    db01 [address = "w.w.w.z", shape = database];
  } 

    group {
    description = "long group label";
    web01;
    web02;
    db01;
  }
}
@enduml

With style

You can use style to change rendering of elements.

🎉 Copied! 

@startuml
<style>
nwdiagDiagram {
  network {
    BackGroundColor green
    LineColor red
    LineThickness 1.0
    FontSize 18
    FontColor navy
  }
  server {
    BackGroundColor pink
    LineColor yellow
    LineThickness 1.0
    ' FontXXX only for description or label
    FontSize 18
    FontColor #blue
  }
  arrow {
    ' FontXXX only for address 
    FontSize 17
    FontColor #red
    FontName Monospaced
    LineColor black
  }
  group {
    BackGroundColor cadetblue
    LineColor black
    LineThickness 2.0
    FontSize 11
    FontStyle bold
    Margin 5
    Padding 5
  }
}
</style>
nwdiag {
  network DMZ {
      address = "y.x.x.x/24"
      web01 [address = "y.x.x.1"];
      web02 [address = "y.x.x.2"];
  }

   network Internal {
    web01;
    web02;
    db01 [address = "w.w.w.z", shape = database];
  } 

    group {
    description = "long group label";
    web01;
    web02;
    db01;
  }
}
@enduml

[Ref. QA-14479]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Appendix: Test of all shapes on Network diagram (nwdiag)

🎉 Copied! 

@startuml
nwdiag {
  network Network {
    Actor       [shape = actor]       
    Agent       [shape = agent]       
    Artifact    [shape = artifact]    
    Boundary    [shape = boundary]    
    Card        [shape = card]        
    Cloud       [shape = cloud]       
    Collections [shape = collections] 
    Component   [shape = component]   
  }
}
@enduml

🎉 Copied! 

@startuml
nwdiag {
  network Network {
    Control     [shape = control]     
    Database    [shape = database]    
    Entity      [shape = entity]      
    File        [shape = file]        
    Folder      [shape = folder]      
    Frame       [shape = frame]       
    Hexagon     [shape = hexagon]     
    Interface   [shape = interface]   
  }
}
@enduml

🎉 Copied! 

@startuml
nwdiag {
  network Network {
    Label       [shape = label]       
    Node        [shape = node]        
    Package     [shape = package]     
    Person      [shape = person]      
    Queue       [shape = queue]       
    Stack       [shape = stack]       
    Rectangle   [shape = rectangle]   
    Storage     [shape = storage]     
    Usecase     [shape = usecase]     
  }
}
@enduml

FIXME
  1. Overlap of label for folder
  2. Hexagon shape is missing

🎉 Copied! 

@startuml
nwdiag {
network Network {
Folder [shape = folder]
Hexagon [shape = hexagon]
}
}
@enduml

🎉 Copied! 

@startuml
nwdiag {
network Network {
Folder [shape = folder, description = "Test, long long label\nTest, long long label"]
Hexagon [shape = hexagon, description = "Test, long long label\nTest, long long label"]
}
}
@enduml

FIXME

Privacy Policy      Advertise