Custom Chart Components for Splunk Classic: XML Snippet Collection
Splunk Classic dashboards allow deep customization through XML, CSS, and SVG.
This article provides a curated set of reusable XML snippets that help you build original visualization components—from simple shapes to fully annotated network diagrams.
2. Default Template
00_default_single_panel.xml
A clean, minimal starting point for anyone creating a custom visualization.
Use this template when you want to begin from scratch without any predefined styling or layout.
3. Shape Demo
shapes_variations_demo.xml
A comprehensive demonstration of all drawable shapes using CSS and SVG.
This file includes examples such as:
- Circles, rectangles, polygons
- Icons built from SVG paths
- Filled, outlined, and gradient variations
Perfect for learning how to construct visual elements directly inside Splunk dashboards.
4. Line Demo
line_variations_demo.xml
A complete set of line styles you can use in custom charts, including:
- Solid and dashed lines
- Arrowheads
- Curved paths (quadratic and cubic Bézier)
- Multi‑segment connectors
Useful when designing diagrams, flows, or network topologies.
5. Final Complete Version
complete_network_diagram.xml
The fully polished version of the custom chart, complete with:
- Detailed inline comments
- Layered shapes and connectors
- Reusable CSS classes
- A realistic network diagram layout
This file serves as the “answer key” for anyone wanting to understand how all components fit together.
もちろん、日本語に自然に翻訳してまとめ直したよ。Qiita記事としてそのまま投稿できる読みやすい文体にしてある。
Splunk Classic向けカスタムチャート部品：XMLスニペット集
Splunk Classic のダッシュボードは、XML・CSS・SVG を組み合わせることで高度なカスタマイズが可能です。
この記事では、シンプルな図形から本格的なネットワーク図まで、独自のビジュアライゼーションを構築するための再利用可能な XML スニペットをまとめて紹介します。
2. デフォルトテンプレート
00_default_single_panel.xml
カスタム可視化を作り始める人のための、最小構成のスターターテンプレートです。
余計なレイアウトやスタイルが一切入っていないため、ゼロから自由に組み立てたい場合に最適です。
3. 図形デモ
shapes_variations_demo.xml
CSS と SVG を使って描画できる図形パターンを網羅したデモファイルです。
含まれる例は以下の通りです：
- 円、四角形、多角形
- SVG パスで構成したアイコン
- 塗りつぶし、アウトライン、グラデーションなどのバリエーション
Splunk ダッシュボード内で図形を構築する方法を学ぶのに最適です。
4. 線デモ
line_variations_demo.xml
カスタムチャートで利用できる線のスタイルを一通りまとめたデモです：
- 実線・点線
- 矢印付きライン
- 曲線（2種類のベジェ曲線）
- 複数セグメントのコネクタ
フロー図やネットワーク構成図などを作る際に役立ちます。
5. 完成版
complete_network_diagram.xml
以下をすべて含んだ、完成度の高い最終版です：
- 詳細なインラインコメント
- 図形とコネクタのレイヤー構造
- 再利用可能な CSS クラス
- 実用的なネットワーク図レイアウト
各要素がどのように組み合わさっているかを理解するための「答え合わせ用ファイル」として使えます。
00_default_single_panel.xml
デフォルト：縦1個パネル（編集用テンプレート）で背景が黒色になるもの
<dashboard version="1.1">
<label>デフォルト：縦1個パネル（編集用テンプレート）</label>
<description>ここから自由に編集してください</description>
<row>
<panel>
<html>
<style>
.canvas {
width: 100%;
height: 600px;
background: #000;
position: relative;
overflow: hidden;
}
/* ここにスタイルを追加 */
</style>
<div class="canvas">
<!-- ここにコンテンツを追加 -->
</div>
</html>
</panel>
</row>
</dashboard>
shapes_variations_demo.xml
CSS/SVGで描ける全図形パターンの実例
図形バリエーション デモ CSS図形ギャラリー※ボタン風パーツのサンプルデザインを色々用意
<dashboard version="1.1">
<label>図形バリエーション デモ</label>
<description>CSS/SVGで描ける全図形パターン</description>
<row>
<panel>
<title>CSS図形ギャラリー</title>
<html>
<style>
.shape-gallery {
width: 100%;
height: 400px;
background: #000;
position: relative;
padding: 20px;
}
.shape-base {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-family: monospace;
font-weight: bold;
font-size: 10px;
color: #0ff;
border: 2px solid #0ff;
background: rgba(0, 20, 20, 0.8);
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
/* 四角形 */
.square {
width: 80px;
height: 80px;
top: 20px;
left: 20px;
}
/* 角丸四角形 */
.rounded {
width: 80px;
height: 80px;
border-radius: 15px;
top: 20px;
left: 130px;
}
/* 円形 */
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
top: 20px;
left: 240px;
}
/* ひし形 */
.diamond {
width: 80px;
height: 80px;
top: 20px;
left: 350px;
transform: rotate(45deg);
}
.diamond span {
transform: rotate(-45deg);
}
/* 長方形 */
.rectangle {
width: 120px;
height: 60px;
top: 20px;
left: 470px;
}
/* 楕円 */
.ellipse {
width: 120px;
height: 60px;
border-radius: 50%;
top: 20px;
left: 620px;
}
/* カプセル */
.capsule {
width: 120px;
height: 60px;
border-radius: 30px;
top: 120px;
left: 20px;
}
/* 台形風 */
.trapezoid {
width: 80px;
height: 60px;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
top: 120px;
left: 170px;
}
/* 三角形風（clip-path使用） */
.triangle {
width: 80px;
height: 80px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 120px;
left: 280px;
}
/* 五角形風 */
.pentagon {
width: 80px;
height: 80px;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
top: 120px;
left: 390px;
}
/* 六角形風 */
.hexagon {
width: 80px;
height: 80px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
top: 120px;
left: 500px;
}
/* 星形 */
.star {
width: 80px;
height: 80px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
top: 120px;
left: 610px;
}
</style>
<div class="shape-gallery">
<div class="shape-base square">SQUARE</div>
<div class="shape-base rounded">ROUNDED</div>
<div class="shape-base circle">CIRCLE</div>
<div class="shape-base diamond"><span>DIAMOND</span></div>
<div class="shape-base rectangle">RECTANGLE</div>
<div class="shape-base ellipse">ELLIPSE</div>
<div class="shape-base capsule">CAPSULE</div>
<div class="shape-base trapezoid">TRAPEZ</div>
<div class="shape-base triangle">TRI</div>
<div class="shape-base pentagon">PENTA</div>
<div class="shape-base hexagon">HEXA</div>
<div class="shape-base star">STAR</div>
</div>
</html>
</panel>
</row>
<row>
<panel>
<title>SVG図形ギャラリー</title>
<html>
<style>
.svg-gallery {
width: 100%;
height: 300px;
background: #000;
position: relative;
}
.svg-gallery svg {
width: 100%;
height: 100%;
}
.svg-shape {
fill: rgba(0, 20, 20, 0.8);
stroke: #0ff;
stroke-width: 2;
}
.svg-text {
fill: #0ff;
font-family: monospace;
font-size: 12px;
font-weight: bold;
text-anchor: middle;
}
</style>
<div class="svg-gallery">
<svg>
<!-- 長方形 -->
<rect class="svg-shape" x="20" y="50" width="80" height="60"/>
<text class="svg-text" x="60" y="85">RECT</text>
<!-- 角丸長方形 -->
<rect class="svg-shape" x="130" y="50" width="80" height="60" rx="10"/>
<text class="svg-text" x="170" y="85">ROUNDED</text>
<!-- 円 -->
<circle class="svg-shape" cx="280" cy="80" r="40"/>
<text class="svg-text" x="280" y="85">CIRCLE</text>
<!-- 楕円 -->
<ellipse class="svg-shape" cx="390" cy="80" rx="50" ry="30"/>
<text class="svg-text" x="390" y="85">ELLIPSE</text>
<!-- 三角形（polygon） -->
<polygon class="svg-shape" points="530,50 490,110 570,110"/>
<text class="svg-text" x="530" y="90">TRI</text>
<!-- 五角形 -->
<polygon class="svg-shape" points="670,50 710,75 690,115 650,115 630,75"/>
<text class="svg-text" x="670" y="90">PENTA</text>
<!-- 六角形 -->
<polygon class="svg-shape" points="60,200 100,180 140,200 140,240 100,260 60,240"/>
<text class="svg-text" x="100" y="225">HEXA</text>
<!-- 星形 -->
<polygon class="svg-shape" points="230,180 240,210 270,210 245,230 255,260 230,240 205,260 215,230 190,210 220,210"/>
<text class="svg-text" x="230" y="230">STAR</text>
<!-- ひし形（path） -->
<path class="svg-shape" d="M 370,180 L 410,220 L 370,260 L 330,220 Z"/>
<text class="svg-text" x="370" y="225">DIAMOND</text>
<!-- ハート形（path） -->
<path class="svg-shape" d="M 530,200 C 530,190 520,180 510,180 C 500,180 490,190 490,200 L 490,200 L 530,240 L 570,200 C 570,190 560,180 550,180 C 540,180 530,190 530,200 Z"/>
<text class="svg-text" x="530" y="225">HEART</text>
<!-- 矢印（path） -->
<path class="svg-shape" d="M 650,220 L 680,220 L 680,210 L 710,230 L 680,250 L 680,240 L 650,240 Z"/>
<text class="svg-text" x="680" y="275">ARROW</text>
</svg>
</div>
</html>
</panel>
</row>
</dashboard>
line_variations_demo.xml
線のバリエーション・デモ ※基本線や点線、矢印、先端スタイルなど
<dashboard version="1.1">
<label>線のバリエーション デモ</label>
<description>実線・点線・矢印・曲線の全パターン</description>
<row>
<panel>
<title>基本の線スタイル</title>
<html>
<style>
.line-demo {
width: 100%;
height: 400px;
background: #000;
position: relative;
}
.line-demo svg {
width: 100%;
height: 100%;
}
.line-label {
fill: #0ff;
font-family: monospace;
font-size: 11px;
}
/* 実線バリエーション */
.solid-thin { stroke: #0ff; stroke-width: 1; fill: none; }
.solid-normal { stroke: #0ff; stroke-width: 2; fill: none; }
.solid-thick { stroke: #0ff; stroke-width: 4; fill: none; }
.solid-very-thick { stroke: #0ff; stroke-width: 8; fill: none; }
/* 点線バリエーション */
.dotted { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 2, 3; }
.dashed { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 5, 5; }
.long-dash { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 10, 5; }
.dash-dot { stroke: #ff0; stroke-width: 2; fill: none; stroke-dasharray: 10, 5, 2, 5; }
/* 線端スタイル */
.round-cap { stroke-linecap: round; }
.square-cap { stroke-linecap: square; }
.butt-cap { stroke-linecap: butt; }
</style>
<div class="line-demo">
<svg>
<!-- 実線の太さバリエーション -->
<text class="line-label" x="10" y="25">実線の太さ:</text>
<line class="solid-thin" x1="120" y1="20" x2="300" y2="20"/>
<text class="line-label" x="310" y="25">Thin (1px)</text>
<line class="solid-normal" x1="120" y1="40" x2="300" y2="40"/>
<text class="line-label" x="310" y="45">Normal (2px)</text>
<line class="solid-thick" x1="120" y1="60" x2="300" y2="60"/>
<text class="line-label" x="310" y="65">Thick (4px)</text>
<line class="solid-very-thick" x1="120" y1="85" x2="300" y2="85"/>
<text class="line-label" x="310" y="90">Very Thick (8px)</text>
<!-- 点線バリエーション -->
<text class="line-label" x="10" y="135">点線スタイル:</text>
<line class="dotted" x1="120" y1="130" x2="300" y2="130"/>
<text class="line-label" x="310" y="135">Dotted (2,3)</text>
<line class="dashed" x1="120" y1="150" x2="300" y2="150"/>
<text class="line-label" x="310" y="155">Dashed (5,5)</text>
<line class="long-dash" x1="120" y1="170" x2="300" y2="170"/>
<text class="line-label" x="310" y="175">Long Dash (10,5)</text>
<line class="dash-dot" x1="120" y1="190" x2="300" y2="190"/>
<text class="line-label" x="310" y="195">Dash-Dot (10,5,2,5)</text>
<!-- 線端スタイル -->
<text class="line-label" x="10" y="235">線端スタイル:</text>
<line class="solid-very-thick round-cap" x1="120" y1="230" x2="300" y2="230" stroke="#f0f"/>
<text class="line-label" x="310" y="235">Round Cap</text>
<line class="solid-very-thick square-cap" x1="120" y1="250" x2="300" y2="250" stroke="#f0f"/>
<text class="line-label" x="310" y="255">Square Cap</text>
<line class="solid-very-thick butt-cap" x1="120" y1="270" x2="300" y2="270" stroke="#f0f"/>
<text class="line-label" x="310" y="275">Butt Cap (default)</text>
<!-- 色バリエーション -->
<text class="line-label" x="10" y="315">色バリエーション:</text>
<line class="solid-thick" x1="120" y1="310" x2="180" y2="310" stroke="#0ff"/>
<line class="solid-thick" x1="190" y1="310" x2="250" y2="310" stroke="#ff0"/>
<line class="solid-thick" x1="260" y1="310" x2="320" y2="310" stroke="#f0f"/>
<line class="solid-thick" x1="330" y1="310" x2="390" y2="310" stroke="#0f0"/>
<line class="solid-thick" x1="400" y1="310" x2="460" y2="310" stroke="#f00"/>
<line class="solid-thick" x1="470" y1="310" x2="530" y2="310" stroke="#f80"/>
<text class="line-label" x="540" y="315">Cyan/Yellow/Magenta/Green/Red/Orange</text>
</svg>
</div>
</html>
</panel>
</row>
<row>
<panel>
<title>矢印バリエーション</title>
<html>
<style>
.arrow-demo {
width: 100%;
height: 350px;
background: #000;
position: relative;
}
.arrow-demo svg {
width: 100%;
height: 100%;
}
</style>
<div class="arrow-demo">
<svg>
<!-- 矢印マーカーの定義 -->
<defs>
<!-- 通常の矢印（右向き） -->
<marker id="arrow-end" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#0ff"/>
</marker>
<!-- 逆向き矢印（左向き） -->
<marker id="arrow-start" markerWidth="10" markerHeight="10" refX="1" refY="3" orient="auto">
<polygon points="10 0, 0 3, 10 6" fill="#0ff"/>
</marker>
<!-- 大きい矢印 -->
<marker id="arrow-large" markerWidth="15" markerHeight="15" refX="13" refY="5" orient="auto">
<polygon points="0 0, 15 5, 0 10" fill="#ff0"/>
</marker>
<!-- 三角形の矢印 -->
<marker id="arrow-triangle" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
<polygon points="0 0, 12 6, 0 12" fill="#f0f"/>
</marker>
<!-- 丸の矢印 -->
<marker id="arrow-circle" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<circle cx="5" cy="5" r="3" fill="#0f0"/>
</marker>
</defs>
<text class="line-label" x="10" y="25">片側矢印:</text>
<!-- 右向き矢印 -->
<line x1="120" y1="20" x2="300" y2="20" stroke="#0ff" stroke-width="2" marker-end="url(#arrow-end)"/>
<text class="line-label" x="310" y="25">Right Arrow</text>
<!-- 左向き矢印 -->
<line x1="120" y1="40" x2="300" y2="40" stroke="#0ff" stroke-width="2" marker-start="url(#arrow-start)"/>
<text class="line-label" x="310" y="45">Left Arrow</text>
<text class="line-label" x="10" y="75">両端矢印:</text>
<!-- 両端矢印 -->
<line x1="120" y1="70" x2="300" y2="70" stroke="#0ff" stroke-width="2"
marker-start="url(#arrow-start)" marker-end="url(#arrow-end)"/>
<text class="line-label" x="310" y="75">Double Arrow</text>
<text class="line-label" x="10" y="105">サイズバリエーション:</text>
<!-- 大きい矢印 -->
<line x1="120" y1="100" x2="300" y2="100" stroke="#ff0" stroke-width="3" marker-end="url(#arrow-large)"/>
<text class="line-label" x="310" y="105">Large Arrow</text>
<text class="line-label" x="10" y="135">形状バリエーション:</text>
<!-- 三角形矢印 -->
<line x1="120" y1="130" x2="300" y2="130" stroke="#f0f" stroke-width="2" marker-end="url(#arrow-triangle)"/>
<text class="line-label" x="310" y="135">Triangle Arrow</text>
<!-- 丸矢印 -->
<line x1="120" y1="150" x2="300" y2="150" stroke="#0f0" stroke-width="2" marker-end="url(#arrow-circle)"/>
<text class="line-label" x="310" y="155">Circle Arrow</text>
<text class="line-label" x="10" y="185">点線と矢印の組み合わせ:</text>
<!-- 点線+矢印 -->
<line x1="120" y1="180" x2="300" y2="180" stroke="#0ff" stroke-width="2"
stroke-dasharray="5,5" marker-end="url(#arrow-end)"/>
<text class="line-label" x="310" y="185">Dashed + Arrow</text>
<!-- 太い点線+矢印 -->
<line x1="120" y1="200" x2="300" y2="200" stroke="#ff0" stroke-width="4"
stroke-dasharray="10,5" marker-end="url(#arrow-large)"/>
<text class="line-label" x="310" y="205">Thick Dashed + Arrow</text>
<text class="line-label" x="10" y="235">斜め方向の矢印:</text>
<!-- 斜め矢印（右下） -->
<line x1="120" y1="230" x2="250" y2="280" stroke="#0ff" stroke-width="2" marker-end="url(#arrow-end)"/>
<text class="line-label" x="260" y="260">Diagonal ↘</text>
<!-- 斜め矢印（右上） -->
<line x1="400" y1="280" x2="530" y2="230" stroke="#f0f" stroke-width="2" marker-end="url(#arrow-end)"/>
<text class="line-label" x="540" y="260">Diagonal ↗</text>
</svg>
</div>
</html>
</panel>
</row>
<row>
<panel>
<title>曲線バリエーション</title>
<html>
<style>
.curve-demo {
width: 100%;
height: 400px;
background: #000;
position: relative;
}
.curve-demo svg {
width: 100%;
height: 100%;
}
</style>
<div class="curve-demo">
<svg>
<text class="line-label" x="10" y="35">二次ベジェ曲線 (Q):</text>
<!-- 上向き曲線 -->
<path d="M 120,30 Q 200,10 280,30" stroke="#0ff" stroke-width="2" fill="none"/>
<text class="line-label" x="290" y="35">Upward Curve</text>
<!-- 下向き曲線 -->
<path d="M 120,60 Q 200,80 280,60" stroke="#0ff" stroke-width="2" fill="none"/>
<text class="line-label" x="290" y="65">Downward Curve</text>
<text class="line-label" x="10" y="115">三次ベジェ曲線 (C):</text>
<!-- S字曲線 -->
<path d="M 120,110 C 160,90 200,130 240,110" stroke="#ff0" stroke-width="2" fill="none"/>
<text class="line-label" x="250" y="115">S-Curve</text>
<!-- 波形 -->
<path d="M 120,140 C 140,120 160,160 180,140 C 200,120 220,160 240,140" stroke="#ff0" stroke-width="2" fill="none"/>
<text class="line-label" x="250" y="145">Wave</text>
<text class="line-label" x="10" y="185">円弧 (A):</text>
<!-- 半円 -->
<path d="M 120,180 A 60,60 0 0,1 240,180" stroke="#f0f" stroke-width="2" fill="none"/>
<text class="line-label" x="250" y="185">Semicircle</text>
<!-- 楕円弧 -->
<path d="M 120,210 A 80,40 0 0,0 280,210" stroke="#f0f" stroke-width="2" fill="none"/>
<text class="line-label" x="290" y="215">Ellipse Arc</text>
<text class="line-label" x="10" y="255">曲線+矢印:</text>
<defs>
<marker id="curve-arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#0ff"/>
</marker>
</defs>
<!-- 曲線矢印 -->
<path d="M 120,250 Q 200,230 280,250" stroke="#0ff" stroke-width="2" fill="none" marker-end="url(#curve-arrow)"/>
<text class="line-label" x="290" y="255">Curved Arrow</text>
<!-- S字矢印 -->
<path d="M 120,280 C 160,260 200,300 240,280" stroke="#ff0" stroke-width="2" fill="none" marker-end="url(#curve-arrow)"/>
<text class="line-label" x="250" y="285">S-Curve Arrow</text>
<text class="line-label" x="10" y="325">複雑なパス:</text>
<!-- ジグザグ -->
<path d="M 120,320 L 140,310 L 160,320 L 180,310 L 200,320 L 220,310 L 240,320"
stroke="#0f0" stroke-width="2" fill="none"/>
<text class="line-label" x="250" y="325">Zigzag</text>
<!-- スパイラル風 -->
<path d="M 120,360 Q 130,350 140,360 Q 150,370 160,360 Q 170,350 180,360 Q 190,370 200,360"
stroke="#0f0" stroke-width="2" fill="none"/>
<text class="line-label" x="210" y="365">Spiral-like</text>
</svg>
</div>
</html>
</panel>
</row>
</dashboard>
complete_network_diagram.xml
完全解説版
<dashboard version="1.1">
<label>【完成版】ネットワーク構成図 - 完全解説版</label>
<description>全要素を完全に分解した学習用完成版</description>
<row>
<panel>
<html>
<style>
/* ==========================================
1. コンテナ設定
========================================== */
.network-diagram {
width: 100%;
height: 600px;
background: #000;
position: relative;
overflow: hidden;
}
/* ==========================================
2. ノードの共通スタイル
すべてのデバイスに適用される基本デザイン
========================================== */
.node {
position: absolute; /* 自由な位置配置を可能に */
border: 2px solid #0ff; /* シアンの枠線 */
background: rgba(0, 20, 20, 0.8); /* 半透明の暗い背景 */
color: #0ff; /* シアンの文字色 */
padding: 15px; /* 内側の余白 */
font-family: monospace; /* 等幅フォント */
font-weight: bold; /* 太字 */
text-align: center; /* 中央揃え */
font-size: 12px; /* 文字サイズ */
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); /* ネオン光 */
}
/* ==========================================
3. デバイスタイプ別サイズ
========================================== */
/* ルーター: 80x80pxの正方形 */
.router {
width: 80px;
height: 80px;
line-height: 50px; /* テキストを垂直中央に */
}
/* スイッチ: 70x70pxの正方形 */
.switch {
width: 70px;
height: 70px;
line-height: 40px;
}
/* サーバー: 100x100pxの正方形 */
.server {
width: 100px;
height: 100px;
line-height: 35px;
}
/* エンドポイント: 50x50pxの小さい正方形 */
.endpoint {
width: 50px;
height: 50px;
line-height: 20px;
font-size: 10px;
}
/* ==========================================
4. 役割別カラーリング
特定の役割を持つデバイスの色を上書き
========================================== */
/* ファイアウォール: マゼンタ */
.firewall {
border-color: #f0f;
color: #f0f;
box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}
/* メインサーバー: オレンジ */
.main-server {
border-color: #f80;
color: #f80;
box-shadow: 0 0 15px rgba(255, 136, 0, 0.6);
}
/* ロードバランサー: イエロー */
.load-balancer {
border-color: #ff0;
color: #ff0;
box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}
/* ==========================================
5. 個別ノード配置
========================================== */
/* === 上段（ルーター層） === */
#r1 { top: 20px; left: 60px; } /* 左端 */
#r2 { top: 20px; left: 250px; } /* 左から2番目 */
#core-sw { top: 10px; left: 420px; } /* 中央（少し上） */
#r3 { top: 20px; left: 620px; } /* 右から2番目 */
#r4 { top: 20px; left: 810px; } /* 右端 */
/* === 中段（エンドポイント＆セキュリティ層） === */
#n7 { top: 130px; left: 10px; } /* 左端のエンドポイント */
#n1 { top: 130px; left: 130px; } /* 左側のエンドポイント */
#n2 { top: 130px; left: 760px; } /* 右側のエンドポイント */
#firewall-a { top: 180px; left: 260px; width: 140px; } /* 左ファイアウォール */
#main-server { top: 170px; left: 420px; } /* メインサーバー */
#firewall-b { top: 180px; left: 540px; width: 140px; } /* 右ファイアウォール */
/* === 下段（スイッチ＆ロードバランサー層） === */
#sw1 { top: 340px; left: 60px; } /* 左端スイッチ */
#sw2 { top: 340px; left: 250px; } /* 左中スイッチ */
#n3 { top: 340px; left: 330px; } /* 左側エンドポイント */
#load-bal { top: 310px; left: 420px; height: 130px; } /* ロードバランサー */
#n4 { top: 340px; left: 560px; } /* 右側エンドポイント */
#sw3 { top: 340px; left: 620px; } /* 右中スイッチ */
#sw4 { top: 340px; left: 810px; } /* 右端スイッチ */
/* ==========================================
6. SVG設定（接続線用）
========================================== */
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* クリックイベントを透過 */
}
.connection {
stroke-width: 2;
fill: none;
}
/* 線の色 */
.cyan { stroke: #0ff; } /* 通常接続 */
.yellow { stroke: #ff0; } /* 冗長化経路 */
.magenta { stroke: #f0f; } /* セキュリティ関連 */
</style>
<div class="network-diagram">
<!-- ==========================================
SVGレイヤー（接続線）
ノードより先に配置することで背景に
========================================== -->
<svg>
<!-- === 上段の横方向接続 === -->
<!-- R1 → R2 -->
<line class="connection cyan" x1="140" y1="60" x2="250" y2="60"/>
<!-- R2 → CORE-SW -->
<line class="connection cyan" x1="330" y1="60" x2="420" y2="60"/>
<!-- CORE-SW → R3 -->
<line class="connection cyan" x1="520" y1="60" x2="620" y2="60"/>
<!-- R3 → R4 -->
<line class="connection cyan" x1="700" y1="60" x2="810" y2="60"/>
<!-- === 上段から中段への接続 === -->
<!-- R1 → N1 (イエロー) -->
<line class="connection yellow" x1="100" y1="100" x2="155" y2="130"/>
<!-- R1 → N7 (シアン) -->
<line class="connection cyan" x1="60" y1="100" x2="35" y2="130"/>
<!-- R2 → FIREWALL_A (イエロー) -->
<line class="connection yellow" x1="290" y1="100" x2="300" y2="180"/>
<!-- R2 → N1 (シアン) -->
<line class="connection cyan" x1="250" y1="100" x2="180" y2="130"/>
<!-- CORE-SW → FIREWALL_A (マゼンタ) -->
<line class="connection magenta" x1="470" y1="110" x2="400" y2="180"/>
<!-- CORE-SW → FIREWALL_B (マゼンタ) -->
<line class="connection magenta" x1="470" y1="110" x2="580" y2="180"/>
<!-- R3 → FIREWALL_B (イエロー) -->
<line class="connection yellow" x1="660" y1="100" x2="600" y2="180"/>
<!-- R3 → N2 (シアン) -->
<line class="connection cyan" x1="700" y1="100" x2="760" y2="130"/>
<!-- R4 → SW4 (イエロー、長距離縦接続) -->
<line class="connection yellow" x1="850" y1="100" x2="850" y2="340"/>
<!-- === 中段の横方向接続 === -->
<!-- FIREWALL_A → MAIN_SERVER -->
<line class="connection magenta" x1="400" y1="215" x2="420" y2="215"/>
<!-- MAIN_SERVER → FIREWALL_B -->
<line class="connection magenta" x1="520" y1="215" x2="540" y2="215"/>
<!-- MAIN_SERVER → LOAD_BAL -->
<line class="connection magenta" x1="470" y1="270" x2="470" y2="310"/>
<!-- === 中段から下段への接続 === -->
<!-- FIREWALL_A → SW2 -->
<line class="connection magenta" x1="300" y1="240" x2="290" y2="340"/>
<!-- FIREWALL_B → SW3 -->
<line class="connection magenta" x1="600" y1="240" x2="660" y2="340"/>
<!-- === 下段の横方向接続 === -->
<!-- SW1 → SW2 -->
<line class="connection cyan" x1="130" y1="380" x2="250" y2="380"/>
<!-- SW2 → N3 -->
<line class="connection cyan" x1="320" y1="380" x2="330" y2="380"/>
<!-- N3 → LOAD_BAL -->
<line class="connection magenta" x1="360" y1="380" x2="420" y2="380"/>
<!-- LOAD_BAL → N4 -->
<line class="connection magenta" x1="520" y1="380" x2="560" y2="380"/>
<!-- N4 → SW3 -->
<line class="connection cyan" x1="590" y1="380" x2="620" y2="380"/>
<!-- SW3 → SW4 -->
<line class="connection cyan" x1="690" y1="380" x2="810" y2="380"/>
<!-- === 縦方向の長距離接続（冗長化経路） === -->
<!-- R1 → SW1 -->
<line class="connection yellow" x1="100" y1="100" x2="100" y2="340"/>
<!-- R3 → SW3 -->
<line class="connection yellow" x1="660" y1="100" x2="720" y2="340"/>
<!-- N4 → R3 (斜め) -->
<line class="connection yellow" x1="575" y1="340" x2="700" y2="100"/>
</svg>
<!-- ==========================================
ノードレイヤー（デバイス）
========================================== -->
<!-- === 上段：ルーター層 === -->
<div id="r1" class="node router">R1</div>
<div id="r2" class="node router">R2</div>
<div id="core-sw" class="node server">CORE<br/>SW</div>
<div id="r3" class="node router">R3</div>
<div id="r4" class="node router">R4</div>
<!-- === 中段：エンドポイント＆セキュリティ層 === -->
<div id="n7" class="node endpoint">N7</div>
<div id="n1" class="node endpoint">N1</div>
<div id="n2" class="node endpoint">N2</div>
<div id="firewall-a" class="node server firewall">FIREWALL_A</div>
<div id="main-server" class="node server main-server">MAIN<br/>SERVER</div>
<div id="firewall-b" class="node server firewall">FIREWALL_B</div>
<!-- === 下段：スイッチ＆ロードバランサー層 === -->
<div id="sw1" class="node switch">SW1</div>
<div id="sw2" class="node switch">SW2</div>
<div id="n3" class="node endpoint">N3</div>
<div id="load-bal" class="node server load-balancer">LOAD<br/>BAL</div>
<div id="n4" class="node endpoint">N4</div>
<div id="sw3" class="node switch">SW3</div>
<div id="sw4" class="node switch">SW4</div>
</div>
</html>
</panel>
</row>
<!-- ==========================================
ステータステーブル
========================================== -->
<row>
<panel>
<title>ネットワークステータス</title>
<table>
<search>
<query>| makeresults | eval device="All Systems", status="Operational" | table device status</query>
</search>
</table>
</panel>
</row>
</dashboard>
2. デフォルトテンプレート
-
00_default_single_panel.xml- これから編集を始める人用の空のテンプレート
3. 図形デモ
-
shapes_variations_demo.xml- CSS/SVGで描ける全図形パターンの実例
4. 線デモ
-
line_variations_demo.xml- 実線・点線・矢印・曲線の全パターン
5. 完成版
-
complete_network_diagram.xml- 完全解説コメント付きの最終版
🎯 記事の特徴
-
完全な要素分解
- 7つのレイヤーに分解して説明
- CSSクラスの継承関係を図解
- 座標系の計算方法を詳しく解説
-
段階的な実装手順
- Step 0〜10まで、1つずつ機能を追加
- 各ステップで何を学ぶかが明確
- コピペですぐ試せる
-
豊富なバリエーション
- 図形12種類（四角、円、多角形など）
- 線10種類以上（実線、点線、矢印、曲線）
- 色、太さ、スタイルの組み合わせ
-
実務で使えるテクニック
- ネオン効果の強化
- ホバーエフェクト
- アニメーション
- 状態管理
- ツールチップ
-
座標計算の完全ガイド
- 中心座標の計算式
- 接続点の求め方
- 実例付きで理解しやすい
この記事とサンプルコードがあれば、新人エンジニアでも：
- ✅ Splunkダッシュボードの基礎が理解できる
- ✅ 自由に図形と線を描けるようになる
- ✅ 実務で使えるネットワーク図が作れる
- ✅ 応用して独自のビジュアライゼーションが開発できるようになるはず！
応援しています。
※I performed thorough testing.