Un
diagramme de réseau est une représentation visuelle d'un réseau informatique ou de télécommunications. Il illustre la
disposition et les interconnexions des composants du réseau, notamment les serveurs, les routeurs, les commutateurs, les concentrateurs et les périphériques. Les diagrammes de réseau sont des outils précieux pour les ingénieurs et les administrateurs de réseau, qui peuvent ainsi
comprendre, configurer et dépanner les réseaux. Ils sont également essentiels pour
visualiser la structure et le flux des données dans un réseau, garantissant ainsi des performances et une sécurité optimales.
nwdiag, développé par
Takeshi Komiya, fournit une plateforme rationalisée pour esquisser rapidement des
diagrammes de réseau. Nous remercions Takeshi pour cet
outil innovant!
Grâce à sa syntaxe intuitive,
nwdiag a été intégré de manière transparente dans
PlantUML. Les exemples présentés ici sont inspirés de ceux documentés par
Takeshi.
Définir un réseau
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
nwdiag {
network dmz {
address = "210.x.x.x/24"
}
}
@enduml
|
Définir certains éléments ou serveurs sur un réseau
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
nwdiag {
network dmz {
address = "210.x.x.x/24"
web01 [address = "210.x.x.1"];
web02 [address = "210.x.x.2"];
}
}
@enduml
|
Exemple complet
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
Define group inside network definitions
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
Define group outside of network definitions
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
Define several groups on same network
Example with 2 group
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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]
Example with 3 groups
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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]
Network
For network or network's component, you can add or change:
- addresses (separated by comma
,
); - color;
- description;
- shape.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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] 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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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] 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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
You can use same nodes on different networks (more than two networks);
nwdiag use in this case
'jump line' over networks.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
Peer networks are simple connections between two nodes, for which we don't use a horizontal "busbar" network
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
nwdiag {
inet [shape = cloud];
inet -- router;
network {
router;
web01;
web02;
}
}
@enduml
|
Without group
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
nwdiag {
internet [ shape = cloud];
internet -- router;
network proxy {
router;
app;
}
network default {
app;
db;
}
}
@enduml
|
Group on first
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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] 🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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]With shadow (by default)
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
nwdiag {
network nw {
server;
internet;
}
internet [shape = cloud];
}
@enduml
|
Without shadow
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
<style>
root {
shadowing 0
}
</style>
nwdiag {
network nw {
server;
internet;
}
internet [shape = cloud];
}
@enduml
|
[Ref. QA-14516] 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:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
You can define other internal networks (TCP/IP, USB, SERIAL,...).
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
nwdiag {
network LAN1 {
a [address = "a1"];
}
network LAN2 {
a [address = "a2"];
switch;
}
switch -- equip;
equip -- printer;
}
@enduml
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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]Without style (by default)
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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] 🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
- Overlap of label for folder
- Hexagon shape is missing
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
nwdiag {
network Network {
Folder [shape = folder]
Hexagon [shape = hexagon]
}
}
@enduml
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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