シーケンス図 ユースケース図 クラス図 アクティビティ図 コンポーネント図 状態図 オブジェクト図 配置図 タイミング図 Regex Network Wireframe Archimate Gantt MindMap WBS EBNF JSON YAML
PlantUML Language specification nwdiag

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ネットワーク図（nwdiag付き）

ネットワーク図とは、コンピューターや通信ネットワークを視覚的に表したものである。サーバー、ルーター、スイッチ、ハブ、デバイスなどのネットワーク・コンポーネントの配置と相互接続を図解します。ネットワーク・ダイアグラムは、ネットワーク・エンジニアや管理者にとって、ネットワークを理解し、設定し、トラブルシューティングするための貴重なツールです。また、ネットワーク内のデータの構造と流れを視覚化し、最適なパフォーマンスとセキュリティを確保するためにも不可欠です。

nwdiag は、Takeshi Komiya氏によって開発され、ネットワーク図を素早くスケッチするための合理的なプラットフォームを提供します。この革新的なツールを提供してくれたTakeshi氏に感謝します！

その直感的な構文から、nwdiagは PlantUMLにシームレスに統合されています。ここで紹介する例は、Takeshiによって文書化されたものに触発されたものです。

Edit in DokuwikiEdit in AsciidocEdit in Markdown
シンプルなネットワーク図

ネットワークの定義

🎉 Copied! 

@startnwdiag
  network dmz {
      address = "210.x.x.x/24"
  }
@endnwdiag

ネットワーク上にいくつかの要素またはサーバーを定義する

🎉 Copied! 

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

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

完全な例

🎉 Copied! 

@startnwdiag
  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;
  }
@endnwdiag

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
複数のアドレスを定義するケース

🎉 Copied! 

@startnwdiag
  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;
  }
@endnwdiag

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ノードのグルーピング

ネットワーク定義の中でグループを定義

🎉 Copied! 

@startnwdiag
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;
    }
  }
}
@endnwdiag

ネットワーク定義の外でグループを定義

🎉 Copied! 

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

    web01;
    web02;
    db01;
  }

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

一つのネットワークに複数のグループを定義

グループが２つの例

🎉 Copied! 

@startnwdiag
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 ;
  }
}
@endnwdiag

[Ref. QA-12663]

グループが３つの例

🎉 Copied! 

@startnwdiag
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;
  }
}
@endnwdiag

[Ref. QA-13138]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ネットワークとグループに対する拡張文法

ネットワーク

ネットワーク、ネットワーク要素に対して、次の項目が設定可能です：

🎉 Copied! 

@startnwdiag
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;
    }
  }
}
@endnwdiag

グループ

グループに対して、次の項目が設定可能です：

🎉 Copied! 

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

    web01;
    web02;
    db01;
  }

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

[Ref. QA-12056]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
スプライトの使用

標準ライブラリやその他のライブラリに含まれる、あらゆるスプライト（アイコン）を使用できます。

スプライトは<$sprite>の記法を使います。\nで改行できます。また、その他のCreole記法も使用できます。

🎉 Copied! 

@startnwdiag
!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"];
  }
}
@endnwdiag

[Ref. QA-11862]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
OpenIconicの使用

ネットワークまたはノードの説明で、OpenIconicのアイコンを使用することもできます。

<&icon>の記法でアイコンを表示します。<&icon*n>でサイズをn倍にします。\nで改行できます：

🎉 Copied! 

@startnwdiag

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"];
  }
}
@endnwdiag

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
複数のネットワークに一つのノードを定義

異なる二つ以上のネットワークに同一のノードを使用することができます。この場合、nwdiagではネットワークの上をジャンプする線が描画されます。

🎉 Copied! 

@startnwdiag
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;
  }

}
@endnwdiag

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ピア接続

ピア接続は、二つのノード間を単純につなぐものです。この場合は、横長の「バス線」ネットワークは使用されません。

🎉 Copied! 

@startnwdiag
  inet [shape = cloud];
  inet -- router;

  network {
    router;
    web01;
    web02;
  }
@endnwdiag

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ピア接続とグループ

グループ無し

🎉 Copied! 

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

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

1番目にグループを記述

🎉 Copied! 

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

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

    network proxy {
        router;
        app;
    }

    network default {
    	app;
        db;
    }
}
@endnwdiag

2番目にグループを記述

🎉 Copied! 

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

    network proxy {
        router;
        app;
    }

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

    network default {
    	app;
        db;
    }
}
@endnwdiag

FIXME
proxyから'db'へ線が引かれてしまいます。('db'は'default network'にしかつながっていないはずです。) [グループ無しの例を参照]

3番目にグループを記述

🎉 Copied! 

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

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

FIXME
[Ref. Issue#408 and QA-12655]
Not totally fixed

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ネットワーク図にタイトル、ヘッダ、フッタ、キャプション、凡例を追加する

🎉 Copied! 

@startnwdiag

header some header

footer some footer

title My title

  network inet {
      web01 [shape = cloud]
  }

legend
The legend
end legend

caption This is caption
@endnwdiag

[Ref. QA-11303 and Common commands]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
影の有無

影有り(デフォルト)

🎉 Copied! 

@startnwdiag
nwdiag {
  network nw {
    server;
    internet;
  }
  internet [shape = cloud];
}
@endnwdiag

影無し

🎉 Copied! 

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

[Ref. QA-14516]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
ネットワークの幅の変更

ネットワークの幅を変更することができます。一部の（もしくはすべての）ネットワークの幅をfull（最大幅）に設定して揃えることができます。

可能な組合せの例を示します：

🎉 Copied! 

@startnwdiag
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" ]
 }
}
@endnwdiag

🎉 Copied! 

@startnwdiag
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" ]
 }
}
@endnwdiag

🎉 Copied! 

@startnwdiag
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" ]
 }
}
@endnwdiag

🎉 Copied! 

@startnwdiag
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" ]
 }
}
@endnwdiag

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
その他の内部ネットワーク

その他の内部ネットワーク（TCP/IP、USB、SERIAL...）を定義することもできます。

🎉 Copied! 

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

🎉 Copied! 

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

[Ref. QA-12824]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
グローバルスタイルの使用

スタイル無し(デフォルト)

🎉 Copied! 

@startnwdiag
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;
  }
}
@endnwdiag

スタイル有り

スタイルを使用して要素の見た目を変更することができます。

🎉 Copied! 

@startnwdiag
<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;
  }
}
@endnwdiag

[Ref. QA-14479]

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
付録: ネットワーク図(nwdiag)上のすべての形状のテスト

🎉 Copied! 

@startnwdiag
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]   
  }
}
@endnwdiag

🎉 Copied! 

@startnwdiag
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! 

@startnwdiag
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]     
  }
}
@endnwdiag

FIXME
  1. フォルダのラベルが重なって表示される
  2. 六角形が表示されない

🎉 Copied! 

@startnwdiag
nwdiag {
network Network {
Folder [shape = folder]
Hexagon [shape = hexagon]
}
}
@endnwdiag

🎉 Copied! 

@startnwdiag
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"]
}
}
@endnwdiag

FIXME

WARNING
 This translation need to be updated. 
WARNING