ホーム新着情報入門Online Server実行方法F.A.Q.ダウンロードフォーラム(英語)Theme前処理標準ライブラリHitchhiker's GuidePDFガイド
PlantUMLLanguage specificationnwdiag

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

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

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

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

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

ネットワークの定義

🎉 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

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

🎉 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
ノードのグルーピング

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

🎉 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]

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

ネットワーク

ネットワーク、ネットワーク要素に対して、次の項目が設定可能です：
  • アドレス (コンマ,区切り)
  • 色
  • 説明
  • 形状

🎉 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]

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

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

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

🎉 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
OpenIconicの使用

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

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

🎉 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
複数のネットワークに一つのノードを定義

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

🎉 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
ピア接続

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

🎉 Copied! 

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

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

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

グループ無し

🎉 Copied! 

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

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

1番目にグループを記述

🎉 Copied! 

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

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

    network proxy {
        router;
        app;
    }

    network default {
    	app;
        db;
    }
}
@enduml

2番目にグループを記述

🎉 Copied! 

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

    network proxy {
        router;
        app;
    }

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

    network default {
    	app;
        db;
    }
}
@enduml

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

3番目にグループを記述

🎉 Copied! 

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

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

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! 

@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
影の有無

影有り(デフォルト)

🎉 Copied! 

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

影無し

🎉 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
ネットワークの幅の変更

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

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

🎉 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

  • すべてに最大幅を指定

🎉 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

WARNING
 This translation need to be updated. 
WARNING

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

その他の内部ネットワーク（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]

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

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

🎉 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

スタイル有り

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

🎉 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
付録: ネットワーク図(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. フォルダのラベルが重なって表示される
  2. 六角形が表示されない

🎉 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