以下はご要望どおりの 英訳（フル翻訳・構成維持） です。
技術ドキュメント用途・社内共有・Qiita / GitHub README にそのまま使える表現にしています。
Splunk Classic Dashboard: How to Create a Network Topology Diagram
Complete Guide with Detailed Comments
🎯 What You Will Learn from This Guide
- How to build complex network topology diagrams
- How to place servers, switches, and client devices
- How to draw connection lines and calculate their positions
- A detailed, line-by-line explanation of the code
📐 Design Blueprint: What We Are Building
Server 1 Server 2
(Blue) (Blue)
│ │
└────┐ ┌────┘
│ │
┌──────────────┐
│ Switch │
│ (Green) │
└──────────────┘
│ │ │
┌───┘ │ └───┐
│ │ │
PC1 PC2 PC3
(Gray) (Gray) (Gray)
🎨 Complete Code (With Extremely Detailed Comments)
<dashboard version="1.1">
<!-- ========================================== -->
<!-- Dashboard title -->
<!-- Displayed at the top of the screen -->
<!-- ========================================== -->
<label>[Detailed Guide] How to Create a Network Topology Diagram</label>
<!-- ========================================== -->
<!-- row: horizontal layout container -->
<!-- Allows panels to be arranged side by side -->
<!-- ========================================== -->
<row>
<!-- ========================================== -->
<!-- panel: individual display area -->
<!-- Container for charts, tables, or HTML -->
<!-- ========================================== -->
<panel>
<!-- ========================================== -->
<!-- html: area for HTML and CSS -->
<!-- Used for custom designs -->
<!-- ========================================== -->
<html>
<!-- ========================================== -->
<!-- style: CSS definitions -->
<!-- Rules that control visual appearance -->
<!-- ========================================== -->
<style>
/* ========================================== */
/* .container: parent container */
/* Base container for positioning all elements */
/* ========================================== */
.container {
/* Use relative positioning as the reference */
position: relative;
/* Container width */
width: 1000px;
/* Container height */
height: 700px;
/* Background color */
background: #fafafa;
/* Center horizontally with margins */
margin: 30px auto;
/* Border styling */
border: 2px solid #ddd;
}
/* ========================================== */
/* .server: server box */
/* Represents database or web servers */
/* ========================================== */
.server {
position: absolute;
width: 180px;
height: 140px;
background: #1976D2;
border-radius: 8px;
box-shadow: 0 6px 15px rgba(0,0,0,0.3);
color: white;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ========================================== */
/* .switch: network switch */
/* Can also represent hubs or routers */
/* ========================================== */
.switch {
position: absolute;
width: 200px;
height: 60px;
background: #388E3C;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
/* ========================================== */
/* .client: client PC */
/* Represents end-user devices */
/* ========================================== */
.client {
position: absolute;
width: 100px;
height: 100px;
background: #757575;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
color: white;
font-weight: bold;
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ========================================== */
/* .line: connection line */
/* Connects servers, switches, and clients */
/* ========================================== */
.line {
position: absolute;
background: #999;
}
/* Horizontal line */
.line-h {
height: 3px;
}
/* Vertical line */
.line-v {
width: 3px;
}
/* ========================================== */
/* Element positioning */
/* ========================================== */
/* Server 1 (top-left) */
.server1 {
top: 50px;
left: 80px;
}
/* Server 2 (top-right) */
.server2 {
top: 50px;
right: 80px;
}
/* Switch (center) */
.switch1 {
top: 280px;
left: 400px; /* (1000 - 200) / 2 */
}
/* Clients (bottom) */
.client1 {
bottom: 80px;
left: 100px;
}
.client2 {
bottom: 80px;
left: 350px;
}
.client3 {
bottom: 80px;
right: 100px;
}
/* ========================================== */
/* Connection line positioning */
/* ========================================== */
.line1 {
top: 200px;
left: 168px;
height: 80px;
}
.line2 {
top: 200px;
right: 168px;
height: 80px;
}
.line3 {
top: 308px;
left: 268px;
width: 132px;
}
.line4 {
top: 308px;
left: 600px;
width: 152px;
}
.line5 {
top: 350px;
left: 498px;
height: 100px;
}
.line6 {
top: 450px;
left: 150px;
width: 348px;
}
.line7 {
top: 450px;
left: 400px;
width: 98px;
}
.line8 {
top: 450px;
left: 500px;
width: 300px;
}
/* Sub-label text (IP addresses, etc.) */
.sublabel {
font-size: 11px;
margin-top: 4px;
opacity: 0.9;
}
</style>
<!-- ========================================== -->
<!-- HTML Structure -->
<!-- ========================================== -->
<div class="container">
<!-- Servers -->
<div class="server server1">
<div>Server 1</div>
<div class="sublabel">Web Server</div>
</div>
<div class="server server2">
<div>Server 2</div>
<div class="sublabel">DB Server</div>
</div>
<!-- Switch -->
<div class="switch switch1">
Core Switch
</div>
<!-- Clients -->
<div class="client client1">
<div>PC-1</div>
<div class="sublabel">192.168.1.10</div>
</div>
<div class="client client2">
<div>PC-2</div>
<div class="sublabel">192.168.1.11</div>
</div>
<div class="client client3">
<div>PC-3</div>
<div class="sublabel">192.168.1.12</div>
</div>
<!-- Connection lines -->
<div class="line line-v line1"></div>
<div class="line line-v line2"></div>
<div class="line line-h line3"></div>
<div class="line line-h line4"></div>
<div class="line line-v line5"></div>
<div class="line line-h line6"></div>
<div class="line line-h line7"></div>
<div class="line line-h line8"></div>
</div>
</html>
</panel>
</row>
</dashboard>
📊 How Line Position Calculations Work
Vertical Line Horizontal Position
left = box_left + (box_width ÷ 2) - (line_thickness ÷ 2)
Horizontal Line Vertical Position
top = box_top + (box_height ÷ 2) - (line_thickness ÷ 2)
Line Length (Horizontal)
width = end_left - start_left
🎓 Beginner-Friendly Step-by-Step Approach
- Create one box
- Add another box
- Draw a single connection line
- Repeat the pattern
💡 Common Mistakes and Fixes
- Incorrect center calculations
- Missing
position: relativeon the container - Forgetting to subtract line thickness
📝 Summary
3 Steps to Build Complex Network Diagrams
| Step | Task | Key Point |
|---|---|---|
| 1 | Place boxes | Use position: absolute
|
| 2 | Calculate line positions | Center = left + (width ÷ 2) - (thickness ÷ 2) |
| 3 | Draw lines |
.line-h and .line-v
|
🚀 Copy this code and start building your own network topology diagram!
Splunk Classic Dashboard：ネットワーク構成図の作り方【完全解説・コメント付き】
🎯 このガイドで学べること
- 複雑なネットワーク構成図の作り方
- サーバー・スイッチ・クライアントの配置方法
- 接続線の引き方と計算方法
- コード1行ずつの詳細解説
📐 設計図：何を作るか
サーバー1 サーバー2
(青) (青)
│ │
└────┐ ┌────┘
│ │
┌──────────┐
│ スイッチ │
│ (緑) │
└──────────┘
│ │ │
┌───┘ │ └───┐
│ │ │
PC1 PC2 PC3
(灰色) (灰色) (灰色)
🎨 完全版コード（超詳細コメント付き）
<dashboard version="1.1">
<!-- ========================================== -->
<!-- ダッシュボードのタイトル -->
<!-- 画面上部に表示される -->
<!-- ========================================== -->
<label>【詳細解説】ネットワーク構成図の作り方</label>
<!-- ========================================== -->
<!-- row：横一列のエリア -->
<!-- 複数のパネルを横に並べることができる -->
<!-- ========================================== -->
<row>
<!-- ========================================== -->
<!-- panel：個別の表示エリア -->
<!-- グラフや表、HTMLを入れる箱 -->
<!-- ========================================== -->
<panel>
<!-- ========================================== -->
<!-- html：HTMLとCSSを書くエリア -->
<!-- ここにカスタムデザインを書く -->
<!-- ========================================== -->
<html>
<!-- ========================================== -->
<!-- style：CSS（スタイル）定義エリア -->
<!-- 見た目を決めるルールを書く -->
<!-- ========================================== -->
<style>
/* ========================================== */
/* .container：親コンテナ */
/* 全ての要素を配置する基準となる箱 */
/* ========================================== */
.container {
/* position: relative で基準点にする */
/* これがないと absolute が画面全体基準になる */
position: relative;
/* コンテナの横幅：1000ピクセル */
width: 1000px;
/* コンテナの縦幅：700ピクセル */
height: 700px;
/* 背景色：薄いグレー（#fafafa） */
background: #fafafa;
/* 余白：上下左右30ピクセル、左右は自動（中央揃え） */
margin: 30px auto;
/* 枠線：2ピクセルの実線、色は薄いグレー */
border: 2px solid #ddd;
}
/* ========================================== */
/* .server：サーバーボックス */
/* データベースサーバーやWebサーバーを表現 */
/* ========================================== */
.server {
/* 絶対位置：親要素（container）を基準に配置 */
position: absolute;
/* サーバーボックスの横幅：180ピクセル */
width: 180px;
/* サーバーボックスの縦幅：140ピクセル */
/* クライアントより大きくして重要性を表現 */
height: 140px;
/* 背景色：濃い青（#1976D2） */
/* サーバーは青系で表現することが多い */
background: #1976D2;
/* 角丸：8ピクセル */
/* 少し丸みをつけて柔らかい印象に */
border-radius: 8px;
/* 影：X軸0、Y軸6px、ぼかし15px、色は半透明黒 */
/* 立体感を出す */
box-shadow: 0 6px 15px rgba(0,0,0,0.3);
/* 文字色：白 */
color: white;
/* 文字の太さ：太字 */
font-weight: bold;
/* Flexboxを使って中身を配置 */
display: flex;
/* 中身を縦方向に並べる */
flex-direction: column;
/* 縦方向の中央揃え */
justify-content: center;
/* 横方向の中央揃え */
align-items: center;
}
/* ========================================== */
/* .switch：ネットワークスイッチ */
/* ハブやルーターとしても使える */
/* ========================================== */
.switch {
/* 絶対位置で配置 */
position: absolute;
/* スイッチの横幅：200ピクセル */
/* 横長にしてスイッチらしく */
width: 200px;
/* スイッチの縦幅：60ピクセル */
/* 薄めにする */
height: 60px;
/* 背景色：緑（#388E3C） */
/* ネットワーク機器は緑系が多い */
background: #388E3C;
/* 角丸：6ピクセル */
border-radius: 6px;
/* 影をつける */
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
/* 文字色：白 */
color: white;
/* 文字の太さ：太字 */
font-weight: bold;
/* Flexboxで中央揃え */
display: flex;
justify-content: center;
align-items: center;
}
/* ========================================== */
/* .client：クライアントPC */
/* エンドユーザーのパソコンを表現 */
/* ========================================== */
.client {
/* 絶対位置で配置 */
position: absolute;
/* PCの横幅：100ピクセル */
/* サーバーより小さく */
width: 100px;
/* PCの縦幅：100ピクセル */
/* 正方形に近い形 */
height: 100px;
/* 背景色：グレー（#757575） */
/* クライアントは灰色で表現 */
background: #757575;
/* 角丸：50% = 円形 */
/* PCを円形で表現 */
border-radius: 50%;
/* 影をつける */
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
/* 文字色：白 */
color: white;
/* 文字の太さ：太字 */
font-weight: bold;
/* 文字サイズ：12ピクセル */
/* 小さめにする */
font-size: 12px;
/* Flexboxで配置 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ========================================== */
/* .line：接続線 */
/* サーバー・スイッチ・PCを繋ぐ線 */
/* ========================================== */
.line {
/* 絶対位置で配置 */
position: absolute;
/* 線の色：濃いグレー（#999） */
background: #999;
}
/* ========================================== */
/* .line-h：横線 */
/* 水平方向の接続線 */
/* ========================================== */
.line-h {
/* 横線の高さ（太さ）：3ピクセル */
height: 3px;
/* 幅は個別に指定 */
}
/* ========================================== */
/* .line-v：縦線 */
/* 垂直方向の接続線 */
/* ========================================== */
.line-v {
/* 縦線の幅（太さ）：3ピクセル */
width: 3px;
/* 高さは個別に指定 */
}
/* ========================================== */
/* 各要素の位置指定 */
/* ここで実際の配置場所を決める */
/* ========================================== */
/* ========================================== */
/* サーバー1の位置（左上） */
/* ========================================== */
.server1 {
/* 上から50ピクセル */
top: 50px;
/* 左から80ピクセル */
left: 80px;
}
/* ========================================== */
/* サーバー2の位置（右上） */
/* ========================================== */
.server2 {
/* 上から50ピクセル（サーバー1と同じ高さ） */
top: 50px;
/* 右から80ピクセル */
/* leftではなくrightを使う */
right: 80px;
}
/* ========================================== */
/* スイッチの位置（中央） */
/* ========================================== */
.switch1 {
/* 上から280ピクセル */
top: 280px;
/* 左から400ピクセル */
/* 中央に配置するための計算： */
/* (1000 - 200) / 2 = 400 */
left: 400px;
}
/* ========================================== */
/* クライアント1の位置（左下） */
/* ========================================== */
.client1 {
/* 下から80ピクセル */
/* bottomを使うと下基準で配置できる */
bottom: 80px;
/* 左から100ピクセル */
left: 100px;
}
/* ========================================== */
/* クライアント2の位置（中央下） */
/* ========================================== */
.client2 {
/* 下から80ピクセル（client1と同じ高さ） */
bottom: 80px;
/* 左から350ピクセル */
left: 350px;
}
/* ========================================== */
/* クライアント3の位置（右下） */
/* ========================================== */
.client3 {
/* 下から80ピクセル */
bottom: 80px;
/* 右から100ピクセル */
right: 100px;
}
/* ========================================== */
/* 接続線の配置 */
/* 線の位置とサイズを計算で決める */
/* ========================================== */
/* ========================================== */
/* line1：サーバー1 → スイッチ（縦線） */
/* ========================================== */
.line1 {
/* 線の開始位置（上端） */
/* サーバー1の下端：50 + 140 = 190 */
/* 少し余白：190 + 10 = 200 */
top: 200px;
/* 線の横位置 */
/* サーバー1の中央：80 + (180/2) = 170 */
/* 線の太さ分調整：170 - (3/2) = 168 */
left: 168px;
/* 線の長さ（高さ） */
/* スイッチまでの距離：280 - 200 = 80 */
height: 80px;
}
/* ========================================== */
/* line2：サーバー2 → スイッチ（縦線） */
/* ========================================== */
.line2 {
/* 線の開始位置 */
/* サーバー1と同じ計算 */
top: 200px;
/* 右基準で配置 */
/* サーバー2の中央：80 + (180/2) = 170 */
/* 線の太さ分調整：170 - (3/2) = 168 */
right: 168px;
/* 線の長さ */
height: 80px;
}
/* ========================================== */
/* line3：サーバー1 → スイッチ（横線・左側） */
/* ========================================== */
.line3 {
/* 線の縦位置 */
/* スイッチの中央：280 + (60/2) = 310 */
/* 線の太さ分調整：310 - (3/2) = 308 */
top: 308px;
/* 線の開始位置（左端） */
/* サーバー1の右端：80 + 180 = 260 */
/* 少し余白：260 + 8 = 268 */
left: 268px;
/* 線の長さ（幅） */
/* スイッチまでの距離：400 - 268 = 132 */
width: 132px;
}
/* ========================================== */
/* line4：サーバー2 → スイッチ（横線・右側） */
/* ========================================== */
.line4 {
/* 線の縦位置（スイッチの中央） */
top: 308px;
/* 線の開始位置（左端） */
/* スイッチの右端：400 + 200 = 600 */
left: 600px;
/* 線の長さ */
/* サーバー2の左端まで */
/* 計算：1000 - 80 - 180 - 600 = 140 */
/* 余白調整：140 + 12 = 152 */
width: 152px;
}
/* ========================================== */
/* line5：スイッチ → クライアント群（縦線） */
/* ========================================== */
.line5 {
/* 線の開始位置 */
/* スイッチの下端：280 + 60 = 340 */
/* 少し余白：340 + 10 = 350 */
top: 350px;
/* 線の横位置 */
/* スイッチの中央：400 + (200/2) = 500 */
/* 線の太さ分調整：500 - (3/2) = 498 */
left: 498px;
/* 線の長さ */
/* クライアント群までの距離：100ピクセル */
height: 100px;
}
/* ========================================== */
/* line6：スイッチ → クライアント1（横線） */
/* ========================================== */
.line6 {
/* 線の縦位置 */
/* line5の下端：350 + 100 = 450 */
top: 450px;
/* 線の開始位置 */
/* クライアント1の中央：100 + (100/2) = 150 */
left: 150px;
/* 線の長さ */
/* line5の位置まで：498 - 150 = 348 */
width: 348px;
}
/* ========================================== */
/* line7：スイッチ → クライアント2（横線） */
/* ========================================== */
.line7 {
/* 線の縦位置 */
top: 450px;
/* 線の開始位置 */
/* クライアント2の中央：350 + (100/2) = 400 */
left: 400px;
/* 線の長さ */
/* line5まで：498 - 400 = 98 */
width: 98px;
}
/* ========================================== */
/* line8：スイッチ → クライアント3（横線） */
/* ========================================== */
.line8 {
/* 線の縦位置 */
top: 450px;
/* 線の開始位置 */
/* line5の右側：500 */
left: 500px;
/* 線の長さ */
/* クライアント3の中央まで */
/* 計算：(1000 - 100 - 100/2) - 500 = 300 */
width: 300px;
}
/* ========================================== */
/* テキストスタイル */
/* ========================================== */
/* サブラベル（IPアドレスなど） */
.sublabel {
/* 文字サイズ：11ピクセル */
font-size: 11px;
/* 上に余白：4ピクセル */
margin-top: 4px;
/* 透明度：90%（少し薄く） */
opacity: 0.9;
}
</style>
<!-- ========================================== -->
<!-- HTML構造 -->
<!-- 実際に表示される要素 -->
<!-- ========================================== -->
<div class="container">
<!-- ========================================== -->
<!-- サーバー部分 -->
<!-- ========================================== -->
<!-- サーバー1：Webサーバー -->
<!-- classを2つ指定：server（共通スタイル）+ server1（位置） -->
<div class="server server1">
<!-- メインテキスト -->
<div>サーバー1</div>
<!-- サブテキスト（役割） -->
<div class="sublabel">Web Server</div>
</div>
<!-- サーバー2：DBサーバー -->
<div class="server server2">
<div>サーバー2</div>
<div class="sublabel">DB Server</div>
</div>
<!-- ========================================== -->
<!-- スイッチ部分 -->
<!-- ========================================== -->
<!-- コアスイッチ -->
<div class="switch switch1">
Core Switch
</div>
<!-- ========================================== -->
<!-- クライアントPC部分 -->
<!-- ========================================== -->
<!-- PC-1 -->
<div class="client client1">
<!-- PC名 -->
<div>PC-1</div>
<!-- IPアドレス -->
<div class="sublabel">192.168.1.10</div>
</div>
<!-- PC-2 -->
<div class="client client2">
<div>PC-2</div>
<div class="sublabel">192.168.1.11</div>
</div>
<!-- PC-3 -->
<div class="client client3">
<div>PC-3</div>
<div class="sublabel">192.168.1.12</div>
</div>
<!-- ========================================== -->
<!-- 接続線部分 -->
<!-- 全8本の線を配置 -->
<!-- ========================================== -->
<!-- サーバー1からスイッチへの縦線 -->
<div class="line line-v line1"></div>
<!-- サーバー2からスイッチへの縦線 -->
<div class="line line-v line2"></div>
<!-- サーバー1からスイッチへの横線 -->
<div class="line line-h line3"></div>
<!-- サーバー2からスイッチへの横線 -->
<div class="line line-h line4"></div>
<!-- スイッチからクライアント群への縦線 -->
<div class="line line-v line5"></div>
<!-- スイッチからクライアント1への横線 -->
<div class="line line-h line6"></div>
<!-- スイッチからクライアント2への横線 -->
<div class="line line-h line7"></div>
<!-- スイッチからクライアント3への横線 -->
<div class="line line-h line8"></div>
</div>
</html>
</panel>
</row>
</dashboard>
📊 線の位置計算方法（詳細解説）
計算式テンプレート
縦線の横位置を計算
left = ボックスのleft + (ボックスの幅 ÷ 2) - (線の太さ ÷ 2)
例：サーバー1の中央
サーバー1：left = 80px, width = 180px
線の太さ：3px
計算：
left = 80 + (180 ÷ 2) - (3 ÷ 2)
= 80 + 90 - 1.5
= 168px
横線の縦位置を計算
top = ボックスのtop + (ボックスの高さ ÷ 2) - (線の太さ ÷ 2)
例：スイッチの中央
スイッチ：top = 280px, height = 60px
線の太さ：3px
計算：
top = 280 + (60 ÷ 2) - (3 ÷ 2)
= 280 + 30 - 1.5
= 308px
線の長さを計算
横線の場合：
width = 終点のleft - 始点のleft
例：line3（サーバー1 → スイッチ）
始点：サーバー1の右端 = 80 + 180 = 260
終点：スイッチの左端 = 400
計算：
width = 400 - 260 - 余白
= 140 - 8（余白）
= 132px
🎓 初心者向け：段階的な作り方
ステップ1：まず1つのボックスを作る
<div class="server server1">
サーバー1
</div>
.server1 {
top: 50px;
left: 80px;
}
ステップ2：2つ目のボックスを追加
<div class="server server2">
サーバー2
</div>
.server2 {
top: 50px;
right: 80px; /* 右基準で配置 */
}
ステップ3：線を1本引く
<div class="line line-v line1"></div>
.line1 {
top: 200px; /* サーバー1の下 */
left: 168px; /* サーバー1の中央 */
height: 80px; /* 線の長さ */
}
ステップ4：繰り返す
同じ手順で、ボックスと線を追加していく
💡 よくある間違いと解決法
間違い1：線がズレる
原因：
/* 中央位置の計算ミス */
.line1 {
left: 170px; /* ← 168pxが正解 */
}
解決：
left = ボックスのleft + (幅 ÷ 2) - (線の太さ ÷ 2)
= 80 + 90 - 1.5
= 168px ✓
間違い2：親要素に position: relative がない
原因：
.container {
/* position: relative; が抜けている */
width: 1000px;
}
結果： 子要素が画面全体基準で配置される
解決：
.container {
position: relative; /* ← これを追加 */
width: 1000px;
}
間違い3：線の太さを忘れる
間違った計算：
left = 80 + 90 = 170px ← 線の太さ分がズレる
正しい計算：
left = 80 + 90 - 1.5 = 168px ✓
📝 まとめ
複雑なネットワーク図を作る3ステップ
| Step | やること | ポイント |
|---|---|---|
| 1 | ボックスを配置 |
position: absolute で自由配置 |
| 2 | 線の位置を計算 | 中央位置 = left + (幅÷2) - (太さ÷2) |
| 3 | 線を描画 |
.line-h（横線）、.line-v（縦線） |
このコードをコピペして、自分の構成図を作ってみよう！ 🚀