|
nwdiag 是一位名叫 Takeshi Komiya 的人创建的，这使得我们可以快速绘制网络拓扑图。让我们为此感谢他的创作！
由于语法非常清晰和简单，该功能已经集成在PlantUML中。我们在这里展示Takeshi归档整理的示例。
定义一个网络
|
🎉 Copied!
|
@startuml
nwdiag {
network dmz {
address = "210.x.x.x/24"
}
}
@enduml
|
定义网络中的一些元素或服务器
|
🎉 Copied!
|
@startuml
nwdiag {
network dmz {
address = "210.x.x.x/24"
web01 [address = "210.x.x.1"];
web02 [address = "210.x.x.2"];
}
}
@enduml
|
完整的例子
|
🎉 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
|
|
🎉 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
|
在网络定义中定义组
|
🎉 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
|
在网络定义之外定义组
|
🎉 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
|
在同一个网络上定义不同的一些组
一个定义了两个组的例子
|
🎉 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]
定义了三个组的例子
|
🎉 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]
网络
用于网络或者网络的组成部分，你可以添加或者修改:
|
🎉 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
|
组
对于组，你可以添加或修改:
|
🎉 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]
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]
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
|
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
|
Peer networks are simple connections between two nodes, for which we don't use a horizontal "busbar" network
|
🎉 Copied!
|
@startuml
nwdiag {
inet [shape = cloud];
inet -- router;
network {
router;
web01;
web02;
}
}
@enduml
|
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]
|
🎉 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]
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]
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!
|
@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!
|
@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!
|
@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
|
You can define other internal networks (TCP/IP, USB, SERIAL,...).
|
🎉 Copied!
|
@startuml
nwdiag {
network LAN1 {
a [address = "a1"];
}
network LAN2 {
a [address = "a2"];
switch;
}
switch -- equip;
equip -- printer;
}
@enduml
|
|
🎉 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]
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]
|
🎉 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
- Overlap of label for folder
- 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
|
|
定义多个地址
Edit in Dokuwiki
Edit in Asciidoc
Edit in Markdown
